Icon

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 (opens in a new tab).

Overview

  <Icon name="ShoppingCart" weight="thin" width={32} height={32} />
  <Icon name="ShoppingCart" weight="light" />
  <Icon name="ShoppingCart" weight="regular" width={16} height={16} />
  <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

import { 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:

@import '@faststore/ui/src/components/atoms/Icon/styles.scsss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

<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. @deprecated 'weight' prop will be removed in the next major version.	`regular`
width	`number`	SVG width. @deprecated 'width' prop will be removed in the next major version. Use 'size' instead.	`'24'`
height	`number`	SVG height. @deprecated 'height' prop will be removed in the next major version. Use 'size' instead.	`'24'`
size	`20 \| 24 \| 32`	SVG size.	`'20'`

List of available icons

Customization

For further customization, you can use the following data attributes:

data-fs-icon

Checkbox Input