empayre/fleet
14
0
Fork 0
mirror of https://github.com/empayre/fleet.git synced 2024-11-06 17:05:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
948ae13507
fleet/frontend/components/Icon
History
RachelElysia 9ecf9dc09a
Fleet UI: Update icons (6 icons only) (#11907)
2023-06-02 09:48:17 -04: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 UI: Add macOS settings (profiles) indicator and modal with data table (#9809) 2023-02-22 08:13:12 -08:00
index.ts add reusable icon component that uses svg for icons (#8086) 2022-10-06 12:52:30 +01:00
README.md Fleet UI: Add Icons/README.md (#11921) 2023-05-26 11:05:11 -04: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, 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 to easily view Fleet icons by running yarn storybook.