ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存

前一段时间在项目中引入阿里巴巴字体图标库的图标，按步骤走了一遍，但是一直不成功。
刚好需求改了，不需要用图标，就暂时搁浅没在管这个。
今天又有新的需求要用到字体图标，在ant-design-vue官方文档上看icon自带的图标，还是没有符合需求的。一直往下翻文档，翻到一段关于自定义的描述。

感觉好像可以试试，在网上搜了一篇文章，按教程，果然在项目中实现了。
Ant Design Vue通过iconfont构建自定义图标库

为了以后再使用的时候还有印象，特意把完整流程记录下来
1：在阿里巴巴字体图标库上搜索自己需要的图标，网址：阿里巴巴字体图标库
2：搜索自己需要的图标

鼠标经过图标的上方，会出现弹窗，选择第一个添加入库

点击右上角购物车形状的图标

将图标添加至项目

新建个项目名

新建的项目里，新加的图标都在里面

点击下载至本地，压缩后得到一个文件夹

在vue的项目中，src下的assets文件夹中新建icon文件夹或者iconfonts文件夹，文件夹名字自定义
把解压后的所有文件复制到icon文件夹里

到此为止，图标文件已经成功导入到项目里。

3、在main.js入口文件中导入

import {Icon,message} from 'ant-design-vue';import iconFront from './assets/icon/iconfont.js'//这个iconfont.js就是从iconfont.cn网站上下载后解压的JS文件
const myicon = Icon.createFromIconfontCN({scriptUrl: iconFront
})
//引用
Vue.component('my-icon', myicon)

样式名在iconfont.css中找

然后在需要用到图标的组件中使用即可

成功！！！

新增：如果项目里已经下载过图标，又有新的需求要求再下载，这样的需求也是存在的
还是按上面的流程添加完点击下载，把新下载的文件夹里的文件都重新换个新文件名

iconfontsn.css里要修改url地址

然后在main.js中新增一个组件名

在要用到的页面上，ok，成功

ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存相关推荐

Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题
问题:自定义菜单图标时收起菜单文字不隐藏问题代码: <a-menu-item v-for="item in memberMenu" :key="item.path ...
ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号
前言我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面 export const columns = [{title: ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Vue3 + Ant Design Vue 可搜索自定义字段 a-tree
记录一下,使用 Ant Design Vue a-tree 需要实现可搜索且后台返回数据不是标准数据的问题目录可搜索自定义字段完整全部代码可搜索自定义字段实现自定义字段需要使用 Tree ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
1.什么是 Chrome 插件谷歌浏览器插件是一种小型的定制浏览器体验的程序,通过插件可以自定义浏览器的一些行为来适合个人的需求,例如上面的查看服务器状态插件. 在应用商店中下载下来的插件基本上都是 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...

ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存

ant-design-vue 自定义图标，关联阿里巴巴字体图标库，项目已有图标，新下载的图标要重命名重新保存相关推荐

最新文章

热门文章