安裝

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

使用

1. 阿里巴巴矢量圖

• 選擇需要的字體修改參數(shù)
• 選擇SVG下載

2. IcoMoon

• 點(diǎn)擊右上角”icoMoon App”
• 點(diǎn)擊左上角”Import Icons”
• 選擇下載的 svg 文件,點(diǎn)擊”打開”按鈕
• 頁(yè)面上會(huì)多一個(gè)”Untitled Set”選項(xiàng),下面的小圖標(biāo)就是導(dǎo)入的本地 svg 文件
• 點(diǎn)擊選擇這些小圖標(biāo),點(diǎn)擊右下角”Generate Font”生成字體
• 鼠標(biāo)移入到圖標(biāo)的時(shí)候,下面會(huì)顯示”Get Code”,點(diǎn)擊查看 (此步驟可省略)
• 點(diǎn)擊頂部”Preferences”參數(shù)選擇按鈕,修改 Font Name: elm-icon, 其他選項(xiàng)默認(rèn)即可
• 每個(gè) icon 的名字也建議修改一下, 方便引用
• 點(diǎn)擊右下角”Download”下載并解壓
  
  

3. 導(dǎo)入

• 打開 elm-icon 文件夾
• 把 fonts 文件夾下的所有文件復(fù)制到 src/common/fonts 文件夾下
• 把 style.css 文件改名為 elm-icon.css, 并復(fù)制到 src/common/fonts 文件夾下, 這里要注意修改里面的路徑, 否則會(huì)報(bào)錯(cuò)呦!!!
  

@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. 引入

進(jìn)入 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 文件設(shè)置, 這里不做詳述

總結(jié)

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

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