最近在使用antd-v搞前端，想让国际化切换语言时图标也跟着换。
首先，先去 iconfont.cn 挑选想要的图标，加入购物车，然后下载下来解压。主要使用iconfont.js即可，demo_index.html里有使用方法，iconfont.css也可以看看。把 iconfont.js 放入 src/assets/iconfont/ 目录中，然后在 main.js 中注册自定义图标组件：
import {Icon} from 'ant-design-vue'
import iconFont from '@/assets/iconfont/iconfont'
// 添加iconfont
const iconfont = Icon.createFromIconfontCN({
scriptUrl: iconFont
})
Vue.component('icon-font', iconfont)修改加载国际化图标逻辑：
<div v-if="langAlias === 'CN'"> <icon-font type="icon-zhongwen"/> </div> <div v-else-if="langAlias === 'US'"> <icon-font type="icon-yingwen"/> </div>
如果启动服务报 no-self-assign 错误：可以找到 eslint-recommended.js 将 "no-self-assign": "error", 此行注释掉即可。更方便的方式是在 package.json 里的 eslintConfig 配置规则中加入报错忽略。
// 报错信息如下：
ERROR Failed to compile with 1 errors
error in ./src/assets/iconfont/iconfont.js
Module Error (from ./node_modules/eslint-loader/index.js):
~/thor-frontend/src/assets/iconfont/iconfont.js
1:2123 error 't' is assigned to itself no-self-assign
1 problem (1 error, 0 warnings)
// 解决
打开 ~/thor-frontend/node_modules/eslint/conf/eslint-recommended.js
注释此行 → // "no-self-assign": "error",
// package.json中配置
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars":"off",
"no-self-assign": "error"
}
},直接自定义一个 Iconfont 全局组件，首先将iconfont.js放在src/assets/js目录中，在src/components下新建iconfont文件夹，在里边创建 index.js 文件，内容如下：
import Vue from 'vue'
import {Icon} from 'ant-design-vue'
import iconFont from '@/assets/js/iconfont'
// 添加iconfont
const iconfont = Icon.createFromIconfontCN({
scriptUrl: iconFont
})
Vue.component('icon-font', iconfont)
export default {
name: 'Iconfont'
}然后在main.js只需添加如下两行即可，这样看上去更优雅一些。
import Iconfont from '@/components/iconfont' Vue.use(Iconfont)
最终效果如下：
