antd-iconfont

antd离线字体

要解决的问题

1. antd默认iconfont指向的是阿里在公网CDN上部署的url
2. 项目需要在本地进行部署，特别是打包在Electron中运行的时候，使用的是本地文件的访问方式，希望能离线使用

在create-react-app中的配置方法

1. 安装依赖

$ yarn add antd-iconfont
$ yarn add babel-plugin-import -D
$ yarn add less less-loader -D

1. 配置babel插件

// 注意style要设置成true，使用less而非css
{
  "babel": {
    "plugins": [
      [
        "import",
        [
          {
            "libraryName": "antd",
            "style": true
          }
        ]
      ]
    ]
  }
}

1. 配置webpack.xxx.config.js

// module => rules中增加项
// 通过修改modifyVars中的值修改默认antd.less的默认参数
{
  test: /\.less$/,
  use: [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: {
        importLoaders: 1,
      },
    },
    {
      loader: require.resolve('postcss-loader'),
      options: {
        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          autoprefixer({
            browsers: [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9', // React doesn't support IE8 anyway
            ],
            flexbox: 'no-2009',
          }),
        ],
      },
    },
    {
      loader: require.resolve('less-loader'),
      options: {
        modifyVars: {
          '@icon-url': '"~antd-iconfont/iconfont"',
        },
      },
    },
  ],
},

参考

• iconfont原始下载地址