在阿里矢量庫官網選圖標，加入購物車，加入項目，注意選擇Symbol，復制此處的在線鏈接，在vue項目的index.html里面引入該鏈接。

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

在index.html中寫入svg圖標通用樣式。

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

在vue文件模版中寫入圖標代碼，圖標的名字在項目中復制。

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。