直接將阿里矢量圖庫下載下來的文件加入到庫中是無法使用的,編譯時會報錯,這是因為小程序中無法引入外部圖標庫
正確的引入方式是,先將iconfont庫進行轉(zhuǎn)換,轉(zhuǎn)換成base64編碼之后再進行引入
1.從阿里矢量圖庫下載圖標庫文件(工程中實際只要使用到iconfont.css文件,其他文件無需加到工程目錄下)
image.png
2.上傳tff文件,轉(zhuǎn)換成base64
轉(zhuǎn)換網(wǎng)站: https://transfonter.org
image.png
下載后的壓縮包進行解壓,文件如下
image.png
打開css文件,復(fù)制這一行到工程下的iconfont.css文件下
image.png
其他的都可以刪除,把剛剛復(fù)制的一行粘貼進來,最后的format可以改成turetype
image.png
使用:
在App.vue文件中根據(jù)文件路徑引入iconfont.css文件即可使用
image.png
index.vue:
image.png
