add new icons and remove old ones

assets/js/atomic/blocks/product/button/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { Disabled } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import { Icon, cart } from '@woocommerce/icons';
 import { ProductButton } from '@woocommerce/atomic-components/product';
 
 /**
@@ -19,7 +19,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="cart" />,
+		src: <Icon srcElement={ cart } />,
 		foreground: '#96588a',
 	},
 	edit( props ) {

assets/js/atomic/blocks/product/image/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, image } from '@woocommerce/icons';
 import { Fragment } from '@wordpress/element';
 import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -23,7 +23,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="image" />,
+		src: <Icon srcElement={ image } />,
 		foreground: '#96588a',
 	},
 	attributes: {

assets/js/atomic/blocks/product/price/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, bill } from '@woocommerce/icons';
 import { ProductPrice } from '@woocommerce/atomic-components/product';
 
 /**
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="money" />,
+		src: <Icon srcElement={ bill } />,
 		foreground: '#96588a',
 	},
 

assets/js/atomic/blocks/product/rating/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, star } from '@woocommerce/icons';
 import { ProductRating } from '@woocommerce/atomic-components/product';
 
 /**
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="star-outline" />,
+		src: <Icon srcElement={ star } />,
 		foreground: '#96588a',
 	},
 

assets/js/atomic/blocks/product/sale-badge/index.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 import { ProductSaleBadge } from '@woocommerce/atomic-components/product';
-import { IconProductOnSale } from '@woocommerce/block-components/icons';
+import { Icon, tag } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <IconProductOnSale />,
+		src: <Icon srcElement={ tag } />,
 		foreground: '#96588a',
 	},
 	supports: {

assets/js/atomic/blocks/product/shared-config.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import Gridicon from 'gridicons';
+import { Icon, grid } from '@woocommerce/icons';
 import { previewProducts } from '@woocommerce/resource-previews';
 
 /**
@@ -12,7 +12,7 @@ export default {
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	icon: {
-		src: <Gridicon icon="grid" />,
+		src: <Icon srcElement={ grid } />,
 		foreground: '#96588a',
 	},
 	supports: {

assets/js/atomic/blocks/product/summary/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, notes } from '@woocommerce/icons';
 import { ProductSummary } from '@woocommerce/atomic-components/product';
 
 /**
@@ -18,7 +18,7 @@ const blockConfig = {
 		'woo-gutenberg-products-block'
 	),
 	icon: {
-		src: <Gridicon icon="aside" />,
+		src: <Icon srcElement={ notes } />,
 		foreground: '#96588a',
 	},
 

assets/js/base/components/checkout/no-shipping/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Placeholder, Button } from '@wordpress/components';
-import ShippingIcon from 'gridicons/dist/shipping';
+import { Icon, truck } from '@woocommerce/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 
 /**
@@ -14,7 +14,7 @@ import './style.scss';
 const NoShipping = () => {
 	return (
 		<Placeholder
-			icon={ <ShippingIcon /> }
+			icon={ <Icon srcElement={ truck } /> }
 			label={ __( 'Shipping options', 'woo-gutenberg-products-block' ) }
 			className="wc-block-checkout__no-shipping"
 		>

assets/js/blocks/active-filters/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, toggle } from '@woocommerce/icons';
 import classNames from 'classnames';
 
 /**
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/active-filters', {
 	title: __( 'Active Product Filters', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="list-checkmark" />,
+		src: <Icon srcElement={ toggle } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

assets/js/blocks/attribute-filter/edit.js

@@ -13,7 +13,7 @@ import {
 	Toolbar,
 	withSpokenMessages,
 } from '@wordpress/components';
-import Gridicon from 'gridicons';
+import { Icon, server, external } from '@woocommerce/icons';
 import { SearchListControl } from '@woocommerce/components';
 import { mapValues, toArray, sortBy, find } from 'lodash';
 import { ATTRIBUTES } from '@woocommerce/block-settings';
@@ -26,7 +26,6 @@ import BlockTitle from '@woocommerce/block-components/block-title';
  */
 import Block from './block.js';
 import './editor.scss';
-import { IconExternal } from '../../components/icons';
 import ToggleButtonControl from '../../components/toggle-button-control';
 
 const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
@@ -221,7 +220,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 	const noAttributesPlaceholder = () => (
 		<Placeholder
 			className="wc-block-attribute-filter"
-			icon={ <Gridicon icon="menus" /> }
+			icon={ <Icon srcElement={ server } /> }
 			label={ __(
 				'Filter Products by Attribute',
 				'woo-gutenberg-products-block'
@@ -247,7 +246,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 			>
 				{ __( 'Add new attribute', 'woo-gutenberg-products-block' ) +
 					' ' }
-				<IconExternal />
+				<Icon srcElement={ external } />
 			</Button>
 			<Button
 				className="wc-block-attribute-filter__read_more_button"
@@ -358,7 +357,7 @@ const Edit = ( { attributes, setAttributes, debouncedSpeak } ) => {
 		return (
 			<Placeholder
 				className="wc-block-attribute-filter"
-				icon={ <Gridicon icon="menus" /> }
+				icon={ <Icon srcElement={ server } /> }
 				label={ __(
 					'Filter Products by Attribute',
 					'woo-gutenberg-products-block'

assets/js/blocks/attribute-filter/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import Gridicon from 'gridicons';
+import { Icon, server } from '@woocommerce/icons';
 import classNames from 'classnames';
 
 /**
@@ -14,7 +14,7 @@ import edit from './edit.js';
 registerBlockType( 'woocommerce/attribute-filter', {
 	title: __( 'Filter Products by Attribute', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="menus" />,
+		src: <Icon srcElement={ server } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

assets/js/blocks/cart-checkout/cart/full-cart/cart-line-item-row.js

@@ -7,7 +7,7 @@ import PropTypes from 'prop-types';
 import QuantitySelector from '@woocommerce/base-components/quantity-selector';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import { getCurrency, formatPrice } from '@woocommerce/base-utils';
-import { IconTrash } from '@woocommerce/block-components/icons';
+import { Icon, trash } from '@woocommerce/icons';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -127,7 +127,7 @@ const CartLineItemRow = ( { lineItem } ) => {
 					{ __( 'Remove item', 'woo-gutenberg-products-block' ) }
 				</button>
 				<button className="wc-block-cart-item__remove-icon">
-					<IconTrash />
+					<Icon srcElement={ trash } />
 				</button>
 			</td>
 			<td className="wc-block-cart-item__total">

assets/js/blocks/cart-checkout/cart/index.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
+import { Icon, cart } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +19,7 @@ import './style.scss';
 registerBlockType( 'woocommerce/cart', {
 	title: __( 'Cart', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: 'cart',
+		src: <Icon srcElement={ cart } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

assets/js/blocks/cart-checkout/checkout/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
+import { Icon, card } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -14,10 +15,8 @@ import './editor.scss';
 registerBlockType( 'woocommerce/checkout', {
 	title: __( 'Checkout', 'woo-gutenberg-products-block' ),
 	icon: {
-		// @todo: Replace this once we have an icon for the checkout
-		src: 'cart',
-		// @todo: Revert this to #96588a once we have an icon for the checkout
-		foreground: '#555d66',
+		src: <Icon srcElement={ card } />,
+		foreground: '#96588a',
 	},
 	category: 'woocommerce',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],

assets/js/blocks/featured-category/block.js

@@ -31,7 +31,7 @@ import { Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import PropTypes from 'prop-types';
 import { MIN_HEIGHT } from '@woocommerce/block-settings';
-import { IconFolderStar } from '@woocommerce/block-components/icons';
+import { Icon, FolderStarred } from '@woocommerce/icons';
 import ProductCategoryControl from '@woocommerce/block-components/product-category-control';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
 
@@ -190,7 +190,7 @@ const FeaturedCategory = ( {
 
 		return (
 			<Placeholder
-				icon={ <IconFolderStar /> }
+				icon={ <Icon srcElement={ FolderStarred } /> }
 				label={ __(
 					'Featured Category',
 					'woo-gutenberg-products-block'
@@ -337,7 +337,7 @@ const FeaturedCategory = ( {
 	const renderNoCategory = () => (
 		<Placeholder
 			className="wc-block-featured-category"
-			icon={ <IconFolderStar /> }
+			icon={ <Icon srcElement={ FolderStarred } /> }
 			label={ __( 'Featured Category', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (

assets/js/blocks/featured-category/index.js

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
-import { IconFolderStar } from '@woocommerce/block-components/icons';
+import { Icon, FolderStarred } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -21,7 +21,7 @@ import { example } from './example';
 registerBlockType( 'woocommerce/featured-category', {
 	title: __( 'Featured Category', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <IconFolderStar />,
+		src: <Icon srcElement={ FolderStarred } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

assets/js/blocks/featured-product/block.js

@@ -35,6 +35,7 @@ import { MIN_HEIGHT } from '@woocommerce/block-settings';
 import ProductControl from '@woocommerce/block-components/product-control';
 import ErrorPlaceholder from '@woocommerce/block-components/error-placeholder';
 import { withProduct } from '@woocommerce/block-hocs';
+import { Icon, star } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -84,7 +85,7 @@ const FeaturedProduct = ( {
 			<Fragment>
 				{ getBlockControls() }
 				<Placeholder
-					icon="star-filled"
+					icon={ <Icon srcElement={ star } /> }
 					label={ __(
 						'Featured Product',
 						'woo-gutenberg-products-block'
@@ -382,7 +383,7 @@ const FeaturedProduct = ( {
 	const renderNoProduct = () => (
 		<Placeholder
 			className="wc-block-featured-product"
-			icon="star-filled"
+			icon={ <Icon srcElement={ star } /> }
 			label={ __( 'Featured Product', 'woo-gutenberg-products-block' ) }
 		>
 			{ isLoading ? (

assets/js/blocks/featured-product/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { DEFAULT_HEIGHT } from '@woocommerce/block-settings';
+import { Icon, star } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -20,7 +21,7 @@ import Block from './block';
 registerBlockType( 'woocommerce/featured-product', {
 	title: __( 'Featured Product', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: 'star-filled',
+		src: <Icon srcElement={ star } />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

assets/js/blocks/handpicked-products/block.js

@@ -21,10 +21,10 @@ import { Component, Fragment } from '@wordpress/element';
 import PropTypes from 'prop-types';
 import { MAX_COLUMNS, MIN_COLUMNS } from '@woocommerce/block-settings';
 import GridContentControl from '@woocommerce/block-components/grid-content-control';
-import { IconWidgets } from '@woocommerce/block-components/icons';
 import ProductsControl from '@woocommerce/block-components/products-control';
 import ProductOrderbyControl from '@woocommerce/block-components/product-orderby-control';
 import { gridBlockPreview } from '@woocommerce/resource-previews';
+import { Icon, widgets } from '@woocommerce/icons';
 
 /**
  * Component to handle edit mode of "Hand-picked Products".
@@ -129,7 +129,7 @@ class ProductsBlock extends Component {
 
 		return (
 			<Placeholder
-				icon={ <IconWidgets /> }
+				icon={ <Icon srcElement={ widgets } /> }
 				label={ __(
 					'Hand-picked Products',
 					'woo-gutenberg-products-block'