grafana/public/img/icons
Ashley Harrison cca3bb0917
Chore: Expose icons and add icon documentation (#81371)
* expose icons and initial draft documentation

* expose archive-alt not archive

* doc tweak

* update docs

* remove some width/heights from icons
2024-01-26 15:48:06 +00:00
..
custom Fix Prometheus icon so it can work in light mode (#75120) 2023-09-21 07:05:07 -06:00
iot Canvas add drone elements (#43122) 2021-12-16 11:05:58 -08:00
marker XYChart: Improve base options setup (#67878) 2023-07-10 17:54:01 -07:00
mono PanelChrome: Refactor and refine items next to title (#60514) 2023-01-16 15:56:39 +00:00
solid Icons: Move unicons icons to the repository and generate the iconsBundle.js with nodejs (#53766) 2022-08-23 15:47:14 +02:00
unicons Chore: Expose icons and add icon documentation (#81371) 2024-01-26 15:48:06 +00:00
README.md Chore: Expose icons and add icon documentation (#81371) 2024-01-26 15:48:06 +00:00

How to add a new icon

  • Add the new icon svg to the unicons/ directory
    • Yes, even if it's not 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
      • 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