Ant Design Vue 如何创建自定义Icon，如何引用？

Question

栗子地址：https://vuecomponent.github.i...

我没理解示例，求教，感谢。

Answer 1

这么久了 没人回复,恰好我今天用到了,回复一下，供后面的人参考

首先你在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)

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

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

Answer 2

这么多icon 还不够你用 要自定义应该先去Iconfont里去添加 保存到私有库了 要是自定义也应该是在这上创建icon 然后再应用到项目中 自定义不太清楚 你可以试下