虽然Ant Design Vue
已经为咱们内置了不少icon图标,咱们很方便就能使用,但有时候有些图表咱们仍是系统能实现定义,本文主要介绍根据iconfont图标库建立自定义的icon图表,并在Ant Design Vue
中使用javascript
首先在iconfont里面将本身添加的图标添加到自定义项目后,下载压缩包,解压后你应该有以下结构:css
iconfont.css
iconfont.eot
iconfont.js //这个js很重要
iconfont.json
iconfont.ttt
iconfont.svg
…其余文件vue
在Vue
的工程的main.js
中自定义图标组件,代码以下:java
//引入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)
到此,自定义图标组件就已经完成了,在咱们的.vue
组件中使用方法:web
<template> <a-layout-content class="knife4j-body-content"> <my-icon type="icon-home"></my-icon> 使用自定义组件 </a-layout-content> </template>
Ant Design Vue自定义icon图标文档:https://www.antdv.com/components/icon-cn/json