mirror of
https://github.com/grafana/grafana.git
synced 2024-12-01 13:09:22 -06:00
.. | ||
custom | ||
iot | ||
marker | ||
mono | ||
solid | ||
unicons | ||
README.md |
How to add a new icon
- Add the new icon svg to the
unicons/
directory- Yes, even if it's not a unicon icon or from IconScout
- We will eventually condense all the separate folders into a single
icons/
directory, and sinceunicons/
is the default it makes sense to add new icons there
- Ensure the new icon source is formatted correctly:
- Remove any
width
orheight
attributes - If the icon is a single color, ensure any explicitly defined fill or stroke colors are either removed (or set to
currentColor
if a color must be defined)- This allows the consumer to control the color of the
Icon
, which is useful for hover/focus states
- This allows the consumer to control the color of the
- Remove any
- Modify the
availableIconsIndex
map in@grafana/data
and add the new icon- Note: the key must exactly match the icon filename, e.g. if your new icon is
my-icon.svg
, the key must bemy-icon
- Note: the key must exactly match the icon filename, e.g. if your new icon is
- Run
yarn storybook
and verify the new icon appears correctly in theIcon
story