“ being surrounded with quotes when sending to “, 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?

Answer

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