New Icon component

[emersonlaurentino]

Overview

Icon component that allows you to define which icon (name), size and color to use.

Purpose

Having a single component called Icon that has 3 props:

• name
• size
• color

This component is smart to know which SVG to render, its size and its color.

Examples

Basic

import { Icon } from 'vtex.styleguide'

// search icon is rendered in standard size and parent color
<Icon name="search" />

Advanced

import { Icon, ThemeProvider } from 'vtex.styleguide'

const customTheme = {
  icons: {
    // The <path/> or <g> element for the svg. Note the use of  `fill=currentColor`
  search: {
    path: (
      <path
        fill="currentColor"
        d="M23.384,21.619,16.855,15.09a9.284,9.284,0,1,0-1.768,1.768l6.529,6.529a1.266,1.266,0,0,0,1.768,0A1.251,1.251,0,0,0,23.384,21.619ZM2.75,9.5a6.75,6.75,0,1,1,6.75,6.75A6.758,6.758,0,0,1,2.75,9.5Z"
      />
    ),
    // This is the viewBox of the icon.
    viewBox: '0 0 24 24',
  }
  },
}

// search icon is rendered from customTheme defined by the theme provider.
<ThemeProvider theme={customTheme}>
  <Icon name="search" />
</ThemeProvider>