React - 渲染导入的 .svg 文件

Question

我需要渲染 .svg 文件。我不想使用危险的SetInnerHTML。如果我直接复制 svg 内容并从组件渲染它，我能够成功渲染 svg。

但是，这不是很可重用。我不想从每个 .svg 文件中复制内容。我希望能够导入一个 svg 文件并将其传递到我的组件中，然后再渲染内容。

这是我到目前为止所做的，但它没有渲染我的 svg。

我创建了一个接受导入的 svg 文件的组件，如下所示：

import React from "react";

class SvgComponent extends React.Component {
  constructor(props) {
     super(props);
   }
  render() {  
    return (
     props.svg // this works if I copy my .svg contents here (<svg>....</svg>)
  );
 }
};

SvgComponent.propTypes = {
  svg: React.PropTypes.string.isRequired,
};

export default SvgComponent;

这是我使用该组件的方式：

import mySvg from './images/mySvg.svg';
const Icon = (props) => { 
  return (
    <svgComponent svg={mySvg} />
  );
};

Icon.propTypes = {
  icon: React.PropTypes.string.isRequired,
};

export default Icon;

这不起作用——它不会在网页上显示我的 svg，甚至不会在 dom 中显示。当我检查页面时，我看到的只是一个空的 svgComponent：

<svgComponent />

任何关于让 .svg 文件在 react 中显示的帮助都会很棒！

Answer 1

我创建了一个模块来解决这个问题。有了它，您可以加载 svg 并使用 JSX 操作其元素，而无需粘贴 svg 代码。

npm 包：https://www.npmjs.com/package/react-samy-svg

查看 Glitch 上的示例：https://fossil-transport.glitch.me

使用简单

<Samy path="path to your svg file">
     <Proxy select="#Star" fill="red"/>
 </Samy>

当您需要更改某些 SVG 属性时，只需创建一个代理元素并使用“选择”道具（接受 CSS 选择器）。 Proxy 上设置的所有 props 都将作为 SVG 元素的属性进行转发