How to append custom classNames to SVG components with svgProps.className specified?
#770
-
|
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 When I use those SVG components and need to add some more classNames, the <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 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
{
expandProps: 'start' // (1)
svgProps: {
className: `{props.className ? props.className + ' rs-icon' : 'rs-icon'}`, // (2)
},
}(1) prevents external props from overriding the ones set in |
Beta Was this translation helpful? Give feedback.
-
|
It works! Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
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...
...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:
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. |
Beta Was this translation helpful? Give feedback.
(1) prevents external props from overriding the ones set in
svgProps.(2) appends the class name to the ones passed in.