All Store icons components.

• Store Icons
  • Description
  • Release schedule
  • Table of Contents
  • Concept
  • Usage
    • Dedicated Icon
    • Generic Icon
  • Icons
    • Props
    • Icons List
      • Brand
      • High Priority Actions
      • Middle Priority Actions
      • Informational
      • Navigation
      • Status Indicators
  • Customize
    • Overwriting the default IconPack
    • Nomenclature
      • Icon Intention
  • Troubleshooting
  • Contributing
  • Tests

This project is based on SVG fragment identifiers. All store icons are served by Render SDK, and with HTML tag <use> we can render a fragment from our icon pack. If you want to know the complete list of fragment SVG's, see here

First of all, add into the dependencies of your manifest.tsxon and use it as an npm module:

There are two different ways to use the icons available here. If you're developing a store's theme, you should use the icon block for the icon you want to render, which behaves just like any other block and expects to receive the props exposed by its API. But if you're developing custom components and want to use icons defined here, just follow the instructions below.

Import the desired icon and use it into your code, for example:

You can see here a list of every available icon.

The API provides a generic icon, The Icon component. You can choose from any other icon passing only the id from the respective one you want to add.

For example:

⚠️ This component is meant to be used on icons there aren't common throughout the store. Choose dedicated components whenever possible.

Any icon can receive the following props:

Property	Description	Type	Default value
id	The ID for the desired icon	String	''
size	Desired size	Number	16
isActive	desc	Boolean	true
activeClassName	The className it should have if active	String	🚫
mutedClassName	The className it should have if not active	String	🚫

Obs: ...props: It is important to notice that any other <svg> prop passed will work with an icon as well.

Enhanced Props

Some components support modifiers. These are props that define the icon type, orientation, state or shape.

Modifier	Possible values
type	filled line outline
orientation	up down left right
state	on off
shape	square rounded circle

Brand

Component	id	Type	Orientation	State	Shape
IconSocial	social	🚫	🚫	🚫	square | rounded | circle

High Priority Actions

Component	id	Type	Orientation	State	Shape
IconArrowBack	arrow-back	🚫	🚫	🚫	🚫
IconAssistantSales	assistant-sales	🚫	🚫	🚫	🚫
IconProfile	profile	🚫	🚫	🚫	🚫
IconCart	cart	🚫	🚫	🚫	🚫
IconSearch	search	🚫	🚫	🚫	🚫
IconDelete	delete	🚫	🚫	🚫	🚫
IconMenu	menu	🚫	🚫	🚫	🚫
IconLocationMarker	location-marker	🚫	🚫	🚫	🚫

Medium Priority Actions

| Component | id | Type | Orientation | State | Shape | | ----------------------------------------------------------------------------------------------- | ------------- | ------------------------- | ----------- | --------- | ----- | ------ | | IconEyeSight | eyesight | filled | outline | 🚫 | on | off | 🚫 | | IconMinus | minus | filled | outline | line | 🚫 | 🚫 brands | | IconPlus | plus | filled | outline | line | 🚫 | 🚫 | 🚫 | brands | | IconSingleGrid | single-item | 🚫 | 🚫 | 🚫 | 🚫 | | IconRemove | remove | 🚫 | 🚫 | 🚫 | 🚫 | | IconSwap | swap | 🚫 | 🚫 | 🚫 | 🚫 | | IconHeart | heart | 🚫 | 🚫 | 🚫 | 🚫 | | IconGlobe | globe | 🚫 | 🚫 | 🚫 | 🚫 | | IconBookmark | bookmark | filled | outline | 🚫 | 🚫 | 🚫 | | IconPlay | play | filled | outline | 🚫 | 🚫 | 🚫 | | IconPause | pause | filled | outline | 🚫 | 🚫 | 🚫 |

Navigation

| Component | id | Type | Orientation | State | Shape | | ------------------------------------------------------------------------------------- | ------- | ---- | --------------------------- | ----- | ----- | ------------- | | IconCaret | caret | 🚫 | up | down | left | right | 🚫 | 🚫 | true | false |

Status Indicators

Component	id	Type	Orientation	State	Shape
IconClose	close	filled | outline	🚫	🚫	🚫
IconCheck	check	filled | outline | line	🚫	🚫	🚫
IconVolumeOn	volume-on	filled | outline | line	🚫	🚫	🚫
IconVolumeOff	volume-off	filled | outline | line	🚫	🚫	🚫

In the usage section, we discuss two ways of using icons. These ways extend to customization, so, prefer to change an existing Icon so that you can use the dedicated version. You can check how to override and name icons below.

As mentioned before, all icon IDs are stored at the iconpack.svg file. You can overwrite the default one by:

1. On your store-theme create a new folder called iconpacks

2. Create a file called iconpack.svg

3. Declare your icon IDs (use the default iconpack as an example in how to do that properly).

The naming convention is: intention-id--?modifiers

Where the modifiers follows the rule: ?type--?orientation--?state--?shape

🤓 ? stands for optional inputs

Icon Intention

bnd Brand - Display logos, brands or advertisements.

hpa High priority actions - Actions that are important to the global context.

mpa Mild priority actions - Actions that are important only to the current component context.

inf Informational - Represents information display or actions that, when triggered, reveal further details about the current context.

nav Navigation - Actions that triggers navigation.

sti Status indicators - Indicates the current item/component semantic status.

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
'arrowBackIcon'
'assistantSalesIcon'
'caretIcon'
'cartIcon'
'checkIcon'
'closeIcon'
'deleteIcon'
'equalsIcon'
'eyeSightIcon'
'filterIcon'
'globeIcon'
'gridIcon'
'heartIcon'
'homeIcon'
'inlineGridIcon'
'locationInputIcon'
'locationMarkerIcon'
'menuIcon'
'minusIcon'
'plusIcon'
'profileIcon'
'removeIcon'
'searchIcon'
'singleGridIcon'
'socialIcon'
'starIcon'
'swapIcon'
'playIcon'
'pauseIcon'
'fullscreenIcon'
'volumeOnIcon'
'volumeOffIcon'