# Icon

# Most common usage scenario


This section is not fully documented yet. We are doing our best to make our documentation a good and complete source of knowledge about Storefront UI. If you would like to help us, please don't hesitate to contribute to our docs. You can read more about it here.

# Props

  • icon

    • Icon SVG path(s). It can be single SVG path (string) or array of SVG paths or icon name. from our icons list (such as 'added_to_cart`)
    • type: string|array
    • defaultValue: ""
  • size

    • Custom size of the icon. It can be our standard sizes, or 12px or 1.2rem or nothing. Standard sizes: xxs, xs, sm, md, lg, xl, xxl, xl3, xl4.
    • type: string
    • defaultValue: ""
  • color

    • Custom color of the icon. It can be according to our standard colors, or #fff or rgb(255,255,255) or nothing. Standard colors: primary, secondary, white, black, accent, green-primary, green-secondary, gray-primary, gray-secondary, light-primary, light-secondary, pink-primary, pink-secondary, yellow-primary, yellow-secondary, blue-primary, blue-secondary.
    • type: string
    • defaultValue: ""
  • viewBox

    • Custom viewBox size of the icon. It should be according to the standard "min-x min-y width height". By default it will be 0 0 24 24. If you use our icons, you don't need to pass this prop at all. Recommedations: try to get your SVG designed with our default viewBox value and reduce the number of props passed to the component.
    • type: string
    • defaultValue: "0 0 24 24"

# Slots

  • default
    • bindings: viewBox, iconPaths, icon

# Events


# CSS modifiers

  • var(--icon-color);
  • var(--icon-size);
  • .sf-icon--color-primary
  • .sf-icon--color-secondary
  • .sf-icon--color-white
  • .sf-icon--color-black
  • .sf-icon--color-accent
  • .sf-icon--color-green-primary
  • .sf-icon--color-green-secondary
  • .sf-icon--color-gray-primary
  • .sf-icon--color-gray-secondary
  • .sf-icon--color-light-primary
  • .sf-icon--color-light-secondary
  • .sf-icon--color-pink-primary
  • .sf-icon--color-pink-secondary
  • .sf-icon--color-yellow-primary
  • .sf-icon--color-yellow-secondary
  • .sf-icon--color-blue-primary
  • .sf-icon--color-blue-secondary
  • .sf-icon--size-xxs
  • .sf-icon--size-xs
  • .sf-icon--size-sm
  • .sf-icon--size-md
  • .sf-icon--size-lg
  • .sf-icon--size-xl
  • .sf-icon--size-xxl
  • .sf-icon--size-xl3
  • .sf-icon--size-xl4

# SCSS variables

$icon-sizes : (
    "xxs": 1rem,
    "xs": 1.4rem,
    "sm": 1.625rem,
    "md": 1.8rem,
    "lg": 2rem,
    "xl": 2.2rem,
    "xxl": 2.5rem,
    "xl3": 2.8rem,
    "xl4": 3.25rem
$icon-colors : (
    "primary" : $c-green-primary,
    "secondary": $c-dark-primary,
    "white": $c-white,
    "black": $c-black,
    "accent": $c-accent-secondary,
    "green-primary": $c-green-primary,
    "green-secondary": $c-green-secondary,
    "gray-primary": $c-gray-primary,
    "gray-secondary": $c-gray-secondary,
    "light-primary": $c-light-primary,
    "light-secondary": $c-light-secondary,
    "pink-primary": $c-pink-primary,
    "pink-secondary": $c-pink-secondary,
    "yellow-primary": $c-yellow-primary,
    "yellow-secondary": $c-yellow-secondary,
    "blue-primary": $c-blue-primary,
    "blue-secondary": $c-blue-secondary

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfIcon/SfIcon.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfIcon/SfIcon.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfIcon.scss";

You can read about using component partials here

# Play with this component

See all available configurations and play with this component on Storybook.