Custom_Component reflex-simpleicons

[cllatser]

Hello, although the icons on lucide.dev are fantastic, I was missing SVGs of the main brands. So I found this fantastic website https://simpleicons.org/ where most of the icons of major brands are available in SVG format. There's a React module, and I've used it with "wrap" and it works perfectly. So I've decided to create a custom component, but I need help.

The little code that I've understood is in: https://github.com/cllatser/reflex-simpleicons

What I would like to know:

• The tag needs to start with "Si" + the brand name in uppercase. Example: tag="SiMicrosoft" And I want the user, when entering "microsoft", to convert it to the correct format.

[cllatser]

I update, I'm making progress. I have looked at how the Lucide icons are programmed and I think it will look good. Suggestions are accepted.

[Alek99]

This is great, and perfect for our new custom components!

[cllatser]

I have updated the custom component and the information in the github repository. If you want to try it, it is now available on Pypi. I hope you like it.

[picklelo]

Awesome, nice work!

[cllatser]

I wanted to create a dynamic demo website where the user enters a name in an input field and a logo is generated below it. I am currently testing it and I am unable to pass the "str" value to the simpleicons component. It passes the object instead and errors are thrown. Could someone guide me? Thank you very much.

import reflex as rx
from reflex_simpleicons import simpleicons


class DemoBrands(rx.State):
    name: str = "python"


def demo_brands() -> rx.Component:
    return rx.el.div(
        simpleicons("python"),
        simpleicons("python", color="#3776AB", size=24),
        simpleicons("python", color="red", size=48),
        simpleicons("python", color="#ECD53F", size=67),
        simpleicons("python", color="#5F259F", size=97),
        simpleicons(DemoBrands.name, color="#5F259F", size=97),
        class_name="demo-brands"
    )

AttributeError: Passing multiple children to Simpleicons component is not allowed: remove positional argument: () to fix

[picklelo]

I'm not sure if this would be possible, as it would require dynamically importing the icon component. Currently all the imports are required to be known at compile time.

The issue is this line in the wrapper:

if children:
            if len(children) == 1 and type(children[0]) == str:
                props["tag"] = children[0]
            else:
                raise AttributeError(
                    f"Passing multiple children to Simpleicons component is not allowed: remove positional "
                    f"argument: {children[1:]} to fix"
                )

When you do DemoBrands.name the type(children[0]) ends up being rx.Var which is why you hit that. You can try to add that into the check, but I don't think the render will work. The only way would be to up front import all the icons you want in your app, and then this would work.

[cllatser]

Now I understand perfectly. I'm learning a lot from you all. Thank you very much.