How do I render 1 of 3 SVGs inside a component using conditions in React?

Question

Here is the code that I have now. I can't figure this out. Trying to render an SVG icon based on the prop. For example would render a house icon

import React from "react";


    function BuildingIcon() {
      return <img src="./building.svg" alt="building" />;
    }

    function HouseIcon() {
      return <img src="./house.svg" alt="house" />;
    }

    function LatlongIcon() {
      return <img src="./latlong.svg" alt="globe" />;
    }
    function Icon(props) {
      const iconStyle = props.iconStyle;
      switch (iconStyle) {
        case "building":
          return <BuildingIcon />;
        case "house":
          return <HouseIcon />;
        case "latlong":
          return <LatlongIcon />;
        default:
          return <HouseIcon />;
      }
    }

    export default Icon;

Answer 1

You could actually just import the images into your component, and them specifying them as the src value.

import logo from "./lat-long.png";

In addition, there is no need to go 2 levels deep when you destructure them.

In addition, you should check if iconStyle is properly passed down to your component, and that props.iconStyle is defined.

import React from "react";
import logo from "./lat-long.png";

function BuildingIcon() {
  return <img src={logo} alt="globe" />;
}

function HouseIcon() {
  return <img width="24px" src={logo}  alt="globe" />;
}

function LatlongIcon() {
  return <img src={logo}  alt="globe" />;
}

function Icon(props) {
  const { iconStyle } = props;
  switch (iconStyle) {
    case "building":
      return <BuildingIcon />;
    case "house":
      return <HouseIcon />;
    case "latlong":
      return <LatlongIcon />;
    default:
      return <HouseIcon />;
  }
}