Add copy SVG to clipboard option on icon click

package.json

@@ -14,10 +14,11 @@
     "export-to-csv": "node ./scripts/export-to-csv.js -f ./dist/codicon.ttf          > ./dist/codicon.csv",
     "copy-metadata": "cp ./src/template/metadata.json ./dist/metadata.json",
     "embed-metadata": "node ./scripts/embed-metadata.js",
+    "embed-svg-data": "node ./scripts/embed-svg-data.js",
     "check-metadata": "node ./scripts/check-metadata.js",
     "fonts": "fantasticon",
     "dev": "npm run build && npm run replace-in-vscode",
-    "build": "npm run clean && npm run svgo && npm run fonts && npm run export-to-ts && npm run export-to-csv && npm run copy-metadata && npm run embed-metadata && npm run sprite",
+    "build": "npm run clean && npm run svgo && npm run fonts && npm run export-to-ts && npm run export-to-csv && npm run copy-metadata && npm run embed-metadata && npm run embed-svg-data && npm run sprite",
     "version:bump": "node ./scripts/version-bump.js",
     "version:patch": "node ./scripts/version-bump.js patch minor",
     "version:minor": "node ./scripts/version-bump.js minor minor",

scripts/embed-svg-data.js

@@ -0,0 +1,31 @@
+const fs = require('fs');
+const path = require('path');
+
+const iconsDir = path.join(__dirname, '../src/icons');
+const htmlPath = path.join(__dirname, '../dist/codicon.html');
+
+if (!fs.existsSync(htmlPath)) {
+    console.error('HTML file not found:', htmlPath);
+    process.exit(1);
+}
+
+// Read all SVG files and build a data object
+const svgData = {};
+const svgFiles = fs.readdirSync(iconsDir).filter(file => file.endsWith('.svg'));
+
+for (const file of svgFiles) {
+    const name = path.basename(file, '.svg');
+    const content = fs.readFileSync(path.join(iconsDir, file), 'utf8');
+    svgData[name] = content;
+}
+
+let html = fs.readFileSync(htmlPath, 'utf8');
+
+if (html.includes('// SVG_DATA_PLACEHOLDER')) {
+    // Use regex to replace the initialization
+    html = html.replace(/let svgData = .*? \/\/ SVG_DATA_PLACEHOLDER/, `let svgData = ${JSON.stringify(svgData)}; // SVG_DATA_PLACEHOLDER`);
+    fs.writeFileSync(htmlPath, html);
+    console.log(`SVG data embedded into HTML (${Object.keys(svgData).length} icons).`);
+} else {
+    console.warn('SVG data placeholder not found in HTML.');
+}

src/template/preview.hbs

@@ -117,10 +117,6 @@
             margin: 8px;
         }
 
-        .icon:hover {
-            cursor: pointer;
-        }
-
         .icon:hover .inner {
             box-shadow: 0px 0px 12px var(--card-shadow-hover);
         }
@@ -159,6 +155,45 @@
             text-overflow: ellipsis;
         }
 
+        .copy-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 8px;
+            margin-top: 4px;
+            opacity: 0;
+            visibility: hidden;
+            pointer-events: none;
+            transition: opacity 0.2s ease-in-out;
+        }
+
+        .icon:hover .copy-buttons {
+            opacity: 1;
+            visibility: visible;
+            pointer-events: auto;
+        }
+
+        .copy-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 4px;
+            color: var(--text-secondary);
+            border-radius: 4px;
+            transition: color 0.2s ease, background-color 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .copy-btn:hover {
+            color: var(--text-color);
+            background-color: var(--input-border);
+        }
+
+        .copy-btn i {
+            font-size: 14px;
+        }
+
         .description {
             display: none;
         }
@@ -231,6 +266,14 @@
             <br>
             <span class='label'>{{ @key }}</span>
             <span class='description'></span>
+            <div class="copy-buttons">
+                <button class="copy-btn copy-name-btn" title="Copy icon name" aria-label="Copy icon name">
+                    <i class="codicon codicon-copy" aria-hidden="true"></i>
+                </button>
+                <button class="copy-btn copy-svg-btn" title="Copy SVG" aria-label="Copy SVG">
+                    <i class="codicon codicon-file-code" aria-hidden="true"></i>
+                </button>
+            </div>
         </div>
     {{/ each }}
     </div>
@@ -248,6 +291,9 @@
 
     // Load metadata
     let metadata = {}; // METADATA_PLACEHOLDER
+
+    // Load SVG data
+    let svgData = {}; // SVG_DATA_PLACEHOLDER
 
     if (Object.keys(metadata).length > 0) {
         applyMetadata();
@@ -579,22 +625,66 @@
         });
     }
 
-    for(i=0;i<icons.length;i++){
-        let icon = icons[i]
-        icon.onclick = function(e){
-            let name = this.getAttribute('data-name');
-
-            copier.value = name;
+    // Copy functionality
+    function copyToClipboard(text, displayText) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+            navigator.clipboard.writeText(text).then(function() {
+                notificationText.innerHTML = displayText;
+                animateNotification();
+            }).catch(function() {
+                // Fallback to old method
+                copier.value = text;
+                copier.select();
+                copier.setSelectionRange(0, 99999);
+                document.execCommand('copy');
+                notificationText.innerHTML = displayText;
+                animateNotification();
+            });
+        } else {
+            copier.value = text;
             copier.select();
-            copier.setSelectionRange(0, 99999)
+            copier.setSelectionRange(0, 99999);
             document.execCommand('copy');
-
-            notificationText.innerHTML = name;
+            notificationText.innerHTML = displayText;
             animateNotification();
-            e.preventDefault();
         }
     }
 
+    // Setup copy buttons for each icon
+    for(let i=0;i<icons.length;i++){
+        let icon = icons[i];
+
+        // Copy name button
+        let copyNameBtn = icon.querySelector('.copy-name-btn');
+        copyNameBtn.onclick = function(e){
+            e.stopPropagation();
+            let iconName = this.closest('.icon').getAttribute('data-name');
+            copyToClipboard(iconName, iconName);
+        };
+
+        // Copy SVG button
+        let copySvgBtn = icon.querySelector('.copy-svg-btn');
+        copySvgBtn.onclick = function(e){
+            e.stopPropagation();
+            let iconName = this.closest('.icon').getAttribute('data-name');
+            if (svgData[iconName]) {
+                copyToClipboard(svgData[iconName], iconName + ' (SVG)');
+            } else {
+                // Fallback: try to fetch SVG if not in embedded data
+                fetch('icons/' + iconName + '.svg')
+                    .then(response => response.text())
+                    .then(svg => {
+                        copyToClipboard(svg, iconName + ' (SVG)');
+                    })
+                    .catch(error => {
+                        console.warn('Could not fetch SVG for ' + iconName, error);
+                        notificationText.innerHTML = 'SVG not available';
+                        animateNotification();
+                    });
+            }
+        };
+    }
+
     function animateNotification(){
         window.clearTimeout(timer);
         search.focus();