woocommerce/plugins/woocommerce-blocks/assets/js/icons
Thomas Roberts 852333c867 Update `PaymentMethodIcons`, and `CheckoutButton` components to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/4376)
* Change PlaceOrderButton to TypeScript

* Change type on Icon to allow attributes from image/svg elements

* Convert PaymentMethodLabel to TypeScript

* Add PaymentMethodIcon type

* Update utils (normalizeIconConfig) to TypeScript

* Update CheckoutButton to TypeScript

* Add types folder to tsconfig

* Convert PaymentMethodIcon to TypeScript

* Convert PaymentMethodIcons to TypeScript

* Convert common-icons to TypeScript
2021-08-20 07:55:30 -04:00
..
icon Update `PaymentMethodIcons`, and `CheckoutButton` components to TypeScript (https://github.com/woocommerce/woocommerce-blocks/pull/4376) 2021-08-20 07:55:30 -04:00
library WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) 2021-07-22 12:03:00 +01:00
stories Fix es lint warnings (https://github.com/woocommerce/woocommerce-blocks/pull/4206) 2021-05-16 18:59:32 +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 WIP - Checkout i2 Feature Branch Tracking (https://github.com/woocommerce/woocommerce-blocks/pull/4268) 2021-07-22 12:03:00 +01: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.