Как я могу динамически заменить части файла .svg, используя JavaScript?

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 в своем проекте и вставить все свои файлы SVG с кодом формата jsx, как показано ниже:

// svg.js

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

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

Вы должны просто получить код SVG каждого SVG и вставить этот сайт и получите jsx-формат вашего SVG-кода.

Теперь вы можете изменять все SVG-реквизиты с помощью реакции.Например, код SVG может иметь несколько fill реквизитов, которые вы можете получить из него.

Демо