umirc 配置支持 ant-design Icon 自定义 svg 图标

Created on 13 Sep 2018 · 3Comments · Source: umijs/umi

因为对 chainWebpack 不是很熟悉；

const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule.test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
            .include
                .add('src')
                .end()
            .use('babel')
            .loader('babel-loader')
            .end()
            .use('svgr')
            .loader('@svgr/webpack')
            .options({
                babel: false,
                icon: true
            });

我做了如上的配置，是希望获得下面的效果

但是我这边获得还是 base64 的东西

Source

mizi-lin

Most helpful comment

urlLoaderExcludes: [/\.svg$/],
  chainWebpack(config) {
    config.module
      .rule('svg')
      .test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
      .use([
        {
          loader: 'babel-loader',
        },
        {
          loader: '@svgr/webpack',
          options: {
            babel: false,
            icon: true,
          },
        },
      ])
      .loader(require.resolve('@svgr/webpack'));
  },

liran on 13 Sep 2018

👍8 🎉2 😄2

All 3 comments

urlLoaderExcludes: [/\.svg$/],
  chainWebpack(config) {
    config.module
      .rule('svg')
      .test(/\.svg(\?v=\d+\.\d+\.\d+)?$/)
      .use([
        {
          loader: 'babel-loader',
        },
        {
          loader: '@svgr/webpack',
          options: {
            babel: false,
            icon: true,
          },
        },
      ])
      .loader(require.resolve('@svgr/webpack'));
  },

liran on 13 Sep 2018

👍8 🎉2 😄2

@RanQiwu 设置通过 3q

格式化下楼上的代码

urlLoaderExcludes: [/.svg$/],

    chainWebpack(config) {
        config.module
            .rule('svg')
            .test(/.svg(\?v=\d+.\d+.\d+)?$/)
            .use([
                {
                    loader: 'babel-loader'
                },
                {
                    loader: '@svgr/webpack',
                    options: {
                        babel: false,
                        icon: true
                    }
                }
            ])
            .loader(require.resolve('@svgr/webpack'));
    }

mizi-lin on 14 Sep 2018

umi 3.0 参考 #4035