antd 引入和使用iconfont

vue2项目用的是antd的UI库，在此记录一下antd使用iconfont图标的步骤。

版本清单：

• vue：2.7.8
• antd：1.7.6

一、从iconfont网站上下载图标文件至本地

我的项目 —— 选择Symbol —— 下载至本地

二、将下载的js文件放入vue工程下

下载的文件是一个压缩包，只需要把压缩包内的iconfont.js文件放入vue工程里。

此js文件也可自己重命名，我把此文件放在src/assets/font路径下。

三、vue引入iconfont

前提：已引入antd。（怎么引入使用antd库这里不做说明。）

在main.js中引入iconfont图标库。

// 引入iconfont图标库
import { Icon } from 'ant-design-vue';
import iconFont from '@/assets/font/iconfont'

// antd自定义图标
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: iconFont,
});

Vue.component('IconFont', IconFont);

scriptUrl不要直接写入文件路径，例"./assets/font/iconfont"，因为文件放在src目录下会因为路径不正确报错，所以先import文件。（或者将文件放在public目录下就可以直接写为文件路径。）

四、使用iconfont图标

<a-button>
   <icon-font type="icon-list" />
</a-button>