babel-plugin-inline-react-svg

babel-plugin-inline-react-svg copied to clipboard

My issue is that we want to use this babel transform just for icons that we want to style - inline icons that should have the same color as surrounding text, etc.

On the other hand, we'd like to use webpack's url-loader to handle all larger "illustration" SVGs. We would rather put those in img tags and let them be cached by the browser and not have them in our javascript bundle.

To do so, an includePattern could be used that would only use this babel transform on (for example):

• *.icon.svg
• */icons/*.svg

Thoughts? I'm about to make a PR.

That seems like something that babel itself can handle in the config?

This is a nonissue if you do <img src={require(...)} /> because of t.isVariableDeclarator(path.parent) here.

I could close this @ljharb but would love to get some idea of how you mean to configure the babel config.

If you DID want to declare a variable and require a svg that you wanted to be handled by file-loader, how would you do it? Assuming my webpack already has a rule to watch for .svg and use file-loader. I was thinking this might work, but it doesn't:

{
  "plugins": [

  ],
  "overrides": [
    {
      "test": "*.icon.svg",
      "plugins": [
        "inline-react-svg"
      ]
    }
  ]
}

I'm not sure what you mean; you're saying if you inline the require, you bypass the plugin?

Exactly. But also out of pure curiosity I tried the overrides configuration in my babelrc but can't get it to work. Any ideas?

So, fwiw, #28 should have covered that - meaning, it's a bug that it's not transforming the inline require.

As for overrides; i'd jump into the babel slack and ask about it? If you can get that working, that'd be much more efficient than adding an option to this plugin.

Ok I've taken my overrides question to the babel slack group. Hopefully someone there can fill me in how this plugin gets applied even though webpack is only applied babel-loader to my .js files.

Meanwhile, I want to double check that you think an inline require should be transformed. How would that look in application?

@knoid I thought I'd cc you in regards to the inline require behavior.

Ok just discussed this in babel slack

The overrides in babel won't apply because I can't test on svg files. Babel is only applied to javascript files and it transforms the import Svg from './some.svg' in the JS file itself. So arguably, an option on the plugin like includePattern is the only way (that's the conclusion we came to in slack)??

Makes sense.

+1 I have a case where I want to have different svgo options based on a test pattern.

Hey Anyone working on this issue ? I am also facing similar issue wherein i want only specific set of svg's to be converted into ReactComponent . includeOptions would be great to have, in the meantime how can i ignore all paths , except certian folder with ignorePattern ? so that only required folder is included ?