From 9a92fd82fda09654e66841cc609e7f885d91bb7c Mon Sep 17 00:00:00 2001
From: Carsten Bach <mail@carsten-bach.de>
Date: Sat, 12 Oct 2024 01:31:21 +0200
Subject: [PATCH] NEW (admin only) Icon component

---
 package-lock.json      |  2 +-
 package.json           |  1 +
 src/components/Icon.js | 69 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Icon.js

diff --git a/package-lock.json b/package-lock.json
index cfa0149da..3c0092be3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,6 +29,7 @@
 				"@wordpress/env": "^10.9.0",
 				"@wordpress/eslint-plugin": "^21.2.0",
 				"@wordpress/i18n": "^5.9.0",
+				"@wordpress/icons": "^10.9.0",
 				"@wordpress/interactivity": "^6.9.0",
 				"@wordpress/plugins": "^7.9.0",
 				"@wordpress/scripts": "^30.1.0",
@@ -8456,7 +8457,6 @@
 			"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-10.9.0.tgz",
 			"integrity": "sha512-mAkqhlbbPiuR6yBOczunqyxQ2Pez1XB7gAZnnsP5DlTKsYnJQ12N0Ql4Oh8f1LI+UeF18VMtHes12sWK/1LQHQ==",
 			"dev": true,
-			"license": "GPL-2.0-or-later",
 			"dependencies": {
 				"@babel/runtime": "^7.16.0",
 				"@wordpress/element": "^6.9.0",
diff --git a/package.json b/package.json
index 7173e3550..a12a5a72a 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
 		"@wordpress/env": "^10.9.0",
 		"@wordpress/eslint-plugin": "^21.2.0",
 		"@wordpress/i18n": "^5.9.0",
+		"@wordpress/icons": "^10.9.0",
 		"@wordpress/interactivity": "^6.9.0",
 		"@wordpress/plugins": "^7.9.0",
 		"@wordpress/scripts": "^30.1.0",
diff --git a/src/components/Icon.js b/src/components/Icon.js
new file mode 100644
index 000000000..4cc982e4f
--- /dev/null
+++ b/src/components/Icon.js
@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies.
+ */
+import {
+	Icon as IconComponent,
+	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
+	__experimentalZStack as ZStack,
+} from '@wordpress/components';
+import { sprintf } from '@wordpress/i18n';
+
+/**
+ * Icon Component
+ *
+ * This functional component renders an icon depending on the passed `iconName` prop, and layers it with a "nametag" icon.
+ * The component leverages the WordPress `<Icon />` component for rendering both the main icon and the name tag icon.
+ *
+ * Component Structure:
+ * - `OtherIcon`: Renders the main icon using the passed `iconName`.
+ * - `NameTagIcon`: Always renders a fixed "nametag" icon.
+ * - Both icons are stacked using the `ZStack` component, allowing for a visually layered effect.
+ *
+ * Styling:
+ * - The name tag icon is styled using the accent color of
+ *   the currently selected WordPress admin color scheme
+ *   via the `--wp-components-color-accent` CSS variable.
+ *
+ * Example usage:
+ * ```jsx
+ * <Icon iconName="star" />
+ * ```
+ *
+ * Original reference from the WordPress `<Icon />` component:
+ * https://github.com/WordPress/gutenberg/blob/bbdf1a7f39dd75f672fe863c9d8ac7bf8faa874b/packages/components/src/icon/index.tsx#L54C2-L54C44
+ *
+ * @param {Object} props            - The props for the component.
+ * @param {string} [props.iconName] - The name of the icon to display.
+ *
+ * @return {JSX.Element} A rendered icon, optionally layered with a name tag.
+ */
+
+const {
+	Icon,
+} = ({ iconName }) => {
+	const BaseSize = 'string' === typeof iconName ? 20 : 24;
+	const NameTagSize = 12; // BaseSize/2;
+	const NameTagMargin = sprintf('-$%dpx', BaseSize / 4);
+
+	const NameTagIcon = () => (
+		<IconComponent icon={'nametag'} size={NameTagSize} />
+	);
+	const OtherIcon = () => <IconComponent icon={iconName} />;
+
+	return (
+		<ZStack offset={15} isLayered>
+			<OtherIcon />
+			<div
+				style={{
+					color: 'var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9))',
+					marginTop: NameTagMargin,
+					marginRight: NameTagMargin,
+				}}
+			>
+				<NameTagIcon />
+			</div>
+		</ZStack>
+	);
+};
+
+export { Icon };