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/