Hola a todos, estoy tratando de descubrir cómo configurar/renderizar SVG como componentes de React en un mapa de JavaScript . Quiero hacer esto porque me gustaría poder importar los SVG una vez, pero luego poder cambiar el color de ellos en toda mi aplicación a través de sus accesorios, es decir, <Logo fill={color} />
Soy bastante nuevo en React, así que háganme saber si hay una mejor manera de abordar esto que cómo lo estoy haciendo. ¡Gracias!
// LogoMap.js import { ReactComponent as Logo } from "assets/MyLogo.svg"; const LogoMap = new Map(); LogoMap.set("1", Logo); // ... Setting more items export { LogoMap } import { LogoMap } from "data/LogoMap"; function MyComponent() { const Logo_One = LogoMap.get("1") return ( // How do I render Logo_One? Or what is a better way to go about this? // I've tried doing <Logo_One /> but I get the error: // "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." <Logo_One fill="blue"> ); }No creo que esté utilizando los métodos correctos para el mapa incorporado.
LogoMap.set('1', Logo);recuperando
LogoMap.get('1')Una forma más reactiva de hacerlo sería crear un componente que envuelva el Mapa, de modo que no necesite exponerlo. En el código que escribo, solo uso un objeto en lugar de la estructura de datos del mapa.
const icons = { "1": Logo1, .... } const MyIcon = props => { const icon = map.get(props.name) // or icons[props.name]; return <icon fill={props.fill} {...props} /> }Recomendaría usar un objeto literal para este caso, pero ese no es el problema aquí.
Te recomiendo que guardes tu "Logotipo" así:
LogoMap("1", (props) => <Logo {...props}/>);después
import { LogoMap } from "data/LogoMap"; function MyComponent() { const LogoOne = myMap.get("1") return <LogoOne fill="blue"> ); }¡Creo que eso debería funcionar! espero haberte podido ayudar
Yo (OP) terminé resolviendo esto usando este paquete NPM https://www.npmjs.com/package/react-inlinesvg .
Entonces, en lugar de crear un mapa de ID -> React Component, hice un mapa de ID -> Fuente de imagen (cadena) y simplemente usé esa URL de origen de imagen en el SVG en línea.
Aquí está el código terminado de lo que terminé haciendo.
// LogoMap.js import MyLogo from "assets/MyLogo.svg"; const LogoMap = new Map(); LogoMap.set("1", MyLogo); // ... Setting more items export { LogoMap } import { LogoMap } from "data/LogoMap"; function MyComponent() { const LogoOne = LogoMap.get("1") return ( <Svg src={LogoOne} fill="blue" /> ); }