Question

我需要渲染.svg文件。我不想使用dangerouslySetInnerHTML。如果我直接复制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文件以显示反应的帮助都很棒！

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属性时，只需创建一个Proxy元素并使用'select'prop（接受CSS选择器）。在Proxy上设置的所有道具都将被作为SVG元素的属性

React - 渲染导入的.svg文件

1 个答案: