1.網址：https://www.iconfont.cn/
2.手動創(chuàng)建自己的項目圖標庫
選中圖標 → 添加入庫（點擊購物車）→ 完成后點擊上方菜單欄的購物車
→ 添加至項目（沒有則新建項目）→ 自動打開項目圖標庫 → 點擊下載至本地
→ 點擊demo包的demo_index.html，上面有三種使用方式，分別是Unicode、Font class、Symbol（這個本地demo包很關鍵需保留，使用時打開demo_index.html）

3.在vue項目中使用

3.1Unicode 的方式使用圖標

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.在組件中使用
容器：
編碼： & #xe600; (直接拷貝demo中，Unicode下的對應圖標下的圖標碼即可)

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

此類圖標相當于字體，常添加新class，通過 font-size控制圖標大小，可以設置color等

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

3.2Font 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.在組件中使用
容器：
類名： icon-kaishi (直接拷貝demo中，Font class下的對應圖標下的類名即可)

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

此類圖標相當于字體，常使用最后一個class，通過 font-size控制圖標大小，可以設置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.3Symbol 的方式渲染圖標

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

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

3.在組件中使用
容器：
類名： #icon-kaishi (直接拷貝demo中，Font class下的對應圖標下的類名即可)

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

此類圖標相當于圖片，添加一個class，通過 width和height控制圖標大小，可以通過fill設置圖標顏色等文章來源地址http://www.zghlxwxcb.cn/news/detail-610938.html

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

到了這里，關于vue 項目中使用阿里巴巴矢量圖標庫的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！