ant design of vue自定义字体图标（阿里巴巴矢量图标库的使用）

symbol引用（阿里巴巴矢量图标库）

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。可以通过一些技巧，支持像字体那样，通过font-size,color来调整样式。

下面是ant design of vue官网的介绍

下面介绍使用方式
1、打开阿里巴巴矢量图标库，找到项目，选择symbol方式，复制代码如：//at.alicdn.com/t/font_1848039_9sjfmhyi7iv.js

2、在项目中写入通用js文件(我是放入src下core中的my_icon.js中)，scriptUrl的值就是刚才复制的代码

import {
  Icon
} from 'ant-design-vue'
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_1848039_k8b44h4qanf.js' // 在 iconfont.cn 上生成
})
export {
  IconFont
}

3、组件使用
引用IconFont，然后注册，最后使用即可

import { IconFont } from '@/core/my_icon'
components: { IconFont },

<a-button><icon-font type="iconxiugai-11" style="font-size:16px"/>修改</a-button>

阿里矢量图标库官网使用方法介绍
参考01
参考02

阿里矢量图标库的使用方法

我的博客