Ant Design Vue通过iconfont构建自定义图标库_tdesign 使用iconfont图标

虽然Ant Design Vue已经为我们内置了很多icon图标,我们很方便就能使用,但有时候有些图表我们还是系统能实现定义，本文主要介绍根据iconfont图标库创建自定义的icon图表,并在Ant Design Vue中使用

首先在iconfont里面将自己添加的图标添加到自定义项目后，下载压缩包，解压后你应该有如下结构：

iconfont.css
iconfont.eot
iconfont.js //这个js很重要
iconfont.json
iconfont.ttt
iconfont.svg
…其他文件

在Vue的工程的main.js中自定义图标组件,代码如下:

//引入Ant Design Vue中的icon
import {
  Icon
} from 'ant-design-vue'

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

1
2
3
4
5
6
7
8
9
10
11
12
13

到此,自定义图标组件就已经完成了,在我们的.vue组件中使用方法：

<template>
  <a-layout-content class="knife4j-body-content">
    <my-icon type="icon-home"></my-icon> 使用自定义组件
  </a-layout-content>
</template>
1
2
3
4
5
6

Ant Design Vue自定义icon图标文档：https://www.antdv.com/components/icon-cn/