vue3使用Ant Design Vue库时全局引入iconfont图标

最新推荐文章于 2024-06-21 10:59:08 发布

做个合格的宸汐缘

最新推荐文章于 2024-06-21 10:59:08 发布

阅读量712

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_49074952/article/details/133687826

版权

1.点击iconfont图标库生成连接，将连接内容保存到本地

2.在main.ts文件中添加以下代码

import {createFromIconfontCN} from "@ant-design/icons-vue";

const IconFont = createFromIconfontCN({
  scriptUrl: '/iconfont/iconfontPublic.js',
})

createApp(App)
  .component('IconFont', IconFont)
  .mount('#app')

3.在页面需要使用的地方这样使用，其中type为iconfont对应的

 <IconFont class="title-icon" type="icon-GZT-bangongrili"/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

做个合格的宸汐缘

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue3使用Ant Design Vue库时全局引入iconfont图标

3.在页面需要使用的地方这样使用，其中type为iconfont对应的。1.点击iconfont图标库生成连接，将连接内容保存到本地。2.在main.ts文件中添加以下代码。
复制链接

扫一扫

Vue3中使用Ant Design Vue图标

海阔天空

03-28

2651

Vue3中使用Ant Design Vue图标

通过设置createFromIconfontCN使Vue3项目支持iconfont图标库

青年码农

01-05

1552

本教程讲解的是基于Vue3和Ant Design Vue，前面讲了Vue3项目动态引入iconfont（阿里巴巴矢量图标库），这种这种写法只适用部分情况，现在我们又有了一个新的需求，就是在菜单里面使用iconfont图标，Ant Design Vue在 1.2.0 之后，使用了 SVG 图标替换了原先的 font 图标，之前a-icon这种写法已经在新的版本中不适用了，就...

1 条评论您还未登录，请先登录后发表或查看评论

Ant Design4.X引入阿里iconfont.cn图标

weixin_43422861的博客

11-30

161

参考：Ant Design(antd)4.X引入阿里iconfont.cn图标(Icon)

基于vue3 + ant-design 使用阿里图标库iconfont.cn

最新发布

weixin_45653441的博客

06-21

348

对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段，symbol 生成链接粘贴进去即可。即可轻松地使用已有项目中的图标。组件封装 IconFont。

vue3 ts 使用 Ant Design Vue 全局引入 icons

xinbear的博客

06-15

1466

重点是使用 Record。

在ant-design-vue中使用iconfont

qq_43244452的博客

04-11

1741

1、把想要使用的图标添加入库点击下面的购物车图标，就可以看到想要添加的图标了 2、把图标添加至项目如果没有项目，就新增项目 3、将图标下载到本地 4、解压下载的文件，里面有一个iconfont.js 5、将iconfont.js文件放到项目中 6、在组件中导入并使用只有添加到项目的图标才能使用，没有添加到项目的图标是不能用的 <template> <div> <icon-font type="icon-fuwu" /> </di

Ant Design Vue 组件或图标的引入和使用

WangYan的博客

07-21

2375

AntDesignVue组件或图标的引入和使用。

Vue3+Vite+Ant Design 后台管理系统模板.zip

07-06

基于 vue3 + ant-design-vue 的中后台管理系统.zip

05-26

全栈-Vite3+Vue3+TS+Ant-design-vue3整合

11-07

基于vue-cli3 和 ant-design-vue搭建的后台管理系统模板

02-23

在本文中，我们将深入探讨如何使用Vue CLI 3和Ant Design Vue构建一个高效的后台管理系统模板。Vue CLI 3是Vue.js官方提供的一个快速脚手架工具，它简化了项目的初始化和配置过程，而Ant Design Vue则是一个基于Vue....

ant-design-vue按需加载的坑的解决

11-20

在Vue.js开发中，我们经常使用Ant Design Vue作为前端UI框架，它提供了丰富的组件和优雅的设计风格。然而，在实际开发过程中，我们可能会遇到一些技术挑战，例如按需加载（tree shaking）Ant Design Vue时出现的编译...

Vue3如何引入iconfont

HaushoLin的博客

12-02

2739

本次采用的免费字体图标是iconfont。

ant design of vue 中引入iconfont

weixin_43899943的博客

12-17

1266

ant design of vue 中引入iconfont 在阿里巴巴矢量库创建项目，添加图标，下载项目的zip文件将zip包解压，解压的iconfont.js文件放到vue项目中在需要使用图标的vue组件的script中： // 引入项目中的 iconfontjs 文件 import iconfontjs from "../../assets/iconfont/iconfont.js"; const IconFont = Icon.createFromIconfontCN({ scriptUr

动态引入 antDesign 的图标，并注册为组件

pig_ning的博客

06-20

2189

【代码】动态引入 antDesign 的图标，并注册为组件。

css引入矢量图标_通过设置createFromIconfontCN使Vue3项目支持iconfont图标库

weixin_36332616的博客

01-09

2691

本教程讲解的是基于Vue3和Ant Design Vue，前面讲了Vue3项目动态引入iconfont(阿里巴巴矢量图标库)，这种这种写法只适用部分情况，现在我们又有了一个新的需求，就是在菜单里面使用iconfont图标，Ant Design Vue在 1.2.0 之后，使用了 SVG 图标替换了原先的 font 图标，之前a-icon这种写法已经在新的版本中不适用了，就需要换种方式解决...

基于vue3 + ant-design 自定义SVG图标iconfont的解决方案；ant-design加载本地iconfont.js不显示图标问题

DJCBPL的专栏

09-19

2616

基于vue3 + ant-design 自定义SVG图标iconfont的解决方案；ant-design加载本地iconfont.js不显示图标问题，加载本地资源不成功问题

ant design pro of vue怎么使用阿里iconfont

wu_pan123的博客

11-09

698

如下图所示，将生成的js代码复制，在项目中创建一个js文件，将代码粘贴进去。在项目components文件夹下创建IconFont（或者自己喜欢的名称）文件夹，在文件夹下创建index.js（用于统一向外暴露组件）和每个图标对应的vue组件文件。然后，在main.js中引入文件，并进行全局组件注册。在main.js中添加下面代码。在项目config/router.config.js文件中引入图标组件，并使用。在vue组件文件中设计图标组件（其他图标做类似操作）在index.js中向外统一暴露图标组件。

vue3中 ant design vue 如何全局引入

04-05

在 Vue3 中，可以通过在 main.js 中全局引入 Ant Design Vue 来使用它的组件。具体步骤如下： 1. 安装 Ant Design Vue： ```bash npm install ant-design-vue@next ``` 2. 在 main.js 中引入 Ant Design Vue： ```js import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; // 引入 Ant Design Vue 样式表 createApp(App) .use(Antd) .mount('#app') ``` 3. 在组件中使用 Ant Design Vue 的组件： ```html <template> <a-button type="primary">Primary Button</a-button> </template> ``` 参考资料： - [Ant Design Vue 官方文档](https://2x.antdv.com/docs/vue/introduce-cn/)