woocommerce/plugins/woocommerce-blocks/assets/js/icons
M. L. Giannotta 12bb68d970 Storybook and TS migration of `Icon` component (https://github.com/woocommerce/woocommerce-blocks/pull/5291)
* Migrate icons to TypeScript

* Fix `Icons` stories (https://github.com/woocommerce/woocommerce-blocks/pull/5257)

* Enable the correct controls
* Include a base story with a default icon and all controls
* Include a second story with the filterable icons library (no controls)

Fix woocommerce/woocommerce-blocks#5257
2021-12-02 17:56:53 +01:00
..
icon Storybook and TS migration of `Icon` component (https://github.com/woocommerce/woocommerce-blocks/pull/5291) 2021-12-02 17:56:53 +01:00
library Storybook and TS migration of `Icon` component (https://github.com/woocommerce/woocommerce-blocks/pull/5291) 2021-12-02 17:56:53 +01:00
stories Storybook and TS migration of `Icon` component (https://github.com/woocommerce/woocommerce-blocks/pull/5291) 2021-12-02 17:56:53 +01:00
README.md Update Dependencies to Latest Versions supporting React 16x (https://github.com/woocommerce/woocommerce-blocks/pull/4532) 2021-08-05 10:26:00 +01:00
index.js Fix: Mini Cart block: update button style (https://github.com/woocommerce/woocommerce-blocks/pull/4907) 2021-10-29 09:35:17 +07: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.