Set React Color Value to Certain Parts of SVG-CodePudding

Is it possible to set my dynamic primary color from ReactJS unto a specific class of the SVG? If so, how do I implement it?

Error.svg

<!-- Generator: Adobe Illustrator 26.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    ....
    .st9{fill:#E0E0E0;}
    .st10{display:inline;}

    <!-- Primary -->
    .st11{fill:#CA0B00;} <--- Here is the color that I want to be able to change dynamically
    <!-- Primary -->

    .st12{opacity:0.9;fill:#FFFFFF;}
    .st13{fill:#263238;}
    ....
</style>
....
</svg>

App.js

import React, {useEffect, useState} from "react";
import Error from "./Error.svg";

const App = () => {
   const [primary, setPrimary] = useState("#FFFFFF");

   useEffect(() => {....},[]); <--- sets the color for the primary 

   return <img src={Error} />
}

export default App;

CodePudding user response：

You can use a tool like SVGR to convert the SVG into a React Component. Then you can pass your dynamic color in as a prop to your SVG component and assign it to the fill attribute on whatever SVG element you wish.

Depending on the desired conditions for changing your color, your final solution may differ. However, the working example below is a simplified version of the sample code you provided.

You can use the Re-render button in this example to see the effect in action. It triggers an onClick handler that sets the state - primary - with a random color. We include primary in the dependency array in useEffect so that it performs a re-render any time our state is updated.

import React, { useState, useEffect } from "react";

const SvgComponent = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" height={140} width={500}>
    <path className="my-target-class" fill={props.color} d="M0 0h300v100H0z" />
  </svg>
)

function App() {
  const colors = ["#7FFF00", "#ADFF2F", "#FF0000", "#00FF7F", "#00FF7F"];
  const [primary, setPrimary] = useState("#7FFF00");

  useEffect(() => {
    console.log("state changed");
    console.log("color is: ", primary);
  }, [primary]);

  const handleClick = () => {
    const color = colors[ Math.floor(Math.random() * colors.length) ];
    setPrimary(color);
  }

  return (
    <div>
      <button onClick={(handleClick)}>Re-render</button>
      <SvgComponent color={primary} />
    </div>
  );
}

export default App;