在vue項目中使用阿裡svg矢量圖

1、進入阿裡svg矢量圖官網：官網位址

2、進入圖示庫 => 所有圖示庫

3、搜尋圖示

支援拼音、漢字、英語

4、将選中圖示加入購物車

5、進入購物車，選擇【添加至購物車】

• 如若沒有建立的項目，請先點選【加入項目】後的【添加】按鈕建立新項目

  

  

6、點選确定進入【我的項目】界面

7、選中symbol，并下載下傳到本地

8、引用

将iconfont.js檔案解壓到項目src目錄下的assets檔案夾下的js檔案夾下(如若沒有該檔案目錄請自行建立)

檔案目錄表：

9、在main.js檔案中引入iconfont

import './assets/js/font_1987881_z2auf9al3jo/iconfont'
           

font_1987881_z2auf9al3jo是自行随機生成的檔案夾

10、應用于頁面

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx" target="_blank" rel="external nofollow" ></use>
</svg>

// xlink:href="#圖示名稱" target="_blank" rel="external nofollow" 
           

11、擷取圖示名稱

• 打開demo_index.html檔案

  

• 選中symbol項

  

• 井号後的就是圖示名稱

12、在全局樣式中加入通用 CSS 代碼（引入一次就行）

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
           

如每個圖示的樣式都不相同，可在使用圖示的元件中單獨加上樣式

.icon {
 	color: #05d1ca;     // 顔色
    font-size:14px;     // 大小
}
           

13、添加新圖示

在目前的圖示項目中添加了新的圖示後隻需将新的檔案重新下載下傳到本地，然後更換js下的iconfont.js檔案即可