Dhis2/ui-icons accepted props

[simonadomnisoru]

Hello,
Currently, the only accepted prop by dhis2/ui-icons is colour. I was curious to know the reason behind this architectural decision. Do you think is useful to allow other props like classname for example?

Thank you!

[ismay]

Hi @simonadomnisoru,

The reason was mostly that that was the only prop we had a usecase for at the time (setting a color). And we figured that if other usecases pop up we could address them at that time. So if there's anything that you feel should be possible with the icons, but isn't, then please let us know!

[simonadomnisoru]

I want to migrate the material-UI icons to DHIS2-UI icons. The feature that I am currently missing is being able to play with the SVG size. This is done in material-ui with the help of the prop fontSize. Do you plan to support a similar functionality for the DHIS-UI icons?
Thanks!

[ismay]

Ah I see. So we have a mechanism for choosing different sizes, see here: https://github.com/dhis2/ui/#dhis2ui-icons. For our icon components we transform the svg's in this folder: https://github.com/dhis2/ui/tree/master/packages/icons/src/svg.

As you can see in that folder, most icons are available in 16 x 16px, and 24 x 24px (denoted by the -16 or -24 suffix). So if you'd want say, the 16 x 16 warning icon, you'd import IconWarning16, and of course IconWarning24 for the 24px version. So the sizes are fixed.

The reason for that is that Joe has created the icons with different levels of detail (so a 16px icon has less detail than a 24px icon). That way we can make sure they look good at the size they're rendered at. So there's no single icon with a size prop, but instead there's separate icons per size, and the size is fixed.

Have you spoken to Joe about importing the material-ui icons to @dhis2/ui? He's off at the moment, but he'll know more about this than I do. He should be able to help with this when he's back.

Let me know if this helps. Feel free to ask further questions if anything's unclear btw. (I won't know everything that Joe does about the goals for the icons lib though).

[simonadomnisoru]

Thank you for the detailed explanation. It was really helpfull. I will continue the conversation with Joe once he is back.

[ismay]

Sure thing! Let me know if anything else comes up 👍!