如何使用JavaScript动态替换.svg文件的一部分？

Question

我正在导入一个svg文件，以用作我项目中的图像。 svg文件中有一种颜色，我想更改为自己的颜色（此颜色无法提前知道）。我意识到getSourceCode和setSourceCode不是真正的方法，但是我用它们来希望演示我要完成的工作。

import React from "react";
import emptyOrderImage from "./images/illustrations/empty_order.svg";

function CurrentOrder(props) {
  // Trying to get svg source code as string
  let svgSourceCodeString = emptyOrderImage.getSourceCode();

  // Assume the new color was dynamically loaded
  const newColor = "#FAFAFA";

  // I am trying to replace all occurences of #FFA500 with the new color
  const newSourceCode = originalSourceCode.replace(/#FFA500/gi, newColor);

  // Now I need to set svg to new source code
  emptyOrderImage.setSourceCode(newSourceCode);

  return (
    <div style={{ flex: "display", justifyContent: "center" }}>
      <img src={emptyOrderImage} style={{ width: 200, height: 200 }} />
    </div>
  );
}

export default CurrentOrder;

Answer 1

您可以在项目中创建svg.js文件，并使用以下jsx格式代码插入所有SVG文件：

// svg.js

export const HomeSvgIcon = () => {/* svg code */}

export const MenuSvgIcon = () => {/* svg code */}

您应该只获取每个SVG的SVG代码，并放入this site中，并获取SVG代码的jsx格式。

现在您可以使用react修改所有SVG道具。例如，一个SVG代码可以具有多个fill道具，您可以从该道具中获取它。

演示

Answer 2

如果按照@MohammadReza Khedri的建议将SVG渲染为DOM，则可以使用CSS变量设置SVG的样式。