安裝

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

使用

1. 阿里巴巴矢量圖

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

2. IcoMoon

• 點(diǎn)擊右上角"icoMoon App"
• 點(diǎn)擊左上角"Import Icons"
• 選擇下載的 svg 文件,點(diǎn)擊"打開"按鈕
• 頁面上會(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è)置, 這里不做詳述