Rating: more icons types

[dbrrt]

Would it be possible to have more icons for the Rating component, for instance money for a budget rating?

[levithomason]

TL;DR - not readily available. It requires an update to the CSS and markup at https://github.com/Semantic-Org/Semantic-UI.

More Context

The CSS for the Rating icon is quite different than it is for regular Icons. This includes having multiple states and border colors. Also, there is predefined colors for each. The heart is red, the star is gold.

We may be able to pull this off by taking in a color name and an Icon name and generating the icons manually on our end. I would be interested in a PR exploring this idea. Would you like to contribute?

[dbrrt]

@levithomason Yes, I'd like to contribute to this feature !

[layershifter]

@dbrrt do you still have plans for this?

[dbrrt]

@layershifter I do, but I didn't find time to work on this feature until now, I'll have a look ASAP on it.

I don't get why in examples, when I replace heart per star, I don't get the yellow star. In RatingIcon component, how is decided that an icon will be the one passed as a Property, and the custom colors for these icons? I can't find the location of these definitions.

Any information will be appreciated :)

[levithomason]

They come from the CSS. Specifically, the ::before pseudo element sets the content directly to the unicode for the icon. Icons in SUI are font powered, this unicode value is the character value of the particular icon in the font set:

You can find unicode values for icon names by looking at the content value in the icon.css file.

Have a look at my previous comment in light of this one. This is why we may be able to pull this off but not for sure. Rating icon CSS is special cased for ratings. Regular icon CSS doesn't provide all the states needed.

[dbrrt]

Ok I got it, so to implement new rating icons, it has to be implemented on the SUI-CSS repo first...

[layershifter]

Closing until this will be not implimented in the main repo.