¿Es posible configurar mi color primario dinámico de ReactJS en una clase específica del SVG? Si es así, ¿cómo lo implemento?
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>Aplicación.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;Puede usar una herramienta como SVGR para convertir el SVG en un componente React. Luego, puede pasar su color dinámico como accesorio a su componente SVG y asignarlo al atributo de fill en cualquier elemento SVG que desee.
Dependiendo de las condiciones deseadas para cambiar su color, su solución final puede diferir. Sin embargo, el ejemplo de trabajo a continuación es una versión simplificada del código de muestra que proporcionó.
Puede usar el botón Volver a renderizar en este ejemplo para ver el efecto en acción. Activa un controlador onClick que establece el estado ( primary ) con un color aleatorio. Incluimos primary en la matriz de dependencias en useEffect para que realice una nueva representación cada vez que se actualice nuestro estado.
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;