I'm rendering 5 columns from a single parent component and they all have different icons. How do i conditionally render them in react?

Question

I've made a parent component and will be reusing the component times. So, I have 5 different icons in them and they all are taken from hero icons. i've made an object having different ids for each child component but don't know how to render the icons. The icons seem to have rather large syntax and are HTML only. Is is possible to put them inside object and call them as properties? The svg tag is where the icons are supposed to be fit in. This is one of them.

  <div className="flex flex-col bg-stone-100">
          <div className="flex flex-row flex-shrink-0 flex-grow-0 relative mt-2 mr-7 mb-7 ml-4">
            <span className="h-1 w-1 mr-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                height={18}
                width={18}
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
                />
              </svg>
            </span>

Answer 1

Good idea would be to create component for this purpose - it will make your code cleaner. You could create something like this:

const SvgIcon = ({ width, height, iconUrl, iconFill }) => (
  <span className="h-1 w-1 mr-4">
    <svg
      xmlns={iconUrl}
      fill={iconFill}
      viewBox="0 0 24 24"
      stroke-width="1.5"
      stroke="currentColor"
      height={width}
      width={height}
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
      />
    </svg>
  </span>
);

export default SvgIcon;

Of course you can adapt the props to match your needs. After that you could just call SvgIcon wherever you need:

  <SvgIcon
    width={18}
    height={18}
    iconFill="none"
    iconUrl="http://www.w3.org/2000/svg"
  />

Answer 2

This MDN user guide may be of some use. NOTE : not a one-line solution, but fewer than you had: :)