Nuxt中使用Ant design Vue通过iconfont构

一、去iconfont下载iconfont.js

步骤一 步骤二

二、将iconfont.js放入到assets目录中

例如

三、在plugins目录中新建icon.js

import Vue from 'vue'
//引入Ant Design Vue中的icon
import { Icon } from 'ant-design-vue'
import iconfrontjs from '@/assets/iconfont/iconfont.js'

const iconFrontUrl = iconfrontjs
const customIcon = Icon.createFromIconfontCN({
  scriptUrl: iconFrontUrl
})
//组件标签自己定义
Vue.component('custom-icon', customIcon)

四、在nuxt.config.js中的plugins数组中配置

 plugins: [
    ...
    { src: '@/plugins/icon', ssr: false }
  ],

五、页面中使用

//示例代码
<custom-icon type="yt-kefu"  />

六、注意事项

• iconfont中，自己的项目中如果新增了图标，需要重新下载iconfont.js到assets目录里面去，之前iconfont.js是有一个在线的cdn链接的，现在官方不给用了，必须自己下载放到工程里面引用了。