🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

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

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