umijs / umi

A framework in react community ✨
https://umijs.org
MIT License
15.35k stars 2.65k forks source link

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

Closed mizi-lin closed 6 years ago

mizi-lin commented 6 years ago

因为对 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
            });

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

image

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

image

liran commented 6 years ago
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 commented 6 years ago

@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'));
    }
mahy50 commented 4 years ago

umi 3.0 参考 #4035