grafana/public/img/icons/README.md

1.1 KiB

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 since unicons/ is the default it makes sense to add new icons there
  • Ensure the new icon source is formatted correctly:
    • Remove any width or height 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
  • 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 be my-icon
  • Run yarn storybook and verify the new icon appears correctly in the Icon story