mirror of
https://github.com/grafana/grafana.git
synced 2026-07-29 15:59:50 -05:00
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
This commit is contained in:
Ashley Harrison
@@ -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,
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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
|
||||
@@ -1,4 +1,4 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Group 204">
|
||||
<path id="Vector" d="M7.5 5C5.56722 5 4.00015 7.0148 4.00015 9.5C4.00015 7.0148 2.43309 5 0.5 5C2.43309 5 4.00015 2.9855 4.00015 0.5C4.00015 2.9855 5.56722 5 7.5 5Z" fill="url(#paint0_linear_344_481)"/>
|
||||
<path id="Vector_2" d="M9.5 2.5C8.39555 2.5 7.50009 3.39547 7.50009 4.5C7.50009 3.39547 6.60462 2.5 5.5 2.5C6.60462 2.5 7.50009 1.60467 7.50009 0.5C7.50009 1.60467 8.39555 2.5 9.5 2.5Z" fill="url(#paint1_linear_344_481)"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -1,9 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 524.55 535.34">
|
||||
<defs>
|
||||
<style>.cls-1{fill:currentColor;stroke-width:0px;}</style>
|
||||
<style>.application-observability-1{fill:currentColor;stroke-width:0px;}</style>
|
||||
</defs>
|
||||
<g id="Layer_1-2">
|
||||
<path class="cls-1" d="m424.19,427.44L268.02,3.84c-.85-2.31-3.05-3.84-5.51-3.84h-99.87c-2.46,0-4.65,1.53-5.5,3.83L.37,427.43c-1.42,3.83,1.42,7.91,5.5,7.91h93.43c2.55,0,4.82-1.65,5.59-4.09l29.62-92.92c.78-2.43,3.04-4.09,5.59-4.09h144.35c2.54,0,4.8,1.64,5.58,4.05l30.22,92.99c.79,2.42,3.04,4.05,5.58,4.05h92.84c4.08,0,6.92-4.07,5.51-7.9Zm-252.11-178.19c0,4.68-3.81,8.48-8.48,8.48h-13.86c-4.68,0-8.48-3.81-8.48-8.48v-93.63c0-4.68,3.81-8.49,8.48-8.49h13.86c4.68,0,8.48,3.81,8.48,8.49v93.63Zm55.61,0c0,4.68-3.81,8.48-8.48,8.48h-13.86c-4.68,0-8.48-3.81-8.48-8.48V90.2c0-4.68,3.81-8.48,8.48-8.48h13.86c4.68,0,8.48,3.81,8.48,8.48v159.05Zm55.61,0c0,4.68-3.81,8.48-8.49,8.48h-13.86c-4.68,0-8.49-3.81-8.49-8.48v-64.14c0-4.68,3.81-8.48,8.49-8.48h13.86c4.68,0,8.49,3.81,8.49,8.48v64.14Z"/>
|
||||
<path class="application-observability-1" d="m424.19,427.44L268.02,3.84c-.85-2.31-3.05-3.84-5.51-3.84h-99.87c-2.46,0-4.65,1.53-5.5,3.83L.37,427.43c-1.42,3.83,1.42,7.91,5.5,7.91h93.43c2.55,0,4.82-1.65,5.59-4.09l29.62-92.92c.78-2.43,3.04-4.09,5.59-4.09h144.35c2.54,0,4.8,1.64,5.58,4.05l30.22,92.99c.79,2.42,3.04,4.05,5.58,4.05h92.84c4.08,0,6.92-4.07,5.51-7.9Zm-252.11-178.19c0,4.68-3.81,8.48-8.48,8.48h-13.86c-4.68,0-8.48-3.81-8.48-8.48v-93.63c0-4.68,3.81-8.49,8.48-8.49h13.86c4.68,0,8.48,3.81,8.48,8.49v93.63Zm55.61,0c0,4.68-3.81,8.48-8.48,8.48h-13.86c-4.68,0-8.48-3.81-8.48-8.48V90.2c0-4.68,3.81-8.48,8.48-8.48h13.86c4.68,0,8.48,3.81,8.48,8.48v159.05Zm55.61,0c0,4.68-3.81,8.48-8.49,8.48h-13.86c-4.68,0-8.49-3.81-8.49-8.48v-64.14c0-4.68,3.81-8.48,8.49-8.48h13.86c4.68,0,8.49,3.81,8.49,8.48v64.14Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.1 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.60039 3.27265V1.60015H16.3454V4.71265H14.6729V4.37265C14.6729 3.76513 14.1804 3.27265 13.5729 3.27265H4.60039ZM4.50039 0.400146C3.89288 0.400146 3.40039 0.892635 3.40039 1.50015V3.38989H1.55801C1.48169 3.38989 1.40719 3.39766 1.33525 3.41246C0.806079 3.49213 0.400391 3.94876 0.400391 4.50015V8.60015H0.458008V16.4349C0.458008 17.0424 0.950494 17.5349 1.55801 17.5349H13.503C14.1105 17.5349 14.603 17.0424 14.603 16.4349V14.6623H16.3902C16.9977 14.6623 17.4902 14.1698 17.4902 13.5623V5.91265H17.5454V1.50015C17.5454 0.892633 17.0529 0.400146 16.4454 0.400146H4.50039ZM1.65801 8.60015V16.3349H13.403V8.60015H1.65801ZM1.65801 7.40015V4.60015H13.4004V7.40015H1.65801ZM14.6102 6.02983V13.4623H16.2902V6.02983H14.6102ZM4.65777 6.7498H3.21777V5.5498H4.65777V6.7498ZM6.09766 6.7498H7.53766V5.5498H6.09766V6.7498Z" fill="currentColor"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.07147 12.3438C9.04238 11.9084 8.97021 11.5011 8.86196 11.1503C9.25024 11.436 9.53279 11.857 9.64008 12.3438H9.07147ZM8.19422 12.3438C8.15897 11.8895 8.07059 11.4953 7.95391 11.2036C7.87705 11.0114 7.79646 10.8853 7.72936 10.8143C7.6971 10.7802 7.67528 10.7659 7.66406 10.7602C7.65284 10.7659 7.63103 10.7802 7.59877 10.8143C7.53166 10.8853 7.45108 11.0114 7.37421 11.2036C7.25754 11.4953 7.16915 11.8895 7.13391 12.3438H8.19422ZM7.13391 13.2188H8.19422C8.15897 13.673 8.07059 14.0672 7.95391 14.3589C7.87705 14.5511 7.79646 14.6772 7.72936 14.7482C7.6971 14.7823 7.67528 14.7966 7.66406 14.8023C7.65284 14.7966 7.63103 14.7823 7.59877 14.7482C7.53166 14.6772 7.45108 14.5511 7.37421 14.3589C7.25754 14.0672 7.16915 13.673 7.13391 13.2188ZM6.25665 12.3438C6.28574 11.9084 6.35791 11.5011 6.46616 11.1503C6.07789 11.436 5.79533 11.857 5.68805 12.3438H6.25665ZM5.68805 13.2188H6.25665C6.28574 13.6541 6.35791 14.0614 6.46616 14.4122C6.07789 14.1265 5.79533 13.7055 5.68805 13.2188ZM4.76562 12.7812C4.76562 11.1805 6.0633 9.88281 7.66406 9.88281C9.26483 9.88281 10.5625 11.1805 10.5625 12.7812C10.5625 14.382 9.26483 15.6797 7.66406 15.6797C6.0633 15.6797 4.76562 14.382 4.76562 12.7812ZM9.64008 13.2188C9.53279 13.7055 9.25024 14.1265 8.86196 14.4122C8.97021 14.0614 9.04238 13.6541 9.07147 13.2188H9.64008Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
@@ -1,5 +1,5 @@
|
||||
<svg width="567" height="567" viewBox="0 0 567 567" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M441.118 53.8103L542.177 546.75H31.4615L196.718 183.554L290.242 254.396L307.934 267.797L319.661 248.955L441.118 53.8103Z" stroke="currentColor" stroke-width="40.5" fill="none" />
|
||||
<path d="M232.072 428.282L265.231 475.2H300.671L261.676 420.785L296.342 372.669L273.347 356.785L263.183 370.157L232.034 414.099V325.79L201 300.477V475.161H232.034V428.244L232.072 428.282Z" fill="currentColor"/>
|
||||
<path d="M410.7 404.129C407.994 397.946 403.936 392.419 398.796 387.975C390.178 379.318 378.545 374.332 366.333 373.985H365.405C363.821 373.985 362.197 374.178 360.69 374.642L390.719 330.004L366.796 313.309L355.473 330.004L326.526 374.216C321.541 381.559 317.406 388.013 314.816 392.496C312.15 397.25 309.831 402.197 307.937 407.298C305.773 412.709 304.652 418.506 304.652 424.342C304.575 431.259 305.966 438.139 308.749 444.515C311.493 450.892 315.589 456.573 320.691 461.288C330.7 471.027 344.149 476.477 358.101 476.477L359.222 476.399H360.458C374.526 476.361 388.091 470.95 398.217 461.172C403.434 456.457 407.569 450.699 410.352 444.245C413.134 437.791 414.564 430.834 414.448 423.839C414.68 417.076 413.405 410.351 410.7 404.129V404.129ZM375.569 440.303C371.241 444.593 365.405 446.989 359.299 447.027C353.231 447.066 347.434 444.67 343.144 440.38C338.855 436.09 336.459 430.293 336.459 424.226C336.459 418.158 338.855 412.361 343.144 408.071C347.434 403.781 353.231 401.385 359.299 401.385H359.492C362.507 401.385 365.482 402.004 368.226 403.163C371.009 404.361 373.482 406.062 375.569 408.264C377.772 410.274 379.511 412.709 380.671 415.453C381.869 418.197 382.449 421.134 382.449 424.11C382.371 430.216 379.898 436.013 375.569 440.303V440.303Z" fill="currentColor"/>
|
||||
<svg viewBox="0 0 567 567" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M441.118 53.8103L542.177 546.75H31.4615L196.718 183.554L290.242 254.396L307.934 267.797L319.661 248.955L441.118 53.8103Z" stroke="currentColor" stroke-width="40.5" fill="none" />
|
||||
<path d="M232.072 428.282L265.231 475.2H300.671L261.676 420.785L296.342 372.669L273.347 356.785L263.183 370.157L232.034 414.099V325.79L201 300.477V475.161H232.034V428.244L232.072 428.282Z" fill="currentColor"/>
|
||||
<path d="M410.7 404.129C407.994 397.946 403.936 392.419 398.796 387.975C390.178 379.318 378.545 374.332 366.333 373.985H365.405C363.821 373.985 362.197 374.178 360.69 374.642L390.719 330.004L366.796 313.309L355.473 330.004L326.526 374.216C321.541 381.559 317.406 388.013 314.816 392.496C312.15 397.25 309.831 402.197 307.937 407.298C305.773 412.709 304.652 418.506 304.652 424.342C304.575 431.259 305.966 438.139 308.749 444.515C311.493 450.892 315.589 456.573 320.691 461.288C330.7 471.027 344.149 476.477 358.101 476.477L359.222 476.399H360.458C374.526 476.361 388.091 470.95 398.217 461.172C403.434 456.457 407.569 450.699 410.352 444.245C413.134 437.791 414.564 430.834 414.448 423.839C414.68 417.076 413.405 410.351 410.7 404.129V404.129ZM375.569 440.303C371.241 444.593 365.405 446.989 359.299 447.027C353.231 447.066 347.434 444.67 343.144 440.38C338.855 436.09 336.459 430.293 336.459 424.226C336.459 418.158 338.855 412.361 343.144 408.071C347.434 403.781 353.231 401.385 359.299 401.385H359.492C362.507 401.385 365.482 402.004 368.226 403.163C371.009 404.361 373.482 406.062 375.569 408.264C377.772 410.274 379.511 412.709 380.671 415.453C381.869 418.197 382.449 421.134 382.449 424.11C382.371 430.216 379.898 436.013 375.569 440.303V440.303Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
@@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1664" height="1728" viewBox="0 0 1664 1728">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1664 1728">
|
||||
<path fill="currentColor" d="M462 1394q0 53-37.5 90.5T334 1522q-52 0-90-38t-38-90q0-53 37.5-90.5T334 1266t90.5 37.5T462 1394zm498 206q0 53-37.5 90.5T832 1728t-90.5-37.5T704 1600t37.5-90.5T832 1472t90.5 37.5T960 1600zM256 896q0 53-37.5 90.5T128 1024t-90.5-37.5T0 896t37.5-90.5T128 768t90.5 37.5T256 896zm1202 498q0 52-38 90t-90 38q-53 0-90.5-37.5T1202 1394t37.5-90.5t90.5-37.5t90.5 37.5t37.5 90.5zM494 398q0 66-47 113t-113 47t-113-47t-47-113t47-113t113-47t113 47t47 113zm1170 498q0 53-37.5 90.5T1536 1024t-90.5-37.5T1408 896t37.5-90.5T1536 768t90.5 37.5T1664 896zm-640-704q0 80-56 136t-136 56t-136-56t-56-136t56-136T832 0t136 56t56 136zm530 206q0 93-66 158.5T1330 622q-93 0-158.5-65.5T1106 398q0-92 65.5-158t158.5-66q92 0 158 66t66 158z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 840 B After Width: | Height: | Size: 813 B |
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.0002 3H5.00017C4.29663 3.00546 3.61738 3.25801 3.08118 3.71352C2.54497 4.16902 2.18591 4.79849 2.06677 5.49189C1.94763 6.18529 2.07598 6.89851 2.4294 7.50687C2.78281 8.11523 3.3388 8.58002 4.00017 8.82V18C4.00017 18.7957 4.31624 19.5587 4.87885 20.1213C5.44146 20.6839 6.20452 21 7.00017 21H17.0002C17.7958 21 18.5589 20.6839 19.1215 20.1213C19.6841 19.5587 20.0002 18.7957 20.0002 18V8.82C20.6615 8.58002 21.2175 8.11523 21.5709 7.50687C21.9244 6.89851 22.0527 6.18529 21.9336 5.49189C21.8144 4.79849 21.4554 4.16902 20.9192 3.71352C20.383 3.25801 19.7037 3.00546 19.0002 3ZM18.0002 18C18.0002 18.2652 17.8948 18.5196 17.7073 18.7071C17.5197 18.8946 17.2654 19 17.0002 19H7.00017C6.73495 19 6.4806 18.8946 6.29306 18.7071C6.10553 18.5196 6.00017 18.2652 6.00017 18V9H18.0002V18ZM19.0002 7H5.00017C4.73495 7 4.4806 6.89464 4.29306 6.70711C4.10553 6.51957 4.00017 6.26522 4.00017 6C4.00017 5.73478 4.10553 5.48043 4.29306 5.29289C4.4806 5.10536 4.73495 5 5.00017 5H19.0002C19.2654 5 19.5197 5.10536 19.7073 5.29289C19.8948 5.48043 20.0002 5.73478 20.0002 6C20.0002 6.26522 19.8948 6.51957 19.7073 6.70711C19.5197 6.89464 19.2654 7 19.0002 7Z" fill="currentColor"/>
|
||||
<path d="M10.9993 14.205L10.2093 15.005C10.021 15.1933 9.76562 15.2991 9.49931 15.2991C9.23301 15.2991 8.97762 15.1933 8.78931 15.005C8.60101 14.8167 8.49522 14.5613 8.49522 14.295C8.49522 14.0287 8.60101 13.7733 8.78931 13.585L11.2893 11.085C11.3844 10.994 11.4966 10.9226 11.6193 10.875C11.8628 10.775 12.1359 10.775 12.3793 10.875C12.5021 10.9226 12.6142 10.994 12.7093 11.085L15.2093 13.585C15.303 13.678 15.3774 13.7886 15.4282 13.9104C15.479 14.0323 15.5051 14.163 15.5051 14.295C15.5051 14.427 15.479 14.5577 15.4282 14.6796C15.3774 14.8015 15.303 14.9121 15.2093 15.005C15.1164 15.0987 15.0057 15.1731 14.8839 15.2239C14.762 15.2747 14.6313 15.3008 14.4993 15.3008C14.3673 15.3008 14.2366 15.2747 14.1147 15.2239C13.9929 15.1731 13.8823 15.0987 13.7893 15.005L12.9993 14.205V16.795C12.9993 17.0602 12.894 17.3146 12.7064 17.5021C12.5189 17.6897 12.2645 17.795 11.9993 17.795C11.7341 17.795 11.4797 17.6897 11.2922 17.5021C11.1047 17.3146 10.9993 17.0602 10.9993 16.795V14.205Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Reference in New Issue
Block a user