Appends `prefix__` to `className` while converting to React

I tried converting:

<svg class="w-32 h-32 text-blue-500" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="a">
        <stop offset="0%" stop-color="currentColor" />
        <stop stop-opacity="0" offset="100%" stop-color="white" />
      </linearGradient>
    </defs>
    <circle stroke="currentColor" fill="url(#a)" cx="8.5" cy="8.5" r="6" fill-rule="evenodd" fill-opacity=".8" />
</svg>

It gave me:

import * as React from "react"

function SvgComponent() {
  return (
    <svg
      className="prefix__w-32 prefix__h-32 prefix__text-blue-500"
      viewBox="0 0 17 17"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient x1="50%" y1="92.034%" x2="50%" y2="7.2%" id="prefix__a">
          <stop offset="0%" stopColor="currentColor" />
          <stop stopOpacity={0} offset="100%" stopColor="#fff" />
        </linearGradient>
      </defs>
      <circle
        stroke="currentColor"
        fill="url(#prefix__a)"
        cx={8.5}
        cy={8.5}
        r={6}
        fillRule="evenodd"
        fillOpacity={0.8}
      />
    </svg>
  )
}

export default SvgComponent

Take a look at the prefix__. I don’t see any option to remove it as well. Is this a bug?

[polarathene]

You would think that since there’s no mention of it being enabled in the SVGR documentation, while SVGO docs explicitly mention it as disabled by default…

This is what SVGR is doing internally with their SVGO plugin:

https://github.com/gregberge/svgr/blob/fbb4ee5014549737d4c637bfac0f7c73193edea7/packages/plugin-svgo/src/config.js#L7-L15

Which is then merged with two other possible configs from the user, so you need to keep those two plugins in mind if you want to override them:

https://github.com/gregberge/svgr/blob/fbb4ee5014549737d4c637bfac0f7c73193edea7/packages/plugin-svgo/src/index.js#L87-L95

Note that removeViewBox: false says not to remove the viewBox attribute if the config for removing dimensions is set to false… however removeDimensions (that would remove the width and height attributes is not enabled by default AFAIK, and for that to work you must also disable the default removeViewBox option. I haven’t yet verified that with svgr, but that appears to be a bug.

---

This base config option for prefixIds was added in Nov 2018 for resolving this issue regarding styling concerns.

The prefix feature was added to SVGO in 2017. There’s a related plugin cleanupIDs which is enabled by default that produces the minified ID which was the main concern from the SVGR PR to enable the prefixIds plugin. That can be configured to instead provide a more unique ID that’s not as long as a prefix may be, by having webpack generate a content hash.

That said, if your concern is with filesize, do look at the compressed size (eg gzip), as that concern may be optimized away in practice.

[deadcoder0904]

I think I resolved this one simply by removing prefix__.

It wasn’t much of an issue tbh. Just a tiny nitpick.