Icon Pack list
This articles lists all SVG fragment identifiers.
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.
import React from 'react'
import Icon from 'vtex.store-icons'
const IconSearch = ({ ...props }) => {
return <Icon id="hpa-search" {...props} />
}
IconSearch.propTypes = {
/** Icon size, aspect ratio 1:1 */
size: PropTypes.number,
/** Icon viewBox. Default 0, 0, 16, 16 */
viewBox: PropTypes.string,
/** Define if will be used a active or muted className */
isActive: PropTypes.bool,
/** Active color class */
activeClassName: PropTypes.string,
/** Muted color class */
mutedClassName: PropTypes.string,
}
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 |
---|---|
bnd-logo | |
mpa-expand | |
hpa-arrow-back | |
hpa-arrow-from-bottom | |
hpa-arrow-to-bottom | |
hpa-calendar | |
hpa-cart | |
hpa-delete | |
hpa-hamburguer-menu | |
hpa-location-marker | |
hpa-play | |
hpa-profile | |
hpa-save | |
hpa-search | |
hpa-telemarketing | |
inf-help--filled | |
inf-help--outline | |
inf-star | |
inf-tooltip--filled | |
inf-tooltip--outline | |
inf-warning--filled | |
inf-warning--outline | |
mpa-angle--down | |
mpa-angle--up | |
mpa-arrows | |
mpa-bag | |
mpa-bars | |
mpa-bookmark--filled | |
mpa-bookmark--outline | |
mpa-clone--filled | |
mpa-clone--outline | |
mpa-cog | |
mpa-columns | |
mpa-credit-card | |
mpa-edit--filled | |
mpa-edit--outline | |
mpa-elypsis | |
mpa-exchange | |
mpa-export | |
mpa-external-link--line | |
mpa-external-link--outline | |
mpa-eyesight--filled--off | |
mpa-eyesight--filled--on | |
mpa-eyesight--outline--off | |
mpa-eyesight--outline--on | |
mpa-filter--filled | |
mpa-filter--outline | |
mpa-filter-settings | |
mpa-gallery | |
mpa-globe | |
mpa-heart | |
mpa-link | |
mpa-list-items | |
mpa-location-input | |
mpa-minus--filled | |
mpa-minus--line | |
mpa-minus--outline | |
mpa-plus--filled | |
mpa-plus--line | |
mpa-plus--outline | |
mpa-remove | |
mpa-settings | |
mpa-single-item | |
mpa-store | |
mpa-swap | |
nav-arrow--left | |
nav-arrow--right | |
nav-caret--down | |
nav-caret--left | |
nav-caret--right | |
nav-caret--up | |
nav-home | |
nav-minus | |
nav-plus | |
nav-thin-caret--left | |
nav-thin-caret--right | |
sti-check--filled | |
sti-check--line | |
sti-check--outline | |
sti-clock | |
sti-close--filled | |
sti-close--line | |
sti-close--outline | |
sti-discount | |
sti-equals | |
sti-loading |