?

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

第一種方法：[推薦]

第一種方法[原創]： 想在網上找到的第二種方法，試驗一下可以。但是我不想 失去按需加在css的功能，所以自己查看antd模塊源碼，終于被我找到 定義 字體和圖表文件請求路徑的位置。只需要替換 該路徑為自己內網可訪問的路徑即可。我是放在本項目的主目錄新建font目錄下。 首先，把官網下載的字體文檔 壓縮包解壓，里面demo** 的文件不需要，是個例子。 將其余的?iconfont開頭的6個文件復制到自己項目下（可隨意位置，和后面請求對應即可） 然后，到安裝的.node_modules\antd\lib\style\themes目錄下?default.less 文件，修改請求路徑 大約在62行：我的修改為?

// ICONFONT

@iconfont-css-prefix : anticon;

@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 [順序重要]

@import "~antd/dist/andt.less";

@icon-url: '~antd/dist/iconfont/iconfont';

第二句是引入你自己下載的本地 字體和圖標庫。 此時編譯后 訪問 ，本地添加的字體圖表庫已經可以顯示。但是原來模塊發送的字體請求 還是抱錯。 此時相當于你自己下載一個字體庫，antd默認下載一個字體庫（內網下載不成功）所有 重復下載。 解決辦法：將bable-plugin-import插件的 按需引入css；樣式功能關閉 找到開發項目主目錄下的.babelrc 這是配置bable的文件，修改為style：false

<span style="">{

"plugins": [["import", {

"libraryName": "antd",

"style": false

}]],

"presets": [

["es2015", "react"]

]

}</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的覆蓋，如下：

modifyVars: {

// 修改整體主題顏色

// "@primary-color": "#1DA57A",

// 修改圖標庫為本地離線，而不是阿里云CDN上的圖標資源

"@icon-url": '"/iconfont/iconfont"' },

然后在/public目錄增加iconfront目錄，并將下載好的Web Font文件放到這個目錄即可。 不過還是有幾個細節要注意：

要同時修改webpack.config.dev.js和webpack.config.prd.js，保證測試環境和生產環境都生效。

iconfront文件夾要放在/public目錄，而不是/src目錄。雖然調試環境兩者都能生效，但生產環境后者是不生效的。

@icon-url的值里面有雙引號。


http://www.imshuai.com/ant-design-offline-icon/

轉載于:https://www.cnblogs.com/keepLeung/p/9596829.html

總結

以上是生活随笔為你收集整理的Ant Design离线使用Icon图标资源的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。