Update Products on Sale and Products Tag icons (https://github.com/woocommerce/woocommerce-blocks/pull/987)

* Update Products on Sale and Products Tag icons

* Update on sale icon

plugins/woocommerce-blocks/assets/js/blocks/product-on-sale/index.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { createBlock, registerBlockType } from '@wordpress/blocks';
 import { without } from 'lodash';
-import Gridicon from 'gridicons';
 
 /**
  * Internal dependencies
@@ -14,11 +13,12 @@ import { deprecatedConvertToShortcode } from '../../utils/deprecations';
 import sharedAttributes, {
 	sharedAttributeBlockTypes,
 } from '../../utils/shared-attributes';
+import { IconProductOnSale } from '../../components/icons';
 
 registerBlockType( 'woocommerce/product-on-sale', {
 	title: __( 'On Sale Products', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: <Gridicon icon="tag" />,
+		src: <IconProductOnSale />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

plugins/woocommerce-blocks/assets/js/blocks/product-tag/block.js

@@ -26,6 +26,7 @@ import GridContentControl from '../../components/grid-content-control';
 import GridLayoutControl from '../../components/grid-layout-control';
 import ProductTagControl from '../../components/product-tag-control';
 import ProductOrderbyControl from '../../components/product-orderby-control';
+import { IconProductTag } from '../../components/icons';
 
 /**
  * Component to handle edit mode of "Products by Tag".
@@ -179,7 +180,7 @@ class ProductsByTagBlock extends Component {
 
 		return (
 			<Placeholder
-				icon="tag"
+				icon={ <IconProductTag className="block-editor-block-icon" /> }
 				label={ __(
 					'Products by Tag',
 					'woo-gutenberg-products-block'
@@ -230,7 +231,9 @@ class ProductsByTagBlock extends Component {
 					/>
 				) : (
 					<Placeholder
-						icon="tag"
+						icon={
+							<IconProductTag className="block-editor-block-icon" />
+						}
 						label={ __(
 							'Products by Tag',
 							'woo-gutenberg-products-block'
@@ -276,7 +279,9 @@ class ProductsByTagBlock extends Component {
 					</Fragment>
 				) : (
 					<Placeholder
-						icon="tag"
+						icon={
+							<IconProductTag className="block-editor-block-icon" />
+						}
 						label={ __(
 							'Products by Tag',
 							'woo-gutenberg-products-block'

plugins/woocommerce-blocks/assets/js/blocks/product-tag/index.js

@@ -10,6 +10,7 @@ import { DEFAULT_COLUMNS, DEFAULT_ROWS } from '@woocommerce/block-settings';
  */
 import './editor.scss';
 import Block from './block';
+import { IconProductTag } from '../../components/icons';
 
 /**
  * Register and run the "Products by Tag" block.
@@ -17,7 +18,7 @@ import Block from './block';
 registerBlockType( 'woocommerce/product-tag', {
 	title: __( 'Products by Tag', 'woo-gutenberg-products-block' ),
 	icon: {
-		src: 'tag',
+		src: <IconProductTag />,
 		foreground: '#96588a',
 	},
 	category: 'woocommerce',

plugins/woocommerce-blocks/assets/js/components/icons/index.js

@@ -4,7 +4,9 @@ export { default as IconCheckChecked } from './checkbox-checked';
 export { default as IconCheckUnchecked } from './checkbox-unchecked';
 export { default as IconFolder } from './folder';
 export { default as IconFolderStar } from './folder-star';
+export { default as IconProductOnSale } from './product-on-sale';
 export { default as IconProductSearch } from './product-search';
+export { default as IconProductTag } from './product-tag';
 export { default as IconNewReleases } from './new-releases';
 export { default as IconRadioSelected } from './radio-selected';
 export { default as IconRadioUnselected } from './radio-unselected';

plugins/woocommerce-blocks/assets/js/components/icons/product-on-sale.js

@@ -0,0 +1,20 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+export default ( { className } ) => (
+	<Icon
+		className={ className }
+		icon={
+			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path d="M21.5,0h-9.3L0.8,11.4c-1,1-1,2.6,0,3.6L9,23.2c1,1,2.6,1,3.6,0c0,0,0,0,0,0L24,11.9V2.5C24,1.1,22.9,0,21.5,0z" />
+				<circle fill="#fff" cx="18.1" cy="5.8" r="2.5" />
+				<path
+					fill="#fff"
+					d="M5.8,10.5C5.8,10,6,9.6,6.3,9.2s0.8-0.5,1.3-0.5c0.6,0,1,0.2,1.3,0.5s0.5,0.8,0.5,1.3V11 c0,0.5-0.2,1-0.5,1.3s-0.8,0.5-1.3,0.5c-0.6,0-1-0.2-1.3-0.5s-0.5-0.8-0.5-1.3V10.5z M7,11c0,0.2,0.1,0.4,0.2,0.6 s0.3,0.2,0.5,0.2s0.4-0.1,0.5-0.2s0.2-0.3,0.2-0.6v-0.4c0-0.2-0.1-0.4-0.2-0.6S7.9,9.7,7.7,9.7c-0.2,0-0.4,0.1-0.5,0.2 S7,10.3,7,10.5V11z M8,16.8l-0.8-0.4l4.2-6.7l0.8,0.4L8,16.8z M9.9,15.3c0-0.5,0.2-1,0.5-1.3s0.8-0.5,1.3-0.5 c0.6,0,1,0.2,1.3,0.5s0.5,0.8,0.5,1.3v0.4c0,0.5-0.2,0.9-0.5,1.3s-0.8,0.5-1.3,0.5c-0.6,0-1-0.2-1.4-0.5s-0.5-0.8-0.5-1.3V15.3z  M11,15.8c0,0.2,0.1,0.4,0.2,0.6s0.3,0.2,0.5,0.2c0.5,0,0.7-0.3,0.7-0.8v-0.4c0-0.2-0.1-0.4-0.2-0.6s-0.3-0.2-0.5-0.2 s-0.4,0.1-0.5,0.2S11,15.1,11,15.3V15.8z"
+				/>
+			</svg>
+		}
+	/>
+);

plugins/woocommerce-blocks/assets/js/components/icons/product-tag.js

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { Icon } from '@wordpress/components';
+
+export default ( { className } ) => (
+	<Icon
+		className={ className }
+		icon={
+			<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path d="M21.45,0H12.14L.75,11.4A2.55,2.55,0,0,0,.75,15L9,23.25a2.55,2.55,0,0,0,3.61,0L24,11.86V2.55A2.55,2.55,0,0,0,21.45,0Z" />
+				<circle fill="#fff" cx="18.07" cy="5.75" r="2.47" />
+				<path
+					fill="#fff"
+					d="M9.27,9.53c-.14-.53.19-.85.72-.72l3.17.82a1.83,1.83,0,0,1,1.21,1.21L15.19,14c.13.53-.19.86-.72.72l-3.17-.81a1.9,1.9,0,0,1-1.22-1.22Z"
+				/>
+				<path
+					fill="#fff"
+					d="M14.14,15.71a.52.52,0,0,1,.26,1L12.09,19a1.94,1.94,0,0,1-1.68.46l-3.16-.81a.52.52,0,0,1-.26-1L9.3,15.36A1.93,1.93,0,0,1,11,14.9Z"
+				/>
+				<path
+					fill="#fff"
+					d="M8.29,9.86a.52.52,0,0,0-1-.26L5,11.91a1.94,1.94,0,0,0-.46,1.68l.81,3.16a.52.52,0,0,0,1,.26L8.64,14.7A1.93,1.93,0,0,0,9.1,13Z"
+				/>
+			</svg>
+		}
+	/>
+);