将 SVG 嵌入 ReactJS

2016-05-27 更新

从 React v15 开始，React 中对 SVG 的支持（接近？）与当前浏览器对 SVG (source) 的支持 100% 相同。您只需要应用一些语法转换以使其与 JSX 兼容，like you already have to do for HTML (class → className, style="color: purple" → style={{color: 'purple'}})。对于任何命名空间（冒号分隔）的属性，例如 xlink:href，删除 : 并将属性的第二部分大写，例如 xlinkHref。下面是一个带有 <defs>、<use> 和内联样式的 svg 示例：

function SvgWithXlink (props) {
    return (
        <svg
            width="100%"
            height="100%"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
        >
            <style>
                { `.classA { fill:${props.fill} }` }
            </style>
            <defs>
                <g id="Port">
                    <circle style={{fill:'inherit'}} r="10"/>
                </g>
            </defs>

            <text y="15">black</text>
            <use x="70" y="10" xlinkHref="#Port" />
            <text y="35">{ props.fill }</text>
            <use x="70" y="30" xlinkHref="#Port" className="classA"/>
            <text y="55">blue</text>
            <use x="0" y="50" xlinkHref="#Port" style={{fill:'blue'}}/>
        </svg>
    );
}

Working codepen demo

有关特定支持的更多详细信息，请查看文档的 list of supported SVG attributes。这是（现已关闭）GitHub issue，它跟踪对命名空间 SVG 属性的支持。

上一个答案

您可以进行简单的 SVG 嵌入，而无需使用 dangerouslySetInnerHTML，只需剥离命名空间属性即可。例如，这有效：

        render: function() {
            return (
                <svg viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50"/>
                </svg>
            );
        }

此时您可以考虑添加诸如 fill 之类的属性，或者任何其他可能有用的配置。

---

如果您只想包含一个静态 svg 字符串，则可以使用 dangerouslySetInnerHTML：

render: function() {
    return <span dangerouslySetInnerHTML={{__html: "<svg>...</svg>"}} />;
}

React 将直接包含标记而不对其进行处理。

---

According to a react developer，您不需要命名空间 xmlns。如果您需要属性 xlink:href，您可以使用 react 0.14 中的 xlinkHref

例子

Icon = (props) => {
  return <svg className="icon">
    <use xlinkHref={ '#' + props.name }></use>
  </svg>;
}

---

如果您想从文件中加载它，您可以尝试使用 React-inlinesvg - 这非常简单直接。

import SVG from 'react-inlinesvg';

<SVG
  src="/path/to/myfile.svg"
  preloader={<Loader />}
  onLoad={(src) => {
    myOnLoadHandler(src);
  }}
>
  Here's some optional content for browsers that don't support XHR or inline
  SVGs. You can use other React components here too. Here, I'll show you.
  <img src="/path/to/myfile.png" />
</SVG>

---

您可以导入 svg 并像图像一样使用它

import chatSVG from '../assets/images/undraw_typing_jie3.svg'

并将其放在 img 标签中

<img src={chatSVG} className='iconChat' alt="Icon chat"/>

---

我找到的最好的方法是这个网站

https://react-svgr.com/playground/

您复制一个 svg，它会为您提供一个反应功能组件，并将 svg 转换为反应代码。

---

有一个包可以为您转换它并将 svg 作为字符串返回以实现到您的 reactJS 文件中。

https://www.npmjs.com/package/convert-svg-react

---