Here we describe all our SVG fragment identifiers.
:loudspeaker: Disclaimer: The svg/ folder is just to render the icons in this MD.
How to use this fragments?
First of all, you should add the vtex.store-icons to your dependencies in manifest.json.
This an example that show you how to use it.
_21 import React from 'react'_21_21 import Icon from 'vtex.store-icons'_21_21 const IconSearch = ({ ...props }) => {_21 return <Icon id="hpa-search" {...props} />_21 }_21_21 IconSearch.propTypes = {_21 /** Icon size, aspect ratio 1:1 */_21 size: PropTypes.number,_21 /** Icon viewBox. Default 0, 0, 16, 16 */_21 viewBox: PropTypes.string,_21 /** Define if will be used a active or muted className */_21 isActive: PropTypes.bool,_21 /** Active color class */_21 activeClassName: PropTypes.string,_21 /** Muted color class */_21 mutedClassName: PropTypes.string,_21 }_21 export default IconSearch
SVG Prefixes
We use a series of prefixes to help us understand what an specific icon means.
- bnd - Brand;
- hpa - High Priority Actions;
- mpa - Midle Priority Actions;
- sti - Status Indicator;
- inf - Informative;
- nav - Navigation
SVG Fragments
| Icon | ID |
|---|---|
An error occurred while trying to load the image. ./bnd-logo.svg | bnd-logo |
An error occurred while trying to load the image. ./mpa-expand.svg | mpa-expand |
An error occurred while trying to load the image. ./hpa-arrow-back.svg | hpa-arrow-back |
An error occurred while trying to load the image. ./hpa-arrow-from-bottom.svg | hpa-arrow-from-bottom |
An error occurred while trying to load the image. ./hpa-arrow-to-bottom.svg | hpa-arrow-to-bottom |
An error occurred while trying to load the image. ./hpa-calendar.svg | hpa-calendar |
An error occurred while trying to load the image. ./hpa-cart.svg | hpa-cart |
An error occurred while trying to load the image. ./hpa-delete.svg | hpa-delete |
An error occurred while trying to load the image. ./hpa-hamburguer-menu.svg | hpa-hamburguer-menu |
An error occurred while trying to load the image. ./hpa-location-marker.svg | hpa-location-marker |
An error occurred while trying to load the image. ./hpa-play.svg | hpa-play |
An error occurred while trying to load the image. ./hpa-profile.svg | hpa-profile |
An error occurred while trying to load the image. ./hpa-save.svg | hpa-save |
An error occurred while trying to load the image. ./hpa-search.svg | hpa-search |
An error occurred while trying to load the image. ./hpa-telemarketing.svg | hpa-telemarketing |
An error occurred while trying to load the image. ./inf-help--filled.svg | inf-help--filled |
An error occurred while trying to load the image. ./inf-help--outline.svg | inf-help--outline |
An error occurred while trying to load the image. ./inf-star.svg | inf-star |
An error occurred while trying to load the image. ./inf-tooltip--filled.svg | inf-tooltip--filled |
An error occurred while trying to load the image. ./inf-tooltip--outline.svg | inf-tooltip--outline |
An error occurred while trying to load the image. ./inf-warning--filled.svg | inf-warning--filled |
An error occurred while trying to load the image. ./inf-warning--outline.svg | inf-warning--outline |
An error occurred while trying to load the image. ./mpa-angle--down.svg | mpa-angle--down |
An error occurred while trying to load the image. ./mpa-angle--up.svg | mpa-angle--up |
An error occurred while trying to load the image. ./mpa-arrows.svg | mpa-arrows |
An error occurred while trying to load the image. ./mpa-bag.svg | mpa-bag |
An error occurred while trying to load the image. ./mpa-bars.svg | mpa-bars |
An error occurred while trying to load the image. ./mpa-bookmark--filled.svg | mpa-bookmark--filled |
An error occurred while trying to load the image. ./mpa-bookmark--outline.svg | mpa-bookmark--outline |
An error occurred while trying to load the image. ./mpa-clone--filled.svg | mpa-clone--filled |
An error occurred while trying to load the image. ./mpa-clone--outline.svg | mpa-clone--outline |
An error occurred while trying to load the image. ./mpa-cog.svg | mpa-cog |
An error occurred while trying to load the image. ./mpa-columns.svg | mpa-columns |
An error occurred while trying to load the image. ./mpa-credit-card.svg | mpa-credit-card |
An error occurred while trying to load the image. ./mpa-edit--filled.svg | mpa-edit--filled |
An error occurred while trying to load the image. ./mpa-edit--outline.svg | mpa-edit--outline |
An error occurred while trying to load the image. ./mpa-elypsis.svg | mpa-elypsis |
An error occurred while trying to load the image. ./mpa-exchange.svg | mpa-exchange |
An error occurred while trying to load the image. ./mpa-export.svg | mpa-export |
An error occurred while trying to load the image. ./mpa-external-link--line.svg | mpa-external-link--line |
An error occurred while trying to load the image. ./mpa-external-link--outline.svg | mpa-external-link--outline |
An error occurred while trying to load the image. ./mpa-eyesight--filled--off.svg | mpa-eyesight--filled--off |
An error occurred while trying to load the image. ./mpa-eyesight--filled--on.svg | mpa-eyesight--filled--on |
An error occurred while trying to load the image. ./mpa-eyesight--outline--off.svg | mpa-eyesight--outline--off |
An error occurred while trying to load the image. ./mpa-eyesight--outline--on.svg | mpa-eyesight--outline--on |
An error occurred while trying to load the image. ./mpa-filter--filled.svg | mpa-filter--filled |
An error occurred while trying to load the image. ./mpa-filter--outline.svg | mpa-filter--outline |
An error occurred while trying to load the image. ./mpa-filter-settings.svg | mpa-filter-settings |
An error occurred while trying to load the image. ./mpa-gallery.svg | mpa-gallery |
An error occurred while trying to load the image. ./mpa-globe.svg | mpa-globe |
An error occurred while trying to load the image. ./mpa-heart.svg | mpa-heart |
An error occurred while trying to load the image. ./mpa-link.svg | mpa-link |
An error occurred while trying to load the image. ./mpa-list-items.svg | mpa-list-items |
An error occurred while trying to load the image. ./mpa-location-input.svg | mpa-location-input |
An error occurred while trying to load the image. ./mpa-minus--filled.svg | mpa-minus--filled |
An error occurred while trying to load the image. ./mpa-minus--line.svg | mpa-minus--line |
An error occurred while trying to load the image. ./mpa-minus--outline.svg | mpa-minus--outline |
An error occurred while trying to load the image. ./mpa-plus--filled.svg | mpa-plus--filled |
An error occurred while trying to load the image. ./mpa-plus--line.svg | mpa-plus--line |
An error occurred while trying to load the image. ./mpa-plus--outline.svg | mpa-plus--outline |
An error occurred while trying to load the image. ./mpa-remove.svg | mpa-remove |
An error occurred while trying to load the image. ./mpa-settings.svg | mpa-settings |
An error occurred while trying to load the image. ./mpa-single-item.svg | mpa-single-item |
An error occurred while trying to load the image. ./mpa-store.svg | mpa-store |
An error occurred while trying to load the image. ./mpa-swap.svg | mpa-swap |
An error occurred while trying to load the image. ./nav-arrow--left.svg | nav-arrow--left |
An error occurred while trying to load the image. ./nav-arrow--right.svg | nav-arrow--right |
An error occurred while trying to load the image. ./nav-caret--down.svg | nav-caret--down |
An error occurred while trying to load the image. ./nav-caret--left.svg | nav-caret--left |
An error occurred while trying to load the image. ./nav-caret--right.svg | nav-caret--right |
An error occurred while trying to load the image. ./nav-caret--up.svg | nav-caret--up |
An error occurred while trying to load the image. ./nav-home.svg | nav-home |
An error occurred while trying to load the image. ./nav-minus.svg | nav-minus |
An error occurred while trying to load the image. ./nav-plus.svg | nav-plus |
An error occurred while trying to load the image. ./nav-thin-caret--left.svg | nav-thin-caret--left |
An error occurred while trying to load the image. ./nav-thin-caret--right.svg | nav-thin-caret--right |
An error occurred while trying to load the image. ./sti-check--filled.svg | sti-check--filled |
An error occurred while trying to load the image. ./sti-check--line.svg | sti-check--line |
An error occurred while trying to load the image. ./sti-check--outline.svg | sti-check--outline |
An error occurred while trying to load the image. ./sti-clock.svg | sti-clock |
An error occurred while trying to load the image. ./sti-close--filled.svg | sti-close--filled |
An error occurred while trying to load the image. ./sti-close--line.svg | sti-close--line |
An error occurred while trying to load the image. ./sti-close--outline.svg | sti-close--outline |
An error occurred while trying to load the image. ./sti-discount.svg | sti-discount |
An error occurred while trying to load the image. ./sti-equals.svg | sti-equals |
An error occurred while trying to load the image. ./sti-loading.svg | sti-loading |