How can I build a wrapped react component that

[drbrady8800]

Sorry, this shouldn't be listed as a poll but no other categories were available to choose. I am trying to build an icon component that takes a dynamic tag as the name of the icon and then renders that icon based on what is passed into it. You can do this in normal ready simply by importing the entire icon library and then indexing the tag you would like:

import * as tb from 'react-icons/tb';
const tag = "SomeTag";
const Icon = tb[tag];

This is what I have so far. The issue is that you can't pass a var as a tag, it needs to be a string

class ToolIcon(rx.Component):
	size: rx.Var[int | None]

	def add_imports(self):
		icon_library = self.tag.split(".")[0]
		return {f"react-icons/{icon_library}": [
			rx.ImportVar(
				install=False,
				# Hacky way around reflex to get the whole import in
				tag=f"* as {icon_library}",
				is_default=True,
			)
		]}

# Icon is of the form ${icon_library).${icon_name} e.g. "tb.TbBolt"
def tool_icon(icon: str, tool_size: int = 16) -> rx.Component:
	return ToolIcon(tag=icon, size=tool_size)

Is it possible at all to do this type of dynamic rendering in reflex (possibly using a StatefulComponent)? If not it would be a really nice feature to have.