React使用iconfont圖標下載到本地symbol引用

官方教程如是：

symbol引用

這是一種全新的使用方式，應該說這才是未來的主流，也是平台目前推薦的用法。相關介紹可以參考這篇文章 這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：

支持多色圖標了，不再受單色限制。
通過一些技巧，支持像字體那樣，通過font-size,color來調整樣式。
兼容性較差，支持 ie9+,及現代瀏覽器。
瀏覽器渲染svg的性能一般，還不如png。

使用步驟如下：
第一步：拷貝項目下面生成的symbol代碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用css代碼（引入一次就行）：

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

第三步：挑選相應圖標並獲取類名，應用於頁面：

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

react使用注意事項：

在線使用方法：

1.復制js路徑代碼在public->index.html中直接引用

<script src="//at.alicdn.com/t/font_1884762_m1mpsrii2nm.js"></script>

2.正常引用css樣式

.icon {
       width: 1em; height: 1em;//可以調圖標大小
       vertical-align: -0.15em;//垂直外邊距
       fill: currentColor;//填充顏色
       overflow: hidden;//超出部分隱藏
    }

3.相應位置使用svg標簽

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

離線使用方法：

1.下載之后將iconfont文件放到src里面的單獨目錄里面，要引用圖標的js文件記得導入iconfont.css文件

2.iconfont.js文件單獨放到public文件夾，放src里不認識他，然后在index.html中添加引用。

<script src="./iconfont.js"></script>

3.使用標簽時和在線使用方法一樣