Fleet UI: Add Icons/README.md (#11921)

2023-05-26 11:05:11 -04:00
parent b16db3ec0e
commit eaaf346b54
2 changed files with 29 additions and 1 deletions
@@ -0,0 +1,26 @@
+# Fleet icons library
+
+## Migrating icons
+
+There is a current migration of icons from pixelated PNG files to SVG components.
+
+For internal developers, the source of truth for icon SVGs is on [Fleet style guide](https://www.figma.com/file/qbjRu8jf01BzEfdcge1dgu/Fleet-style-guide-2022-(WIP)?type=design&node-id=213-30309&t=kZelMf1i2hQ7GAaI-0) on Figma. Current progress on migrating icons is tracked on a [Fleet icons spreadsheet](https://docs.google.com/spreadsheets/d/1dNcppmEmnlDvozNKQZ7fgZlqkf7_delkDMtIJCJ2X20/edit?usp=sharing).
+
+## Code organization
+
+### Icon directory
+
+The `Icon` directory includes global styling, the global `Icon` component, and the storybook integration.
+
+### icons directory
+
+The `icons` directory includes separate files for all SVG components for Fleet icons.
+
+Each component can be modified to take various props including but not limited to `color` using `frontend/styles/var/colors.ts`, `size` using `frontend/styles/var/icon_sizes`, or `direction` using custom SVG paths (e.g., `Chevron.tsx`).
+
+`index.ts` maps all icon names used in `<Icon name="icon-name" />` to its respective SVG component.
+
+## How to view Fleet icons
+
+Figma extensions for SVG previews cannot render all SVG components. Use [Storybook](../../README.md#storybook) to easily view Fleet icons by running `yarn storybook`.
+
@@ -5,6 +5,7 @@ import { ButtonVariant } from "components/buttons/Button/Button";
 // @ts-ignore
 import DropdownButton from "components/buttons/DropdownButton";
 import Icon from "components/Icon/Icon";
+import { IconNames } from "components/icons";

 import MoreIcon from "../../../../assets/images/icon-more-menu-3x13@2x.png";

@@ -13,6 +14,7 @@ export interface IActionButtonProps {
  label: string;
  buttonVariant?: ButtonVariant;
  icon?: string;
+  iconSvg?: IconNames;
  hideAction?: boolean;
  onClick: () => void;
 }
@@ -63,7 +65,7 @@ const ActionButtons = ({ baseClass, actions }: IProps): JSX.Element => {
                <Button variant="text-icon" onClick={action.onClick}>
                  <>
                    {action.label}
-                    {action.icon && <Icon name={action.icon} />}
+                    {action.iconSvg && <Icon name={action.iconSvg} />}
                  </>
                </Button>
              ))