Using SVGs as React Components in a Map-CodePudding

Hey all I'm trying to figure out how to set/render SVGs as React components in a JavaScript Map. I'm wanting to do this because I'd like to be able to import the SVGs once but then be able to change the color of them throughout my application through their props i.e <Logo fill={color} />

I'm pretty new to React so please let me know what if there is a better way to tackle this than how I'm doing it. Thanks!

// 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">
    );
}

CodePudding user response：

I don't think you are using the right methods for the built in map.

LogoMap.set('1', Logo);

retrieving

LogoMap.get('1')

A more react-y way to do it would be creating a component that wraps the Map, so that you don't need to expose it. In the code that I write, I just use an object instead of the Map data structure


const icons = {
  "1": Logo1,
  ....
}
const MyIcon = props => {
  const icon = map.get(props.name) // or icons[props.name];

  return <icon fill={props.fill} {...props} />
}

CodePudding user response：

I would recommend using and literal object for this case, but that's not the problem here.

I recommend you save your "Logo" like this:

LogoMap("1", (props) => <Logo {...props}/>);

then

import { LogoMap } from "data/LogoMap";

function MyComponent() {
    const LogoOne = myMap.get("1")

    return 
        <LogoOne fill="blue">
    );
}

I think that should work! I hope i have been able to help you