将SVG导入为反应组件

Question

我正在将svg导入到作为Component的react中，但它在css类周围有Style个标签，因此当我尝试导入它时会抛出错误，如果我删除了{{1}中的css }标签它加载svg但显然缺少额外的样式

如果可能的话，我想避免将所有样式移动到单独的.css文件中，如何将svg作为React中的组件导入但保留所有样式？

style

Answer 1

您可以导入样式表：

import './StoffFarbe.css';

CSS文件内部：

.StoffFarbe {
    // add styles
}

另一个选项是将svg用作图像：

<img src="StoffFarbe.svg" class="yourCSSClass">

来源：

• 4 ways to style react components
• Using CSS with SVG

Answer 2

如果您使用create-react-app 2.0，现在可以这样做：

import { ReactComponent as YourSvg } from './your-svg.svg';

<div>
   <YourSvg />
 </div>