antd-mobile 引入自定义图标的 webpack 配置

关于自定义图标的 webpack 配置

默认的如果不对 svg 进行配置，引入的 svg 的大小和 颜色跟所在元素的 font-size、color 不一致。我们需要通过 svg.config.js 进行配置，使之大小和颜色与父级一致：

{
  addAttributesToSVGElement: {
    attributes: [
      'width="1em"',
      'height="1em"',
      'fill="currentColor"',
      'aria-hidden="true"'
    ]
  }
}

同时，通过配置 svg.config.js 还可以移除一些不必要的 svg 属性，达到减小 svg 大小的效果。

针对 antd-mobile + react webpack.config.js 修改的地方，oneOf 中添加 svg 处理模块

// 处理svg 精简 svg
// 添加 width="1em" height="1em" fill="currentColor"
{
  test: /\.svg$/,
  // fonts 图标不处理
  exclude: [/node_modules/, /fonts/],
  use: [
    { loader: require.resolve("babel-loader") },
    {
      loader: require.resolve("@svgr/webpack"),
      options: {
        babel: false
      }
    },
    // 使之可以获取 svg 的 url
    { loader: require.resolve("url-loader") }
  ]
},

注销 babel-loader 处理 js 的 plugins 参数

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: paths.appSrc,
  loader: require.resolve("babel-loader"),
  options: {
    customize: require.resolve(
      "babel-preset-react-app/webpack-overrides"
    ),

    // plugins: [
    //   [
    //     require.resolve("babel-plugin-named-asset-import"),
    //     {
    //       loaderMap: {
    //         svg: {
    //           ReactComponent: "@svgr/webpack?-svgo![path]"
    //         }
    //       }
    //     }
    //   ]
    // ],
    // This is a feature of `babel-loader` for webpack (not Babel itself).
    // It enables caching results in ./node_modules/.cache/babel-loader/
    // directory for faster rebuilds.
    cacheDirectory: true,
    cacheCompression: isEnvProduction,
    compact: isEnvProduction
  }
}