Icon
Icons are simplified graphics used to represent concepts and help users navigate the UI.
Icons are simplified graphics used to represent concepts and help users navigate the UI.
This project has a set of icons that uses SVGs from Phosphor icons.
Overview
_10 <Icon name="ShoppingCart" weight="thin" width={32} height={32} />_10 <Icon name="ShoppingCart" weight="light" />_10 <Icon name="ShoppingCart" weight="regular" width={16} height={16} />_10 <Icon name="ShoppingCart" weight="bold" width={20} height={20} />
The default values forwidthandheightare24.
Import
Import the component from @faststore/ui
_10import { Icon } from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@import '@faststore/ui/src/components/atoms/Icon/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
_10<Icon name="ShoppingCart" />
Props
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-icon |
| name* | string | Symbol id from element to render. Take a look at `/static/icons.svg`. Example: <Icon name="Bell" /> | |
| weight | "thin" | "light" | "regular" | "bold" | SVG weight. | regular |
| width | number | SVG width. | '24' |
| height | number | SVG height. | '24' |
List of available icons
Customization
For further customization, you can use the following data attributes:
data-fs-icon