如何使用 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 代码并将其放入此站点并获取 SVG 代码的 jsx 格式。

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

演示

Answer 2

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