Changing loaders

[TimonVS]

This issue is a:

• Bug report
• Feature request
• Question / support request
• Other

I want to change the loaders used for SVG images. Basically I want to SVG's to be inlined, so that I can change the fill color etc.
Am I correct in assuming that it isn't possible right now?

module.exports = () => {
  return {
    type: 'react-app',
    webpack: {
      rules: {
        svg: {
          use: ['svg-inline-loader?classPrefix, image-webpack-loader'] // <-- this doesn't work
        }
      },
      extra: {
        resolve: {
          modules: [path.resolve(__dirname, 'src'), 'node_modules']
        },
        module: {
          rules: [
            {
              // This will add the rule as the last entry in the Webpack config, but doesn't do anything
              // It doesn't overwrite the current rule for svg :(
              test: /\.svg$/,
              use: ['svg-inline-loader?classPrefix, image-webpack-loader']
            }
          ]
        }
      }
    }
  }
}

[insin]

This isn't supported at the moment - adding support for replacing the default loader with your own loader or use config seems like a nice way to go, which should make your first attempt using webpack.rules.svg work.

---

Something else I've been keeping for when someone asks for config which can't be made declarative is passing the generated config to a function to allow you to manuallymake whichever changes you want. Combined with allowing default rules to be disabled by passing false, this would look like:

module.exports = {
  webpack: {
    rules: {
      svg: false
    },
    config(config) {
      config.module.rules.push({...})
    }
  }
}

[insin]

On second thoughts you might be able to override the loader config for the default .svg rule, but I'm not sure what Webpack will do with the default options configured for url-loader.

module.exports = {
  webpack: {
    rules: {
      svg: {
        loader: 'svg-inline-loader?classPrefix!image-webpack-loader'
      }
    }
  }
}

I'm still going to add support for replacing loader with your own loader (dropping the default options/using yours instead) or use config, though.

[TimonVS]

I tried that, but instead of overriding the loader it gets merged in the options.

[TimonVS]

Do you have a timeframe for when support will be added? I'm willing to help.

[insin]

That's a bug right there.

Quick workaround which will also work after I fix this - add an empty options object to your svg config. The code which moves top-level options into an options object for you (causing this bug, as it's not excluding loader) won't run then.

I have a bunch of free time coming up in about 7 hours, so will be able to tackle upgrading to use config then. I'm in the middle of a major refactor this might get in the way of, so looking to knock this change out quickly.

[mikkelwf]

Any eta on release..?

[insin]

The next release will be after #223 lands.

[mikkelwf]

Ok..

i'm struggling with getting svg's to load inline, it doesn't seem to work with the current setup..

[kabriel]

+1 I would also like to change the loader used for svg.

[ekwonye-richard]

I have a workaround which worked out for me. I included the loader inside my component.

<span dangerouslySetInnerHTML={{__html: require('!svg-inline-loader!./svg/icon.svg')}} />

[insin]

Fixed in v0.16