From b938eb88f90129c8a85f8dcfe228bf4bd0014b01 Mon Sep 17 00:00:00 2001
From: Chi-Hsuan Huang <chihsuan.tw@gmail.com>
Date: Wed, 27 Apr 2022 18:32:20 +0800
Subject: [PATCH] Update icons

---
 .../tasks/fills/experimental-products/constants.tsx  | 12 +++++++++---
 .../fills/experimental-products/icon/link_24px.svg   |  8 ++++++++
 .../experimental-products/icon/widgets_24px.svg      |  8 ++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg
 create mode 100644 plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg

diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx
index 6b889b9275e..59014681ab3 100644
--- a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/constants.tsx
@@ -6,7 +6,13 @@ import ProductIcon from 'gridicons/dist/product';
 import CloudOutlineIcon from 'gridicons/dist/cloud-outline';
 import TypesIcon from 'gridicons/dist/types';
 import CalendarIcon from 'gridicons/dist/calendar';
-import { Icon, chevronRight, widget, link } from '@wordpress/icons';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Link from './icon/link_24px.svg';
+import Widget from './icon/widgets_24px.svg';
 
 export const productTypes = Object.freeze( [
 	{
@@ -53,14 +59,14 @@ export const productTypes = Object.freeze( [
 		key: 'grouped' as const,
 		title: __( 'Grouped product', 'woocommerce' ),
 		content: __( 'A collection of related products.', 'woocommerce' ),
-		before: <Icon icon={ widget } />,
+		before: <img src={ Widget } alt="Widget" />,
 		after: <Icon icon={ chevronRight } />,
 	},
 	{
 		key: 'external' as const,
 		title: __( 'External product', 'woocommerce' ),
 		content: __( 'Link a product to an external website.', 'woocommerce' ),
-		before: <Icon icon={ link } />,
+		before: <img src={ Link } alt="Link" />,
 		after: <Icon icon={ chevronRight } />,
 	},
 ] );
diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg
new file mode 100644
index 00000000000..4212c9877e7
--- /dev/null
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/link_24px.svg
@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1133_132681" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="7" width="21" height="10">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 15H7.5C5.85 15 4.5 13.65 4.5 12C4.5 10.35 5.85 9 7.5 9H11.5V7H7.5C4.74 7 2.5 9.24 2.5 12C2.5 14.76 4.74 17 7.5 17H11.5V15ZM17.5 7H13.5V9H17.5C19.15 9 20.5 10.35 20.5 12C20.5 13.65 19.15 15 17.5 15H13.5V17H17.5C20.26 17 22.5 14.76 22.5 12C22.5 9.24 20.26 7 17.5 7ZM16.5 11H8.5V13H16.5V11Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1133_132681)">
+<rect x="0.5" width="24" height="24" fill="#007CBA"/>
+</g>
+</svg>
diff --git a/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg
new file mode 100644
index 00000000000..d8421e726dd
--- /dev/null
+++ b/plugins/woocommerce-admin/client/tasks/fills/experimental-products/icon/widgets_24px.svg
@@ -0,0 +1,8 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_1133_132667" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="21" height="20">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 2.34497L10.84 7.99497V3.65497H2.84003V11.655H10.84V7.99497L16.5 13.655H12.84V21.655H20.84V13.655H16.5L22.16 7.99497L16.5 2.34497ZM19.33 8.00497L16.5 5.17497L13.67 8.00497L16.5 10.835L19.33 8.00497ZM8.84003 9.65497V5.65497H4.84003V9.65497H8.84003ZM18.84 15.655V19.655H14.84V15.655H18.84ZM8.84003 19.655V15.655H4.84003V19.655H8.84003ZM2.84003 13.655H10.84V21.655H2.84003V13.655Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1133_132667)">
+<rect x="0.5" width="24" height="24" fill="#007CBA"/>
+</g>
+</svg>