官網(wǎng)

一贴硫、手動創(chuàng)建自己的項目圖標庫

選中圖標 → 添加入庫（點擊購物車）→ 完成后點擊上方菜單欄的購物車
→ 添加至項目（沒有則新建項目）→ 自動打開項目圖標庫 → 點擊下載至本地
→ 點擊demo包的demo_index.html湖笨，上面有三種使用方式芭碍，分別是Unicode口叙、Font class、Symbol（這個本地demo包很關(guān)鍵需保留煎谍，使用時打開demo_index.html）

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

二孵稽、在vue項目中使用

1. Unicode 的方式使用圖標

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下的對應(yīng)圖標下的圖標碼即可)
   
   index.png

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

此類圖標相當于字體十偶，常添加新class菩鲜，通過 font-size控制圖標大小，可以設(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 的方式使用圖標

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下的對應(yīng)圖標下的類名即可)

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

此類圖標相當于字體接校，常使用最后一個class，通過 font-size控制圖標大小狮崩，可以設(shè)置color等
使用時在 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 的方式渲染圖標

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下的對應(yīng)圖標下的類名即可)

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

此類圖標相當于圖片，添加一個class睦柴，通過 width和height控制圖標大小诽凌，可以通過fill設(shè)置圖標顏色等

<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>