Add copy to clipboard to docs icons (#412)

Co-authored-by: Yan Thomas <[email protected]>
Co-authored-by: Chris Swithinbank <[email protected]>

docs/src/components/icons-list.astro

@@ -9,15 +9,34 @@ const icons = Object.keys(Icons) as (keyof typeof Icons)[];
 	{
 		icons.map((icon) => {
 			return (
-				<div class="icon-preview">
+				<button class="icon-preview" aria-label={`Copy ${icon} icon to clipboard`} data-name={icon}>
 					<Icon name={icon} size="1.5rem" />
-					<span>{icon}</span>
-				</div>
+					<span aria-live="polite">{icon}</span>
+				</button>
 			);
 		})
 	}
 </div>
 
+<script>
+  const icons = document.querySelectorAll('.icon-preview');
+  icons.forEach((icon) => {
+    icon.addEventListener('click', () => {
+      const iconName = icon.dataset.name;
+      const copiedValue = `<Icon name="${iconName}" />`;
+      navigator.clipboard.writeText(copiedValue);
+
+      const iconLabel = icon.querySelector('[aria-live]');
+      if (iconLabel) {
+        iconLabel.textContent = 'Copied!';
+        setTimeout(() => {
+          iconLabel.textContent = iconName;
+        }, 1000);
+      }
+    });
+  });
+</script>
+
 <style>
 	.icons-grid {
 		display: grid;
@@ -36,5 +55,12 @@ const icons = Object.keys(Icons) as (keyof typeof Icons)[];
 		gap: 0.25rem;
 		margin: 0;
 		padding: 0.75rem;
+		background: none;
+	}
+
+	.icon-preview:hover, .icon-preview:focus {
+		cursor: pointer;
+		border: 1px solid var(--sl-color-gray-3);
+		background: var(--sl-color-gray-7, var(--sl-color-gray-6));
 	}
 </style>

docs/src/content/docs/guides/components.mdx

@@ -146,6 +146,6 @@ The code above generates the following on the page:
 
 #### All icons
 
-A list of all available icons is shown below with their associated names.
+A list of all available icons is shown below with their associated names. Click an icon to copy the component code for it.
 
 <IconsList />