vue element-ui配置第三方圖示庫
阿新 • • 發佈：2020-08-14
配置第三方圖示庫的相關（部落格）教程：
https://www.cnblogs.com/linyihai/p/10575668.html
https://www.cnblogs.com/ceceliahappycoding/p/10821966.html
製作svg圖示字型可以參考下面這些連線的內容：
https://www.zhihu.com/question/29054543
https://jingyan.baidu.com/article/066074d69e8d7182c31cb012.html
https://www.jianshu.com/p/7423b1db96a4
https://www.cnblogs.com/linyihai/p/10575668.html
（下面內容【連結一】來源：lyh225）
elementui框架自帶icon在開發大型前端應用時顯得捉襟見肘。淘寶開源的iconfront的圖示庫上有很多優秀的icon圖示。elementui支援整合iconfront到應用中，步驟如下：
- 首先需要在iconfront註冊登陸，新建專案，然後把心儀的icon新增到專案中。
) - 接下來有兩種做法，一種是線上連結，一種是下載解壓後拷貝到本地的專案。
- 線上連結方式如下
新建一個iconfont.css檔案，新增如下內容，el-icon-ali是第一步新建專案時給定的icon名字首。
[class^="el-icon-ali"], [class*="el-icon-ali"] 接下來將iconfront專案提供的線上連結新增到vue專案的index.html中
<!DOCTYPE html>
<html>
<head>
...
<link>
</html rel="stylesheet" 在vue專案中的main.js中import剛才建立的iconfront.css
import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)
新增新icon時，只要更新index.html中的連結即可
- 下載匯入方式
解壓下載出所有檔案，拷貝到vue適當目錄中，找到iconfront.css檔案，一樣新增如下內容
[class^="el-icon-ali"], [class*="el-icon-ali"]
{
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
接下來只要在vue專案中的main.js中import剛才建立的iconfront.css即可
import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/.../../iconfront.css'
Vue.use(ElementUI)