8ee74ede0e
* replace capitalized Woo.com with WooCommerce.com * replace http URLs * replace https URLs * replace developer.woo.com * add missing version in `@since` tag * unslash the HTTP_REFERER * WordPress.Security.ValidatedSanitizedInput.InputNotSanitized * add changelog file * add more changelog files * address linter errors * address more linter errors * fix test * more linter errors |
||
|---|---|---|
| .. | ||
| docs | ||
| library | ||
| README.md | ||
| index.js | ||
README.md
Icons
Table of contents
WooCommerce Blocks Icons Library.
Usage
Note we use the Icon component from @wordpress/icons. We use some SVG icons from @woocommerce/icons for WC Blocks specific icons, but we also use existing icons from @wordpress/icons.
import { woo } from '@woocommerce/icons';
import { Icon, postComments } from '@wordpress/icons';
<Icon icon={ woo } /> // icon from '@woocommerce/icons'
<Icon icon={ postComments } /> // icon from '@wordpress/icons'
<Icon icon={ woo } size={ 16 } />
<Icon icon={ woo } width={ 20 } height={ Math.floor( 20 * 1.67 ) } />
Adding Icons
Before adding a new icon, make sure the icon is not already included in the Library that comes with @wordpress/icons package. If there is no existing icon suitable:
- Add the icon file to
./libraryfolder. - Make sure to use
SVGprimitive from@wordpress/primitivesand not a native svg.SVGoffers more accessibility features. - Remove width and height since they're handled by Icon.
- Remove any hardcoded colors on the svg. If necessary, use
CurrentColor. - Export the Icon in
./library/index.js.
We're hiring! Come work with us!
🐞 Found a mistake, or have a suggestion? Leave feedback about this document here.