From cca3bb09173c085026106a732230309f02745e7e Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Fri, 26 Jan 2024 15:48:06 +0000 Subject: [PATCH] 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 --- packages/grafana-data/src/types/icon.ts | 3 +++ packages/grafana-ui/src/components/Icon/utils.ts | 4 ++-- public/img/icons/README.md | 12 ++++++++++++ public/img/icons/unicons/ai.svg | 2 +- .../img/icons/unicons/application-observability.svg | 4 ++-- public/img/icons/unicons/frontend-observability.svg | 2 +- public/img/icons/unicons/k6.svg | 8 ++++---- public/img/icons/unicons/spinner.svg | 2 +- public/img/icons/unicons/unarchive.svg | 4 ++++ 9 files changed, 30 insertions(+), 11 deletions(-) create mode 100644 public/img/icons/README.md create mode 100644 public/img/icons/unicons/unarchive.svg diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts index 019ce6075838..e39648bf1a75 100644 --- a/packages/grafana-data/src/types/icon.ts +++ b/packages/grafana-data/src/types/icon.ts @@ -23,6 +23,7 @@ export const availableIconsIndex = { 'align-right': true, 'application-observability': true, apps: true, + 'archive-alt': true, arrow: true, 'arrow-down': true, 'arrow-from-right': true, @@ -135,6 +136,7 @@ export const availableIconsIndex = { 'gf-pin': true, 'gf-prometheus': true, 'gf-traces': true, + globe: true, grafana: true, 'graph-bar': true, heart: true, @@ -223,6 +225,7 @@ export const availableIconsIndex = { 'toggle-on': true, 'toggle-off': true, 'trash-alt': true, + unarchive: true, unlock: true, upload: true, user: true, diff --git a/packages/grafana-ui/src/components/Icon/utils.ts b/packages/grafana-ui/src/components/Icon/utils.ts index 0d379f36c7a2..229aa5361e08 100644 --- a/packages/grafana-ui/src/components/Icon/utils.ts +++ b/packages/grafana-ui/src/components/Icon/utils.ts @@ -1,4 +1,4 @@ -import { IconName, IconSize } from '../../types/icon'; +import { IconName, IconSize, IconType } from '../../types/icon'; const alwaysMonoIcons: IconName[] = [ 'grafana', @@ -10,7 +10,7 @@ const alwaysMonoIcons: IconName[] = [ 'circle-mono', ]; -export function getIconSubDir(name: IconName, type: string): string { +export function getIconSubDir(name: IconName, type: IconType): string { if (name?.startsWith('gf-')) { return 'custom'; } else if (alwaysMonoIcons.includes(name)) { diff --git a/public/img/icons/README.md b/public/img/icons/README.md new file mode 100644 index 000000000000..88acd06c678f --- /dev/null +++ b/public/img/icons/README.md @@ -0,0 +1,12 @@ +# How to add a new icon + +- Add the new icon svg to the `unicons/` directory + - Yes, even if it's not 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 +- 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`](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 diff --git a/public/img/icons/unicons/ai.svg b/public/img/icons/unicons/ai.svg index d8df892aa90d..0ea0f2502f75 100644 --- a/public/img/icons/unicons/ai.svg +++ b/public/img/icons/unicons/ai.svg @@ -1,4 +1,4 @@ - + diff --git a/public/img/icons/unicons/application-observability.svg b/public/img/icons/unicons/application-observability.svg index 9ea3ec93680d..cc33bd99ddf6 100644 --- a/public/img/icons/unicons/application-observability.svg +++ b/public/img/icons/unicons/application-observability.svg @@ -1,9 +1,9 @@ - + - + diff --git a/public/img/icons/unicons/frontend-observability.svg b/public/img/icons/unicons/frontend-observability.svg index 743b87dc8a80..38ffbd70502b 100644 --- a/public/img/icons/unicons/frontend-observability.svg +++ b/public/img/icons/unicons/frontend-observability.svg @@ -1,4 +1,4 @@ - + diff --git a/public/img/icons/unicons/k6.svg b/public/img/icons/unicons/k6.svg index 26107f6960dc..ba5cd2d7e390 100644 --- a/public/img/icons/unicons/k6.svg +++ b/public/img/icons/unicons/k6.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/public/img/icons/unicons/spinner.svg b/public/img/icons/unicons/spinner.svg index fca18c393935..62eb684eb27e 100644 --- a/public/img/icons/unicons/spinner.svg +++ b/public/img/icons/unicons/spinner.svg @@ -1,3 +1,3 @@ - + diff --git a/public/img/icons/unicons/unarchive.svg b/public/img/icons/unicons/unarchive.svg new file mode 100644 index 000000000000..afe7b426b383 --- /dev/null +++ b/public/img/icons/unicons/unarchive.svg @@ -0,0 +1,4 @@ + + + +