在阿里矢量庫(kù)官網(wǎng)選圖標(biāo)，加入購(gòu)物車，加入項(xiàng)目，注意選擇Symbol，復(fù)制此處的在線鏈接，在vue項(xiàng)目的index.html里面引入該鏈接。

<script src="//at.alicdn.com/t/font_3114766_bx1bjr28ixs.js"></script>

在index.html中寫(xiě)入svg圖標(biāo)通用樣式。

.icon {width: 2.5em;height: 2.5em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;margin-right: 5px; }

在vue文件模版中寫(xiě)入圖標(biāo)代碼，圖標(biāo)的名字在項(xiàng)目中復(fù)制。

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-lianxi"></use></svg>

注意： 在這里要用#加Font class名（例如#icon-lianxi，icon-lianxi為復(fù)制的名字）

總結(jié)

以上是生活随笔為你收集整理的vue中使用阿里矢量库彩色图标办法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。