2d506f9f57
* Remove lodash `without` usage * isNumber * Remove lodash `difference` * Replace lodash isEmpty with type guard * Replace isObject with type guard * remove lodash noop * Replace lodash clamp * replace lodash uniqueId * Remove uniqueId import * Add eslint rule to restrict lodash import * Replace lodash range * Replace lodash has() function Replace lodash has * replace omitby * Replace lodash isEqual with fastDeepEqual * Replace kebabCase with change-case package * Replace lodash camelCase Replace lodash mapKeys with function Move mapkeys to utility Create camelCaseKeys which replaces usage of mapKeys * Replace lodash debounce with custom utiity * replace lodash keyby * Replace lodash pick with native function * Replace lodash cloneDeep with klona * Replace snake case keys package with change case * Replace sortBy with fast sort package * replace isEmpty with type guard * Replace pickBy usage in validation reducer * Replace groupBy usage in search list control * Replace flatten, uniqBy usage in getProducts() * Remove setWith and clone from updateState * Replace custom useThrottle with useThrottledCallback from use-debounce package * onSelectRate can use-debounce * Fix missing flatten * Update assets/js/data/cart/test/push-changes.ts Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> --------- Co-authored-by: Paulo Arromba <17236129+wavvves@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| library | ||
| stories | ||
| 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.