How to append custom classNames to SVG components with svgProps.className specified?

[SevenOutman]

Hi, I'm using SVGR in my webpack project with the following config:

{
  icon: true,
  svgProps: {
    fill: 'currentColor',
    className: 'rs-icon',
  },
}

Note that I add an .rs-icon class to the SVG component because I have some global styles applied on that class.

When I use those SVG components and need to add some more classNames, the .rs-icon className gets overridden.

<StarIcon className="mr-1" /> // -> results in class="mr-1" instead of class="rs-icon mr-1"

So I'm wondering how I can append custom classNames to these SVG components while having this common .rs-icon className on all of them?

[jamonserrano]

{
  expandProps: 'start' // (1)
  svgProps: {
    className: `{props.className ? props.className + ' rs-icon' : 'rs-icon'}`, // (2)
  },
}

(1) prevents external props from overriding the ones set in svgProps.
(2) appends the class name to the ones passed in.

[SevenOutman]

It works! Thanks!

[vincerubinetti]

I had a similar issue here. For a long time I was playing around with custom templates and inspecting the AST structure and reading about Babel transforms... until I found this discussion.

I now see that there are notes in the docs here...

You can specify dynamic property using curly braces: { '#000': "{props.color}" } or --replace-attr-values #000={props.color}. It is particularly useful with a custom template.

You can specify dynamic property using curly braces: { focusable: "{true}" } or --svg-props focusable={true}. It is particularly useful with a custom template.

...and I had seen them before, but I think it's a little hard to understand what they mean. I would suggest the following rewrite:

The value you provide here gets inserted as the attribute value in the resulting component JSX, verbatim after the =. For example, { focusable: "{true}" } becomes focusable={true}. You can also access the component's passed/in-situ props this way to dynamically set a value. For example, to add a CSS class to every imported icon but preserve any passed class, you could do { className: "{props.className ? props.className + ' icon' : 'icon'} and set expandProps to "start".

To be honest, I feel like this is such a common need that this deserves its own heading section or FAQ page or something, not just a yellow note.