0
165
Views`<path>` being surrounded with quotes when sending to `<SvgIcon>`, causing SVG to not render
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?
·
Juan Pablo Isaza
1 answers
Answer question0
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>
)
}
·
Juan Pablo Isaza
Report
Answer question