dynamic import heroicons react components

Is there any way to make dynamic imports / usage of those react heroicon components?

Normal way: import {ChevronDownIcon} from "@heroicons/react/solid"; … JSX: <ChevronDownIcon/>

Desired: import {${myName}} from "@heroicons/react/solid";

Of course this doesn’t work but i just used it to express my goal. I know i could use a lib like react-svg and then do: <ReactSVG src="/images/icons/myName.svg" />

But then i would need to copy all those SVGs into a target folder but i am already using the react heroicons components elsewhere. Would like to stick only with the heroicons react lib.

[IT-MikeS]

This is how I did it, quick but it works for what I needed.

// DynamicHeroIcon.tsx
// Simple Dynamic HeroIcons Component for React (typescript / tsx)
// by: Mike Summerfeldt (IT-MikeS - https://github.com/IT-MikeS)

import { FC } from 'react'
import * as HIcons from '@heroicons/react/outline'

const DynamicHeroIcon: FC<{icon: string}> = (props) => {
  const {...icons} = HIcons
  // @ts-ignore
  const TheIcon: JSX.Element = icons[props.icon]

  return (
    <>
      {/* @ts-ignore */}
      <TheIcon className="h-6 w-6 text-white" aria-hidden="true" />
    </>
  )
}

export default DynamicHeroIcon

Usage:

<DynamicHeroIcon icon={'CogIcon'} />

[uvisgrinfelds]

I needed dynamic import for Vue. Perhaps someone finds this useful:

<template>
  <component v-if="isLoaded" :is="heroIcons[name]" />
</template>

<script>
import * as heroIcons from "@heroicons/vue/solid";

export default {
  data() {
    return {
      isLoaded: false,
      heroIcons: heroIcons
    };
  },
  props: {
    name: String,
  },
  mounted() {
    this.isLoaded = true;
  },
};
</script>