antd图标的本地化使用

antd图标的本地化使用

使用antd开发的前端，项目迁移到内网以后，antd图标失效。导致分页的"<"和">"、<Icon/>、<Avatar/> 等标签均失效

解决方法：

1. 下载iconfont，即antd的图标文件。链接：https://github.com/ant-design...
2. 我使用create-react-app建立的项目，npm run build 后生成indext.html、static文件夹（包含css、js）。
3. 在index.html的同级目录下保存下载的文件夹(iconfont)。
4. 默认情况下，用到icon时会到阿里的cdn去取，内网环境时取字体失败。
5. 修改npm run build 生成的js文件：用"/iconfont/iconfont"替换原始的"https://ali**"。

tips：

1. 通过chrome调试时发现，原始的请求iconfont的地址是：https://ali***.woff或者https://ali***.eot等地址
2. 替换时只需替换前边的部分，如"https://ali***.woff"替换为"/iconfont/iconfont.woff",所以实际替换时，只需替换："https://ali***"为"/iconfont/iconfont"。这2个iconfont，第一个表示是iconfont文件夹，第二个其实是文件名的一部分，因为下载下来的字体文件都默认命名为iconfont.***，如iconfont.woff、iconfont.eot等。
3. 以上只适合于不跨域的情况。

后记

其实关键的问题就是修改取字体的地址，网上有其他人使用修改webpack.config的方法，道理相同。只是本人太菜，没测试成功。这个方法只是权宜之计，要从根本解决，还是需参照其他攻略。