14 lines
1.1 KiB
Markdown
14 lines
1.1 KiB
Markdown
# 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](https://iconscout.com/unicons/solid-icons)
|
|
- 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
|
|
- Add the new icon path to `public/app/core/icons/cached.json`
|
|
- 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`](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/types/icon.ts#L1) 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
|