Appends prefix__ to className while converting to React

[deadcoder0904]

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?

[open-collective-bot]

Hey @deadcoder0904 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[polarathene]

Those are tailwind classes in your SVG file? You can add them to the component directly when using it instead:

import ExampleSVG from 'example.svg'

// ...

<ExampleSVG className="h-24 max-w-full" />

That works fine. Is the prefix__ you're mentioning actually that, or is it similar to the filename? Ah, just tried the playground out, that adds prefix__ as it's not aware of a filename.

This is an SVGO plugin, but it's normally disabled by default, add {"prefixIds": false} into the SVGR playground to SVGO config for plugins, and you won't have that anymore.

[deadcoder0904]

@polarathene Shouldn't it be false by default?

[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:

svgr/packages/plugin-svgo/src/config.js

Lines 7 to 15 in fbb4ee5

	export function getBaseSvgoConfig(config) {
	const baseSvgoConfig = {
	plugins: [{ prefixIds: true }],
	}
	if (config.icon || config.dimensions === false) {
	baseSvgoConfig.plugins.push({ removeViewBox: false })
	}
	return baseSvgoConfig
	}

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:

svgr/packages/plugin-svgo/src/index.js

Lines 87 to 95 in fbb4ee5

	function createSvgo(config, rcConfig) {
	const baseSvgoConfig = getBaseSvgoConfig(config)
	const mergedConfig = mergeSvgoConfig(
	baseSvgoConfig,
	rcConfig,
	config.svgoConfig,
	)
	return new SVGO(mergedConfig)
	}

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.