内网环境Ant Design使用离线Icon图标资源

2017-05-25

最近在使用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的值里面有双引号。

-------------------------

本文采用知识共享署名 4.0 国际许可协议（CC-BY 4.0）进行许可。转载请注明来源：https://imshuai.com/ant-design-offline-icon 欢迎指正或在下方评论。

毛帅

{Code, Thoughts, Sharing}