Using Icons in React

Question

I have the icons below as following

import GandalfIcon from "../../assets/gandalf.svg";
import TreasureMapIcon from "../../assets/treasuremap.svg";
import BookIcon from "../../assets/book.svg";
import AcademyIcon from "../../assets/academy.svg";

I also have the same names (GandalfIcon, TreasureMapIcon...) in a JSON file. What I want to do is when I get that string "GandalfIcon" from the JSON, I want to display the actual GandalfIcon on the page. I am using map() so guess I cannot hardcode them, and using {} does not work. Any suggestions?

So to clarify, this does not work:

{event.icons.map((icon) => {
    const url = icon;
    return <img src={url} />;
})}

Answer 1

Try this approach,

import React from "react";
import "./styles.css";
import GandalfIcon from "../public/image-1.png";
import TreasureMapIcon from "../public/image-2.png";
import BookIcon from "../public/image-1.png";
import AcademyIcon from "../public/image-2.png";

const imageArray = [
  { GandalfIcon },
  { TreasureMapIcon },
  { BookIcon },
  { AcademyIcon }
];
export default function App() {
  const event = {
    icons: ["GandalfIcon", "TreasureMapIcon", "BookIcon", "AcademyIcon"]
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {event.icons.map((icon) => {
        const url = imageArray.find((img) => img[icon])[icon];
        return <img src={url} alt="" />;
      })}
    </div>
  );
}

Hope this is the use case you are looking for.

Sample code - https://codesandbox.io/s/fervent-goldberg-qlz1f?file=/src/App.js:0-713