v0.29.2
Icons live in a separate package @bigcommerce/big-design-icons
. To use the icons you will first need to add the package to your app using npm install @bigcommerce/big-design-icons
or yarn add @bigcommerce/big-design-icons
.
To use an icon import the component from the package:
Code example
Use it anywhere in your app:
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
title | string |
| SVG Title, for accessibility purposes. |
color | Color |
| Sets the icon color given a color name from our palette. |
size | Spacing | number |
| Determines the size of the icon. Accepts a Spacing value or a number of px. |
Props ending with * are required
Flags are a submodule in the separate Icons package @bigcommerce/big-design-icons/flags
. To use the Flags you will first need to add the Icons package to your app using npm install @bigcommerce/big-design-icons
or yarn add @bigcommerce/big-design-icons
. Iconography Design Guidelines.
A complete list of available flags is located here.
To use a flag import the component from the package:
Code example
Use it anywhere in your app:
Edit the code below to see your changes live!
Edit the code below to see your changes live!