a223af0ad5
* Add empty 'Customer Account' block * Add edit to render the block on the editor * Add Customer Account icon to @woocommerce/icons library This icon is used in the Customer Account block. * Use customerAccount icon in the Customer Account block * Add Block Settings to Customer Account block Add Typography and Color settings to the Customer Account block that can be used during Edit mode. * Add Customer Account style icons This adds the customer account style icons to be used by the customer account block. * Render the block in the frontend * Add Display setting to the Customer Account block This setting allow users to choose if they want to include an icon with the customer account link. * Add icon style selector to Display settings This adds an icon style selector in which users can choose the customer account link icon. * Display on the frontend depending on the icon style * Rename attributes * Refactor block rendering * Improve styling * Make the account link dynamic * Add alignment menu * Get dashboardUrl with getSettings and add fallback * Add link to account settings * Add tests * Fix test * Change display title * Split css file * Switch to SSR * Add styles to the front end * Address latest feedback * Remove experimental flag Co-authored-by: Alexandre Lara <allexandrelara@gmail.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
./library
folder. - Make sure to use
SVG
primitive from@wordpress/primitives
and not a native svg.SVG
offers 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.