mirror of https://github.com/empayre/fleet.git synced 2024-11-06 17:05:18 +00:00

History

Marko Lisica 8162d052bf Icons improvements (making frontend consistent with Figma component library) (#14185 ) # Checklist for submitter If some of the following don't apply, delete the relevant line. - [ ] Manual QA for all new/changed functionality --------- Co-authored-by: Gabriel Hernandez <ghernandez345@gmail.com>		2023-10-31 16:06:38 +00:00
..
_styles.scss	Fleet UI: Update icons (6 icons only) (#11907 )	2023-06-02 09:48:17 -04:00
Icon.stories.tsx	add components to storybook (#11500 )	2023-05-03 17:51:33 +01:00
Icon.tsx	Icons improvements (making frontend consistent with Figma component library) (#14185 )	2023-10-31 16:06:38 +00:00
index.ts	add reusable icon component that uses svg for icons (#8086 )	2022-10-06 12:52:30 +01:00
README.md	Icons improvements (making frontend consistent with Figma component library) (#14185 )	2023-10-31 16:06:38 +00:00

README.md

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 on Figma. Current progress on migrating icons is tracked on a Fleet icons spreadsheet.

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 or size using frontend/styles/var/icon_sizes.

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 to easily view Fleet icons by running yarn storybook.