Ant Design Vue 如何创建自定义Icon,如何引用?

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

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

回答:

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注