記錄一次在Vue中動態(tài)使用阿里巴巴矢量圖標庫
這是本人第一次使用阿里巴巴的矢量圖標庫，簡單的導入和使用的話網上的教程很多，這里不多贅述，本人的需求是從數據庫中加載出來并且顯示到頁面上，接下來簡述一下如何實現。
以下代碼均是本人實際推敲、測試可用后寫出來的，請放心食用。
前言
阿里巴巴矢量圖標庫（以下簡稱阿里巴巴圖標）針對每一個圖標提供了三種編碼方式，分別是Unicode、Font class、Symbol。它們的名稱特點如下：
![[Vue]從數據庫中動態(tài)加載阿里巴巴矢量圖標的兩種方式,vue.js,數據庫,前端](https://imgs.yssmx.com/Uploads/2024/01/809378-1.png)
方式一 | 動態(tài)加載Unicode編碼
如上圖所示：Unicode圖標的名字是以&開頭;結尾的一個編碼，在阿里巴巴的官方教程中它的使用如下：
官方寫法：
<i class="iconfont"></i>
錯誤寫法：針對這種編碼方式的動態(tài)加載，我在網上并沒有找到可用的教程。不過我的理解很簡單，標簽里面的class="iconfont"寫死，標簽中間寫上它的編碼就可以。我最初的想法很簡單，用插值表達式嘛，所以代碼如下（失敗了）：
<i class="iconfont">{{item.icon}}</i>
上面的代碼僅僅是將數據庫中的一段顯示的放在了前端，效果嘛，本來該出現圖標的位置出現的是
這一串字符。
正確寫法：稍作思考后，我想到了HTML中常用的空格，也就是 等。我覺得Unicode編碼也許不能作為文本來處理，應該用html來處理，因此我們應該使用v-html來取代插值表達式，代碼如下：
<i class="iconfont" v-html="item.icon"></i>
我在數據庫中存儲的數據如下（顯示效果如右側所示）：
![[Vue]從數據庫中動態(tài)加載阿里巴巴矢量圖標的兩種方式,vue.js,數據庫,前端](https://imgs.yssmx.com/Uploads/2024/01/809378-2.png)
方式二 | 使用Font class的方式
其實Font class的圖標我覺得更好用一些，使用起來有點像是element-ui的圖標，官方教程如下。
官方寫法：
<span class="iconfont icon-sp-xxx"></span>
'icon-sp-'是我自己定義的前綴，下載圖標的時候可以設置。
這種寫法很簡單，因此如果要從數據庫中查出來顯示到前端的話，只要如下就可以（注意空格）：
<i :class="'iconfont '+item.icon"></i>
相較于官方教程寫死class，這種方式只不過是給class綁定了一個字符串 + 空格 + item，很好理解，不多贅述，下面是我數據庫中存儲的數據與前端顯示效果：
![[Vue]從數據庫中動態(tài)加載阿里巴巴矢量圖標的兩種方式,vue.js,數據庫,前端](https://imgs.yssmx.com/Uploads/2024/01/809378-3.png)
記得存儲的時候忽略最前面的.
第三種方式就省略吧，因為針對于動態(tài)導入，我們考慮的只有名字或者是編碼，而只看名字的話，第二種種方式和第三種方式別無二致，一樣用吧。
拓展
當然了，針對方式二稍作改變，將iconfont icon-sp-shezhi這整個字段存儲在數據庫中，然后前段代碼如下也是可以顯示的：文章來源：http://www.zghlxwxcb.cn/news/detail-809378.html
<i :class="item.icon"></i>
數據庫中存儲數據與顯示效果如下所示：文章來源地址http://www.zghlxwxcb.cn/news/detail-809378.html
![[Vue]從數據庫中動態(tài)加載阿里巴巴矢量圖標的兩種方式,vue.js,數據庫,前端](https://imgs.yssmx.com/Uploads/2024/01/809378-4.png)
到了這里，關于[Vue]從數據庫中動態(tài)加載阿里巴巴矢量圖標的兩種方式的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
