When attempting to use Material-UI's SvgIcon
component the <path>
is being surrounded by quotes, causing the SVG to not render.
I am working out of Storybook in an MDX file. To render the SVG I've tried a few methods, but they all result in the same output. The most straightforward of these attempts is:
import { accessibility1Icon } from '@cds/core/icon';
export const Template = (args) => {
return (
<SvgIcon {...args}>{accessibility1Icon[1].outline}</SvgIcon>
)
}
The reference going into <SvgIcon>
is indeed a path
. It does come out (as seen in the image above) but it is surrounded in quotes in the DOM.
What might I be missing that is causing these quotes, or what can be done to retype the reference so they don't appear?
CodePudding user response:
Because you cannot render a string
as JSX
,
You have to find a way to convert the string
to JSX
.
1- A solution using dangerouslySetInnerHTML
:
import { accessibility1Icon } from '@cds/core/icon';
export const Template = (args) => {
return (
<SvgIcon {...args}>
<g dangerouslySetInnerHTML={{ __html: accessibility1Icon[1].outline }} />
</SvgIcon>
)
}
2- A solution using html-react-parser
import { accessibility1Icon } from '@cds/core/icon';
import parse from 'html-react-parser';
export const Template = (args) => {
return (
<SvgIcon {...args}>
{parse(accessibility1Icon[1].outline)}
</SvgIcon>
)
}