Skip to content
All icons that Store Components use.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Github templates Jan 30, 2019
react
styles/iconpacks
svg
.gitignore Initial commit with Icon structure Jan 30, 2019
.prettierrc
.travis.yml Add travis Mar 11, 2019
.vtexignore Add svg/ to .vtexignore Feb 27, 2019
CHANGELOG.md
ICONPACK.md add location marker svg Apr 1, 2019
README.md
manifest.json

README.md

Store Icons

Build Status

Description

All Store icons components.

Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[0.x] Current Release 2019-01-30 ----------- ---------- 2.x

Table of Contents

Concept

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

Usage

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

"dependencies": {
  "vtex.store-icons": "0.x"
}

Dedicated Icon

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

import { IconMenu } from 'vtex.store-icons'

const YourComponent = props => (
  <IconMenu />
)

You can see here a list of every available icon.

Generic 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:

import { Icon } from 'vtex.store-icons'

const YourComponent = props => <Icon id="hpa-cart" />

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

Icons

Props

Any icon can receive the following props:

Property Description Type Default value
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

Icon List

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 🚫 🚫 🚫 🚫

Middle 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 🚫 🚫 🚫
IconSingleItem single-item 🚫 🚫 🚫 🚫
IconList list 🚫 🚫 🚫 🚫
IconGallery gallery 🚫 🚫 🚫 🚫
IconRemove remove 🚫 🚫 🚫 🚫
IconSwap swap 🚫 🚫 🚫 🚫
IconHeart heart 🚫 🚫 🚫 🚫

Informational

Component id Type Orientation State Shape

Navigation

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

Status Indicators

Component id Type Orientation State Shape
IconClose close filled | outline 🚫 🚫 🚫
IconCheck check filled | outline | line 🚫 🚫 🚫

Customize

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.

Overwriting the default IconPack

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).

Nomenclature

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.

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Contributing

Check it out how to contribute with this project.

Tests

To execute our tests go to react/ folder and run yarn test

You can’t perform that action at this time.