關於antd的icon字體圖標的擴展

在作一個由dva+antd構成的前端項目的時候，在使用antd的Icon組件的時候，因爲其自帶的字體圖標沒法知足須要，因此要進行擴展。如今把擴展過程分爲幾個步驟：

1.須要在icon官方資源庫中創建一個本身項目的icon庫，用來存放須要擴展的字體圖標：

2.注意要編輯項目，爲了和antd配合使用，個人項目配置是這樣的：

這裏須要注意一下，這裏的一、2項的名稱配置，不是隨便配置的，由於要配置antd的Icon組件的使用，第一項必需要anticon。而後，這裏第二項，不一樣版本的antd可能會有差異，我這裏填的anticon是可使用。若是你填寫了anticon頁面上的圖標還不生效的話，能夠利用瀏覽器查看一下源代碼，對比一下，就知道這裏填什麼了，個人源碼是這樣的：(ps:有的須要填寫anticon-user之類的，我先前也是這樣配置的，結果下面的代碼中anticon會帶上anticon-user)

<span><i class="anticon anticon-message-back"></i></span>

3.icon官網中你本身項目中的圖標是能夠作一些簡單的配置的：

紅圈中的內功就是antd中的組件Icon中type屬性引用的圖標名稱。

4.搜索並添加好本身須要的圖標以後， 就能夠把項目中的圖標下載下來了：

5.下載解壓以後，會看見下載下來的東西有以下這些文件：

這些文件中，前面demo前綴的全部文件其實就是教程，你點擊打開以後，就是告訴你經過fontclass/symbol/unicode等三種方式使用iconfont。

5.我項目中是用的fontclass這種方式，對於dva+antd的項目，你須要作的事情很少，第一步先把下載下來的文件，除了demo的幾個文件，拷進項目中：

6.而後找一個地方定義一個less文件，我就是在src根目錄下定義的，如圖：

7.common.less定義的內容是這個樣子：

/* 引入 icon class 文件 */
@import  "/iconfont/iconfont.css";
/* 關於這個引用路徑，有一個坑，ant.design 我用的dva，默認資源路徑爲 /public 因此這個引用的實際目錄是  /public/fonts/iconfont/iconfont.css */

/* 設置使用字體的優先級 anticon-user 高 */
:global(.anticon) {  /* :global() 是爲了覆蓋全局class .anticon 的樣式 */
  &:before {
    font-family: "anticon", "anticon-user" !important;
    /* 默認樣式是這樣
        font-family: "anticon" !important;
    */
  }
}

8.最後只須要在一個地方引用這個less就能夠了，我是在index.js文件中導入這個樣式。理論上，無論在哪一個js中引用均可以，可是因爲項目的結構和加載的方式不同，建議從最上層的js中引入，防止有意外。

其餘的方面應該不用配置了，不出意外的話，應用就可使用額外的字體圖標了。

 

參考博客：https://www.jianshu.com/p/2934316a5899