經過設置createFromIconfontCN使Vue3項目支持iconfont圖標庫

本教程講解的是基於Vue3和Ant Design Vue，前面講了Vue3項目動態引入iconfont（阿里巴巴矢量圖標庫），這種這種寫法只適用部分狀況，如今咱們又有了一個新的需求，就是在菜單裏面使用iconfont圖標，Ant Design Vue在 1.2.0 以後，使用了 SVG 圖標替換了原先的 font 圖標，以前a-icon這種寫法已經在新的版本中不適用了，就須要換種方式解決。

官方已經提供在新版本使用iconfont圖標庫的方式，就是經過設置 createFromIconfontCN 方法參數對象中的 scriptUrl 字段， 便可輕鬆地使用已有項目中的圖標。，那咱們就在項目實戰上，實現iconfont圖標庫的使用。

1 編寫通用方法
教程是基於前面的Vue3項目動態引入iconfont（阿里巴巴矢量圖標庫），因此本次功能也加載同一個文件裏。只在原來基礎上加了幾句代碼，導入createFromIconfontCN，導出IconFont 。

**
 * 阿里iconfont配置 
 **/
import { createFromIconfontCN } from '@ant-design/icons-vue';

// 定義iconfont庫
let iconfontVersion = ['1135504_hneleglv0jv']
let iconfontUrlCss = `//at.alicdn.com/t/font_$key.css`
let iconfontUrljs = `//at.alicdn.com/t/font_$key.js`

// 定義動態插入方法
const loadStyle = url => {
    const link = document.createElement('link')
    link.type = 'text/css'
    link.rel = 'stylesheet'
    link.href = url
    const head = document.getElementsByTagName('head')[0]
    head.appendChild(link)
}
// 新增 導出
export const IconFont = createFromIconfontCN({
    scriptUrl: iconfontUrljs.replace('$key', iconfontVersion[0])
});

// 動態插入
iconfontVersion.forEach(ele => {
    loadStyle(iconfontUrlCss.replace('$key', ele))
})

2 使用iconfont
上面的代碼已經實現了部分功能，下面就是咱們使用iconfont了，首先導入

import { IconFont } from "@/utils/iconfont";

在 components 中初始化

components: {
    IconFont
},

頁面使用

<Icon-font type="icon-plane-device" />

type裏面的值是你iconfont的值，我這裏使用的是小飛機這個圖標，

最終效果

上面演示的代碼是開源項目，已經上傳到gitee，項目是基於Vue3+Ant Design Vue的管理平臺項目，最近在更新，增長功能很少，部分效果以下

有興趣能夠一塊兒完善。