Dynamic Icon With Name Generated By Backend-Database

[yusrenaltair]

Thank you for this awesome icon package. I want to use icons dynamically for menu purposes that are generated from the database. I will import all the icons that will be used in the application. (approximately 50 icons) I wrote the code as follows:

//MyIcon.tsx
import { TbLockOpen, TbLock, TbExclamationCircle } from 'solid-icons/tb'
import { BiSolidChevronDown, BiSolidChevronUp } from 'solid-icons/bi'
import { Dynamic } from 'solid-js/web'

function Icon(props: any) {
  //set the icon
  const iconMaps: any = {
    default: () => <TbExclamationCircle size={props.size} color={props.color} />,
    tbExclamationCircle: () => <TbExclamationCircle size={props.size} color={props.color} />,
    tbLock: () => <TbLock size={props.size} color={props.color} />,
    tbLockOpen: () => <TbLockOpen color={props.color} />,
    biSolidChevronDown: () => <BiSolidChevronDown size={props.size} color={props.color} />,
    biSolidChevronUp: () => <BiSolidChevronUp size={props.size} color={props.color} />,
  }

  return <Dynamic component={iconMaps[props.name ? props.name : 'default']} />
}

export default Icon

then use it in the component

//parent component
import MyIcon from './MyIcon'
//...
<MyIcon name="biSolidChevronDown"/>

Is this method correct? not just "work" has anyone taken the same approach? Thanks in advance

Additional note: i came from vuejs. I have used the mdi-vue package which I think is good. Has anyone kindly made a package equivalent to that, using solid-icons for SolidJS? https://github.com/therufa/mdi-vue as an example

//mdi.ts
import {
    mdiViewDashboard,
    mdiThemeLightDark
} from "@mdi/js";

const iconList = {
    mdiViewDashboard,
    mdiThemeLightDark
}
export default iconList;

//main.ts
import { createApp } from 'vue'
import App from './App.vue'
import iconList from './mdi'
import mdiVue from 'mdi-vue/v3'
//...
const app = createApp(App)
app.use(mdiVue, { icons: iconList })

//in the components
<mdicon name="view-dashboard" />