Search code examples
javascriptsvgmaterial-uistorybook

`<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.

enter image description here

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?

Solution

  • 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>
  )
}