Using SVGs as React Components in a Map

Question

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

Answer 1

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} />
}

Answer 2

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

Answer 3

I (OP) ended up solving this by using this package NPM package https://www.npmjs.com/package/react-inlinesvg .

So instead of creating a map of ID --> React Component, I did a map of ID --> Image Source(string) and just used that image src url in the Inline SVG.

Here is the finished code of what I ended up doing

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