使用 SVG 文件作为 React 组件

Question

我有这样的代码：

<img src={category.svg} alt={category.name} />

它可以工作，但作为图像不是 React 组件，我无法进行任何操作。 SVG URL 正在动态变化，我无法导入或转换它。你有什么想法吗？

Answer 1

像这样创建一个自定义反应组件Svg

import { memo } from "react";
import inlinesvg from "react-inlinesvg";

const Svg = memo(inlinesvg);

export default Svg;

现在，当您需要使用此组件时，使用特定的 .svg 文件，请像这样使用它：

import One from "resources/images/one.svg";
import Two from "resources/images/two.svg";
...
...

return  <Svg src={this.props.isOne ? One : Two}/>