woocommerce/plugins/woocommerce-blocks/assets/js/icons
Mike Jolley bcac811d7c Fix es lint warnings (https://github.com/woocommerce/woocommerce-blocks/pull/4206)
* Un-used PropTypes import

* Avoid global and use ownerDocument

* receiveCart return type

* ignoreRestSiblings when destructuring for @typescript-eslint/no-unused-vars

* Replace lodash find

* Use global rather than window

* Remove lodash map

* move rule to overrides
2021-05-16 18:59:32 +01:00
..
icon Fix Circular Dependencies During Builds (https://github.com/woocommerce/woocommerce-blocks/pull/4025) 2021-04-08 13:31:12 +01:00
library Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) 2021-01-27 11:34:59 +00:00
stories Fix es lint warnings (https://github.com/woocommerce/woocommerce-blocks/pull/4206) 2021-05-16 18:59:32 +01:00
README.md add new icons and remove old ones (https://github.com/woocommerce/woocommerce-blocks/pull/1644) 2020-01-31 19:20:33 +01:00
index.js Add subtotal to cart and checkout and update the CartLineItem component with new styles (https://github.com/woocommerce/woocommerce-blocks/pull/3734) 2021-01-27 11:34:59 +00:00
tsconfig.json Add types to packages directory (https://github.com/woocommerce/woocommerce-blocks/pull/3914) 2021-03-05 14:03:48 +00:00

README.md

Icons

WooCommerce Blocks Icons Library.

Usage

import { Icon, bill, woo } from '@woocommerce/icons';

<Icon srcElement={ bill } />

<Icon srcElement={ bill } size={ 16 } />

<Icon srcElement={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />

Props

Name Type Default Description
size integer 24 Size of icon in pixels.

Adding Icons

  1. Add the icon file to ./library folder.
  2. Make sure to use SVG primitive from @wordpress/components and not a native svg. SVG offers more accessibility features.
  3. Remove width and height since they're handled by Icon.
  4. Remove any hardcoded colors on the svg. If necessary, use CurrentColor.
  5. Export the Icon in ./library/index.js.