使用 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}/>