Documentation
Feedback
Guides
Storefront Development

Storefront Development
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} />

note: default values for width and height is 24.

Import

Import the component from @faststore/ui

_10
import { Icon } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/atoms/Icon/styles.scss'


Usage


_10
<Icon name="ShoppingCart" />


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-icon
name*stringSymbol id from element to render. Take a look at `/static/icons.svg`. Example: <Icon name="Bell" />
weight"thin" | "light" | "regular" | "bold"SVG weight.regular
widthnumberSVG width.'24'
heightnumberSVG height.'24'
List of available icons

Customization

For further customization, you can use the following data attributes:
data-fs-icon
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page