安裝

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 文件設置, 這里不做詳述

總結

以上是生活随笔為你收集整理的Vue 引入 icon 图标的全部內容，希望文章能夠幫你解決所遇到的問題。

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