最近用react做了些前端的工作，踩了一些坑，打算慢慢总结写出来。
代码存在 GitHub - zhanghongnian/my-workspace-ui ，可以参考一下。
PS：本人小白，以下观点都是个人主观看法，有错误请指出。
问题描述：
- Antd 的 Icon 控件默认使用 cdn 上的，内网使用的时候不方便。
- Icon 图标扩展，antd 默认的图标非常好看，但是数量不多，有必要找到一个扩展的方法。
antd 图标的本地化方案:
先下载字体文件存到项目中去，如下是我存储的位置。
image.png
然后在 webpack 里做如下设置，替换 icon-url 变量 (默认是 cdn 地址)。
{
test: /\.less$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'less-loader',
options: {
modifyVars: {
'@icon-url': '"/assets/fonts/antd/iconfont"',
},
},
},
]
},
请求时可看到字体文件是从本地加载的了。
image.png
问题2：扩展 antd 图标
需求：我想在边栏上加上 Echarts 的图标
image.png
第一步：扩展 字体文件 图标， 这里推荐一个良心神器 FontEditor ，免费的在线字体编辑软件，可加在各种字体文件，导入图片生成字体，并一键导出4种格式的字体文件以及 html 预览图，如下图所示，我新增的字体 ID 是 952，
image.png
然后在全局的 less 文件中增加如下样式
@iconfont-css-prefix : anticon;
.@{iconfont-css-prefix}-echarts:before { content: "\e952"; };
就可以在代码中使用了
<Icon type="echarts" />
结语
有问题可以联系我（qq 4503039449），本人孤独者患者，求搭理。。。
