Why do you use $$props.color? Isn't simply color the same? Maybe I'm missing something here

I'd also appreciate an explanation about className, it just reminds me of react xd

I'd also appreciate an explanation about className, it just reminds me of react xd

It's just how the icon pack declares it ahah, otherwise I get a class does not exist in type error.
Just tried it myself, I think class is a reserved word

Why do you use $$props.color? Isn't simply color the same? Maybe I'm missing something here

Yup! Will change it. Also thinking of instead of this line simply adding a className property, for when the color trying to be used is not recognized by the color property (eg. custom names, different opacity notation). This way the color wouldn't have to be something like fill-rose-950 and could actually just be a hex or color xd. What do you think?

@MRita443 I think className is specific to the Icon library we use. I prefer to use $$props.class and map it to className in Icon.svelte, so we have the same syntax for every component. But I'm willing to hear more opinions

I didn't know restProps, what it the goal here? I searched a little bit and it doesn't seem to be recommended sveltejs/svelte#8249

My goal here was to make the component reusable in different scenarios, but maintain the same icon placement. For that I had to have these specific classes, but still wanted to allow for more customization, hence the $$props.class. The $$restProps was to collect all the other attributes like names, placeholders, values etc. I decided to use this because inputs have lots of possible attributes, but I guess I could try to make the most common ones into optional properties maybe?

After searching a bit more about restProps, I believe this implementation is appropriate. Svelte has since updates the docs on this:

$$props references all props that are passed to a component, including ones that are not declared with export. Using $$props will not perform as well as references to a specific prop because changes to any prop will cause Svelte to recheck all usages of $$props. But it can be useful in some cases – for example, when you don't know at compile time what props might be passed to a component.

<Widget {...$$props} />

$$restProps contains only the props which are not declared with export. It can be used to pass down other unknown attributes to an element in a component. It shares the same performance characteristics compared to specific property access as $$props.

<input {...$$restProps} />

This means that specific prop access could be slower (such as $$props.class). I found an alternative but I don't find it visually appealing. Let me know what you think:

export {_class as class};
let _class = "";

<input {type} {...$$restProps} class="{_class}" />

It'd be nice to test the visibility input