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>