`<path>` 发送到 `<SvgIcon>` 时被引号包围，导致 SVG 无法渲染

Question

当尝试使用 Material-UI 的 SvgIcon 组件时，<path> 被引号包围，导致 SVG 无法呈现。

我正在 MDX 文件中处理 Storybook。为了呈现 SVG，我尝试了几种方法，但它们都会产生相同的输出。这些尝试中最直接的是：

import { accessibility1Icon } from '@cds/core/icon';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>{accessibility1Icon[1].outline}</SvgIcon>
  )
}

进入 <SvgIcon> 的引用确实是 path。它确实出来了（如上图所示），但在 DOM.

中用引号括起来

我可能遗漏了什么导致这些引用，或者可以做些什么来重新输入引用以使它们不出现？

Answer 1

因为您无法将 string 渲染为 JSX,
您必须找到一种方法将 string 转换为 JSX.

1- 使用dangerouslySetInnerHTML的解决方案：

import { accessibility1Icon } from '@cds/core/icon';

export const Template = (args) => {
  return (
    <SvgIcon {...args}>
      <g dangerouslySetInnerHTML={{ __html: accessibility1Icon[1].outline }} />
    </SvgIcon>
  )
}

2- 使用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>
  )
}

`<path>` 发送到 `<SvgIcon>` 时被引号包围，导致 SVG 无法渲染

`<path>` being surrounded with quotes when sending to `<SvgIcon>`, causing SVG to not render

javascript

svg

material-ui

storybook