webpack + antd 图标本地化与扩展图标

最近用react做了些前端的工作，踩了一些坑，打算慢慢总结写出来。
代码存在 GitHub - zhanghongnian/my-workspace-ui ，可以参考一下。
PS：本人小白，以下观点都是个人主观看法，有错误请指出。

问题描述：

1. Antd 的 Icon 控件默认使用 cdn 上的，内网使用的时候不方便。
2. 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），本人孤独者患者，求搭理。。。