Ant Design離線使用Icon圖標資源

 

使用環境：開發環境內網 node + React + antd   

第一種方法：[推薦]

 

 

第一種方法[原創]：

想在網上找到的第二種方法，試驗一下能夠。可是我不想 失去按需加在css的功能，因此本身查看antd模塊源碼，終於被我找到 定義 字體和圖表文件請求路徑的位置。只須要替換 該路徑爲本身內網可訪問的路徑便可。我是放在本項目的主目錄新建font目錄下。

首先，把官網下載的字體文檔 壓縮包解壓，裏面demo** 的文件不須要，是個例子。

將其他的 iconfont開頭的6個文件複製到本身項目下（可隨意位置，和後面請求對應便可）

而後，到安裝的.node_modules\antd\lib\style\themes目錄下 default.less 文件，修改請求路徑 大約在62行：個人修改成 

1.  
   // ICONFONT
2.  
   @ iconfont-css-prefix : anticon;
3.  
   @ icon-url : "http://localhost:8080/monitor/font/iconfont";

http://localhost:8082/ds_monitor/訪問項目的主目錄

font 本身定義的存放字體圖標的文件

iconfont 文件名稱，其餘代碼會添加不一樣後綴獲取不一樣文件

完成。

 

注意：個人antd使用的是默認主題，因此是default.less文件，若是你的 修改過antd的主題，則須要修改對應主題的less

-----------------------上面是一種方法-------------------------

 

 

第一種方法：網上找到的方法（可用，但感受關閉按需加在不是最有解決辦法）

講你下載下來的官方提供的字體庫解壓後全部文件複製到node-默讀les/antd/dist目錄下 

建立新的文件夾iconfont

 

在你項目生成的css入口文件對應的源碼less文件開始添加以下兩句話

個人是app.less [順序重要]

1.  
   @ import "~antd/dist/andt.less";
2.  
   @ icon-url: '~antd/dist/iconfont/iconfont';

第二句是引入你本身下載的本地 字體和圖標庫。

 

此時編譯後 訪問 ，本地添加的字體圖表庫已經能夠顯示。可是原來模塊發送的字體請求 仍是抱錯。

此時至關於你本身下載一個字體庫，antd默認下載一個字體庫（內網下載不成功）全部 重複下載。

 

解決辦法：將bable-plugin-import插件的 按需引入css；樣式功能關閉

找到開發項目主目錄下的.babelrc 這是配置bable的文件，修改成style：false

1.  
   <span style= "">{
2.  
   "plugins": [["import", {
3.  
   "libraryName": "antd",
4.  
   "style": false
5.  
   }]],
6.  
   "presets": [
7.  
   [ "es2015", "react"]
8.  
   ]
9.  
   }</span>

第二種結束。

 

 

 

第三種方法：沒有成功[可省略節省時間]

25 MAY 2017 on React, Ant-Design  http://www.imshuai.com/ant-design-offline-icon/

最近在使用React實現公司一套系統的前端。控件庫，看中了螞蟻金服的Ant Design。

腳手架使用的是React官方的create-react-app，建立完成後，引入了Ant Design。在我本身的筆記本調試的都很好，但放到公司的開發機器上，發現圖標資源都沒法加載。立刻看了一下瀏覽器的資源請求狀況，果真，Ant Design默認使用的是阿里的CDN。

公司是內網環境，顯然是行不通的。官方文檔果真給出了本地部署的提示。

研究了一番，發現主要是要覆蓋@icon-url這個less變量，因此就要開啓less支持。幸虧官方在自定義主題一節，已經給出了create-react-app中如何實現主題less變量的覆蓋；同理，在modifyVar節點增長@icon-url的覆蓋，以下：

1.  
   modifyVars: {
2.  
   // 修改總體主題顏色
3.  
   // "@primary-color": "#1DA57A",
4.  
   // 修改圖標庫爲本地離線，而不是阿里雲CDN上的圖標資源
5.  
   "@icon-url": '"/iconfont/iconfont"' },

而後在/public目錄增長iconfront目錄，並將下載好的Web Font文件放到這個目錄便可。 不過仍是有幾個細節要注意：

1. 要同時修改webpack.config.dev.js和webpack.config.prd.js，保證測試環境和生產環境都生效。
2. iconfront文件夾要放在/public目錄，而不是/src目錄。雖然調試環境二者都能生效，但生產環境後者是不生效的。
3. @icon-url的值裏面有雙引號。http://www.imshuai.com/ant-design-offline-icon/