From 0847c20f7901f13b287d3d726d46225f067777c8 Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Fri, 19 May 2023 12:09:13 -0300
Subject: [PATCH] Remove the fill color of the Product Details icon and move it
 to the icons library
 (https://github.com/woocommerce/woocommerce-blocks/pull/9503)

---
 .../product-details/index.tsx                 | 19 ++++++-------
 .../assets/js/icons/index.js                  |  1 +
 .../js/icons/library/product-details.tsx      | 27 +++++++++++++++++++
 .../product-details/product-details-icon.svg  |  5 ----
 4 files changed, 36 insertions(+), 16 deletions(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/icons/library/product-details.tsx
 delete mode 100644 plugins/woocommerce-blocks/images/blocks/product-details/product-details-icon.svg

diff --git a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx
index 0ffdc64d2b5..9be38da808f 100644
--- a/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/index.tsx
@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
-import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { Icon } from '@wordpress/icons';
+import { productDetails } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -16,16 +17,12 @@ registerBlockSingleProductTemplate( {
 	blockMetadata: metadata,
 	blockSettings: {
 		icon: {
-			src: () => {
-				return (
-					<>
-						<img
-							src={ `${ WC_BLOCKS_IMAGE_URL }/blocks/product-details/product-details-icon.svg` }
-							alt=""
-						/>
-					</>
-				);
-			},
+			src: (
+				<Icon
+					icon={ productDetails }
+					className="wc-block-editor-components-block-icon"
+				/>
+			),
 		},
 		edit,
 		ancestor: [ 'woocommerce/single-product' ],
diff --git a/plugins/woocommerce-blocks/assets/js/icons/index.js b/plugins/woocommerce-blocks/assets/js/icons/index.js
index 70acf6bdd56..0641668b871 100644
--- a/plugins/woocommerce-blocks/assets/js/icons/index.js
+++ b/plugins/woocommerce-blocks/assets/js/icons/index.js
@@ -17,3 +17,4 @@ export { default as Alert } from './library/alert';
 export { default as customerAccount } from './library/customer-account';
 export { default as customerAccountStyle } from './library/customer-account-style';
 export { default as customerAccountStyleAlt } from './library/customer-account-style-alt';
+export { default as productDetails } from './library/product-details';
diff --git a/plugins/woocommerce-blocks/assets/js/icons/library/product-details.tsx b/plugins/woocommerce-blocks/assets/js/icons/library/product-details.tsx
new file mode 100644
index 00000000000..ac02ff8667e
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/icons/library/product-details.tsx
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { SVG } from '@wordpress/primitives';
+
+const productDetails = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			fill="currentColor"
+			d="M5 5.5H19C19.1326 5.5 19.2598 5.55268 19.3536 5.64645C19.4473 5.74021 19.5 5.86739 19.5 6V7.5C19.5 7.63261 19.4473 7.75979 19.3536 7.85355C19.2598 7.94732 19.1326 8 19 8H5C4.86739 8 4.74021 7.94732 4.64645 7.85355C4.55268 7.75979 4.5 7.63261 4.5 7.5V6C4.5 5.86739 4.55268 5.74021 4.64645 5.64645C4.74021 5.55268 4.86739 5.5 5 5.5V5.5ZM4 9.232C3.69597 9.05647 3.4435 8.804 3.26796 8.49997C3.09243 8.19594 3.00001 7.85106 3 7.5V6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4H19C19.5304 4 20.0391 4.21071 20.4142 4.58579C20.7893 4.96086 21 5.46957 21 6V7.5C21 7.85106 20.9076 8.19594 20.732 8.49997C20.5565 8.804 20.304 9.05647 20 9.232V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V9.232ZM5.5 9.5V18C5.5 18.1326 5.55268 18.2598 5.64645 18.3536C5.74021 18.4473 5.86739 18.5 6 18.5H18C18.1326 18.5 18.2598 18.4473 18.3536 18.3536C18.4473 18.2598 18.5 18.1326 18.5 18V9.5H5.5Z"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8 13.25V11.75H16V13.25L8 13.25Z"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M8 16.25V14.75H16V16.25H8Z"
+		/>
+	</SVG>
+);
+
+export default productDetails;
diff --git a/plugins/woocommerce-blocks/images/blocks/product-details/product-details-icon.svg b/plugins/woocommerce-blocks/images/blocks/product-details/product-details-icon.svg
deleted file mode 100644
index ef2a705b50b..00000000000
--- a/plugins/woocommerce-blocks/images/blocks/product-details/product-details-icon.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 5.5H19C19.1326 5.5 19.2598 5.55268 19.3536 5.64645C19.4473 5.74021 19.5 5.86739 19.5 6V7.5C19.5 7.63261 19.4473 7.75979 19.3536 7.85355C19.2598 7.94732 19.1326 8 19 8H5C4.86739 8 4.74021 7.94732 4.64645 7.85355C4.55268 7.75979 4.5 7.63261 4.5 7.5V6C4.5 5.86739 4.55268 5.74021 4.64645 5.64645C4.74021 5.55268 4.86739 5.5 5 5.5V5.5ZM4 9.232C3.69597 9.05647 3.4435 8.804 3.26796 8.49997C3.09243 8.19594 3.00001 7.85106 3 7.5V6C3 5.46957 3.21071 4.96086 3.58579 4.58579C3.96086 4.21071 4.46957 4 5 4H19C19.5304 4 20.0391 4.21071 20.4142 4.58579C20.7893 4.96086 21 5.46957 21 6V7.5C21 7.85106 20.9076 8.19594 20.732 8.49997C20.5565 8.804 20.304 9.05647 20 9.232V18C20 18.5304 19.7893 19.0391 19.4142 19.4142C19.0391 19.7893 18.5304 20 18 20H6C5.46957 20 4.96086 19.7893 4.58579 19.4142C4.21071 19.0391 4 18.5304 4 18V9.232ZM5.5 9.5V18C5.5 18.1326 5.55268 18.2598 5.64645 18.3536C5.74021 18.4473 5.86739 18.5 6 18.5H18C18.1326 18.5 18.2598 18.4473 18.3536 18.3536C18.4473 18.2598 18.5 18.1326 18.5 18V9.5H5.5Z" fill="black"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 13.25V11.75H16V13.25L8 13.25Z" fill="#1E1E1E"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16.25V14.75H16V16.25H8Z" fill="#1E1E1E"/>
-</svg>