官網(wǎng)

一、手動(dòng)創(chuàng)建自己的項(xiàng)目圖標(biāo)庫(kù)

選中圖標(biāo) → 添加入庫(kù)（點(diǎn)擊購(gòu)物車）→ 完成后點(diǎn)擊上方菜單欄的購(gòu)物車
→ 添加至項(xiàng)目（沒有則新建項(xiàng)目）→ 自動(dòng)打開項(xiàng)目圖標(biāo)庫(kù) → 點(diǎn)擊下載至本地
→ 點(diǎn)擊demo包的demo_index.html，上面有三種使用方式，分別是Unicode、Font class、Symbol（這個(gè)本地demo包很關(guān)鍵需保留，使用時(shí)打開demo_index.html）

注意：用編輯器直接打開demo_index.html可以看到，三種圖標(biāo)的介紹和使用demo

二、在vue項(xiàng)目中使用

1. Unicode 的方式使用圖標(biāo)

1. 將本地demo包中的
   iconfont.css
   iconfont.ttf
   iconfont.woff
   iconfont.woff2
   拷貝到 /src/assets/icon-font 文件夾下
2. 在main.js中引入 iconfont.css

import './assets/icon-font/iconfont.css'

3. 在組件中使用
   容器：<span class="icon iconfont"></span>
   編碼： & #xe600; (直接拷貝demo中，Unicode下的對(duì)應(yīng)圖標(biāo)下的圖標(biāo)碼即可)
   
   index.png

<span class="icon iconfont">&#xe600;</span>

此類圖標(biāo)相當(dāng)于字體，常添加新class，通過 font-size控制圖標(biāo)大小，可以設(shè)置color等

<template>
  <div>
     <span class="icon iconfont kaishi">&#xe600;</span>
  </div>
</template>
<style lang="less">
.kaishi {
  font-size: 32px;
  color: pink;
}
</style>

2. Font class 的方式使用圖標(biāo)

1. 將本地demo包中的
   iconfont.css
   iconfont.ttf
   iconfont.woff
   iconfont.woff2
   拷貝到 /src/assets/icon-font 文件夾下
2. 在main.js中引入 iconfont.css

import './assets/icon-font/iconfont.css'

3. 在組件中使用
   容器：<i class="iconfont"></i>
   類名： icon-kaishi (直接拷貝demo中，F(xiàn)ont class下的對(duì)應(yīng)圖標(biāo)下的類名即可)

<i class="iconfont icon-kaishi"></i>

此類圖標(biāo)相當(dāng)于字體，常使用最后一個(gè)class，通過 font-size控制圖標(biāo)大小，可以設(shè)置color等
使用時(shí)在 font-class名稱前加上 icon- 前綴

<template>
  <div>
     <i class="iconfont icon-kaishi"></i>
  </div>
</template>
<style lang="less">
.icon-kaishi {
  font-size: 32px;
  color: pink;
}
</style>

3. Symbol 的方式渲染圖標(biāo)

1. 將本地demo包中的
   iconfont.js
   拷貝到 /src/assets/icon-font 文件夾下
2. 在main.js中引入 iconfont.js

import './assets/icon-font/iconfont.js'

3. 在組件中使用
   容器：<svg class="icon svg-icon" aria-hidden="true"><use xlink:href=""></use></svg>
   類名： #icon-kaishi (直接拷貝demo中，F(xiàn)ont class下的對(duì)應(yīng)圖標(biāo)下的類名即可)

<svg class="icon svg-icon" aria-hidden="true">
     <use xlink:href="#icon-kaishi"></use>
</svg>

此類圖標(biāo)相當(dāng)于圖片，添加一個(gè)class，通過 width和height控制圖標(biāo)大小，可以通過fill設(shè)置圖標(biāo)顏色等

<template>
  <div>
     <svg class="icon svg-icon svgkaishi" aria-hidden="true">
        <use xlink:href="#icon-kaishi"></use>
      </svg>
  </div>
</template>
<style lang="less">
.svgkaishi {
  width: 32px;
  height: 32px;
  fill: pink;
}
</style>