Adding Background Colors Border Radius

[ghost]

Is there an easy way to add a background color and/or border-radius to Grommet Icons. If so, can you please let me know how?

Thanks.

[ranjan-purbey]

No, you cannot do it with the existing code. However you can easily create a solid variant of an existing icon using the following steps:

1. In the node_modules/grommet-icons/icons folder, look for the icon whose solid variant you need. Let's assume that icon is CaretDown
2. Create a copy of the JS file corresponding to that icon in the same directory, and name it something like CaretDownSolid.js
3. Open the copy, and change the fill property to #000 and style to none. Save the file
4. In your app, import it using:

import {CaretDownSolid} from 'grommet-icons/icons/CaretDownSolid';

However I think this is hack-ish and you should fork the grommet-icons library, create the solid icons, and rebuild it.

And about the border-radius, I am not sure what you meant by that

[ShimiSun]

I might be missing something, but why not using the color prop? Please see this example https://codesandbox.io/s/color-prop-in-grommet-icons-vb6by

You can also customize the color property on the theme level, to make the color consistent towards the app.

[ranjan-purbey]

The color prop sets the stroke color for existing icons, and not the fill color.

[ShimiSun]

@ranjan-purbey can you please share with me an example of what is it that can't be achieved?
This is another example where I used the color prop to fill the color of the skype icon and not just the border https://codesandbox.io/s/color-prop-in-grommet-icons-vb6by
Do you have another idea of how to use the fill prop that I might be missing?

[ranjan-purbey]

Try it for Cursor icon. You will notice it only colors the border. What if the user wants a solid variant of the same icon? That can be achieved using the steps mentioned in my previous comment.

[ShimiSun]

@ranjan-purbey Thank you for the prompt replies.
I think that Cursor by design has a white filling, so the user controls only its stroke border, to maintain the icon design and the library standards.
The Skype icon is an example that the color prop does allow filling the color and not just the stroke/border, although by design some icons might not allow it (e.g Cursor).

I'm not sure if this should be a generic design question or a request to enhance some icons that should allow filling color but currently don't. so I'll label the issue as discussion to discuss with the team.

@Moshemo , or any other user, If you have any icon in particular, you'd like to enhance by filling the color please share with us and we'll advise accordingly.

[ranjan-purbey]

@ShimiSun I agree with you that this behavior is controlled by individual icons, and the library itself allows to use the fill property by the icons which opt for it.
What I am suggesting is most, if not all of the icons should have two variants – one the outlined version, and the other a solid (filled) variant. In many popular icon libraries like font-awesome, this is in fact the convention. If others agree, I can contribute in creating these variants for existing icons.

[afreix]

@ranjan-purbey any updates here?

[ranjan-purbey]

@ranjan-purbey any updates here?

As mentioned in above discussion, the choice of opting for a solid variant of an icon depends on the icon's creator. If yours is a one-off case, you can use the workaround in one of my previous replies. Else if sufficient people need this, I can create a PR with solid variants of existing icons.

[afreix]

@ranjan-purbey my use case is not one-off. I have a large number of icons for which this behavior would be desirable. It appears that @Moshemo (who filed this issue originally) and a few others who reacted positively to your message might all be interested in this functionality.

It seems like it'd be worth it to create solid variants of existing icons. If you were able to make an example PR with one solid variant icon, I could contribute as well

[ranjan-purbey]

Alright, I'll create one. Give me a day

[afreix]

@ranjan-purbey I've actually decided to switch icon libraries, so if you are only doing this for me, then you don't have to.

I appreciate the willingness to help out

[taysea]

Related to #274