HomeStarbucks Pattern Library

Icon Set

A global set of icons for use with the Icon component.

Each of these icons can be individually imported as a path for use in the Icon component from lib/icons/[path-name]. For example:

import mobileOrderPay
  from '@cxeweb/pattern-library/lib/icons/mobile-order-pay';

<Icon path={ mobileOrderPay } />

Icon

Notes

Renders SVG icons from paths. Global icon paths are available for usage in lib/icons/[path-name]. For example:

import mobileOrderPay
  from '@cxeweb/pattern-library/lib/icons/mobile-order-pay';

<Icon path={ mobileOrderPay } />

Props

  • classNamestring
  • pathoneOfType(string, arrayOf)

    An SVG icon path string or array of path strings to be rendered. If paths require individual styling, use IconPath children instead.

  • defaultHoverStylingbool

    Prop indicating whether or not to use sb-icon-hover class

  • sizestring['24px']

    A size for the rendered icon, including a unit (px, em, %, etc). All icons are rendered as squares.

  • styleobject
  • viewBoxstring['0 0 24 24']
  • isInteractivebool

    If the icon exists as a button or link, we need to provide feedback on hover and active state for the user. When true, adds a circle with the class sb-icon-hover. Using the component IconButton will handle this.

<div>

  <Icon

    path={ iconPaths.digitalRewards }

    size='60px'

  />

</div>

IconPath

Notes

Renders an SVG path within an Icon. Allows styling of individual icon paths.

Props

  • pathstring
<div>

  <Icon size="60px">

    <IconPath path={iconPaths.minusCircle[0]} className="color-gold" />

    <IconPath path={iconPaths.caretDown} className="color-greenAccent" />

  </Icon>

</div>;

Siren

Notes

An SVG of the Starbucks logo. The size, background, and foreground colors of the Siren are configurable through props.

Props

  • backgroundColorstring['#fff']
  • colorstring['#006341']
  • sizestring['50px']
<Siren />