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

Answer 1

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