Vue引入icon圖示

安裝

npm install vue-svg-icon --save-dev

使用

1. 阿里巴巴向量圖

• 選擇需要的字型修改引數
• 選擇SVG下載

2. IcoMoon

• 點選右上角”icoMoon App”
• 點選左上角”Import Icons”
• 選擇下載的 svg 檔案,點選”開啟”按鈕
• 頁面上會多一個”Untitled Set”選項,下面的小圖示就是匯入的本地 svg 檔案
• 點選選擇這些小圖示,點選右下角”Generate Font”生成字型
• 滑鼠移入到圖示的時候,下面會顯示”Get Code”,點選檢視 (此步驟可省略)
• 點選頂部”Preferences”引數選擇按鈕,修改 Font Name: elm-icon, 其他選項預設即可
• 每個 icon 的名字也建議修改一下, 方便引用

• 點選右下角”Download”下載並解壓

3. 匯入

• 開啟 elm-icon 資料夾
• 把 fonts 資料夾下的所有檔案複製到 src/common/fonts 資料夾下
• 把 style.css 檔案改名為 elm-icon.css, 並複製到 src/common/fonts 資料夾下, 這裡要注意修改裡面的路徑, 否則會報錯呦!!!

@font-face {
  font-family: `elm-icon`;
  src:  url(`elm-icon.eot?z8fchd`);
  src:  url(`elm-icon.eot?z8fchd#iefix`) format(`embedded-opentype`),
    url(`elm-icon.ttf?z8fchd`) format(`truetype`),
    url(`elm-icon.woff?z8fchd`) format(`woff`),
    url(`elm-icon.svg?z8fchd#elm-icon`) format(`svg`);
  font-weight: normal;
  font-style: normal;
}

4. 引入

進入 src/main.js

import `./fonts/elm-icon.css`

5. 使用

• html

<i class="elm-icon icon-home"></i>
<i class="elm-icon icon-discover"></i>
<i class="elm-icon icon-order"></i>
<i class="elm-icon icon-profile"></i>

• css

i {
    font-size: 0.3rem;
}

6. 注意

顏色可在 elm-icon.css 檔案設定, 這裡不做詳述