[Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式

记录一次在Vue中动态使用阿里巴巴矢量图标库

这是本人第一次使用阿里巴巴的矢量图标库，简单的导入和使用的话网上的教程很多，这里不多赘述，本人的需求是从数据库中加载出来并且显示到页面上，接下来简述一下如何实现。

^{以下代码均是本人实际推敲、测试可用后写出来的，请放心食用。}

前言

阿里巴巴矢量图标库（以下简称阿里巴巴图标）针对每一个图标提供了三种编码方式，分别是Unicode、Font class、Symbol。它们的名称特点如下：

方式一 | 动态加载Unicode编码

如上图所示：Unicode图标的名字是以&开头;结尾的一个编码，在阿里巴巴的官方教程中它的使用如下：

官方写法：

<i class="iconfont">i>

错误写法：针对这种编码方式的动态加载，我在网上并没有找到可用的教程。不过我的理解很简单，标签里面的class="iconfont"写死，标签中间写上它的编码就可以。我最初的想法很简单，用插值表达式嘛，所以代码如下（失败了）：

<i class="iconfont">{{item.icon}}i>

上面的代码仅仅是将数据库中的一段显示的放在了前端，效果嘛，本来该出现图标的位置出现的是这一串字符。

正确写法：稍作思考后，我想到了HTML中常用的空格，也就是 等。我觉得Unicode编码也许不能作为文本来处理，应该用html来处理，因此我们应该使用v-html来取代插值表达式，代码如下：

<i class="iconfont" v-html="item.icon">i>

我在数据库中存储的数据如下（显示效果如右侧所示）：

方式二 | 使用Font class的方式

其实Font class的图标我觉得更好用一些，使用起来有点像是element-ui的图标，官方教程如下。

官方写法：

<span class="iconfont icon-sp-xxx">span>

^{'icon-sp-'是我自己定义的前缀，下载图标的时候可以设置。}

这种写法很简单，因此如果要从数据库中查出来显示到前端的话，只要如下就可以（注意空格）：

<i :class="'iconfont '+item.icon">i>

相较于官方教程写死class，这种方式只不过是给class绑定了一个字符串 + 空格 + item，很好理解，不多赘述，下面是我数据库中存储的数据与前端显示效果：

^{记得存储的时候忽略最前面的.}

第三种方式就省略吧，因为针对于动态导入，我们考虑的只有名字或者是编码，而只看名字的话，第二种种方式和第三种方式别无二致，一样用吧。

拓展

当然了，针对方式二稍作改变，将iconfont icon-sp-shezhi这整个字段存储在数据库中，然后前段代码如下也是可以显示的：

<i :class="item.icon">i>

数据库中存储数据与显示效果如下所示：