From 15cc82a8a24b5aff6802ea710ccfa771544c5f79 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 7 Jan 2026 22:38:10 +0000
Subject: [PATCH 1/6] Initial plan


From 262c6854a4700e3420fd8933fd8610ed9d1f907a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 7 Jan 2026 22:48:06 +0000
Subject: [PATCH 2/6] Add copy SVG feature to icon preview website

Co-authored-by: hawkticehurst <39639992+hawkticehurst@users.noreply.github.com>
---
 package.json              |   3 +-
 scripts/embed-svg-data.js |  31 ++++++++
 src/template/preview.hbs  | 156 ++++++++++++++++++++++++++++++++++++--
 3 files changed, 181 insertions(+), 9 deletions(-)
 create mode 100644 scripts/embed-svg-data.js

diff --git a/package.json b/package.json
index 237ae2d..8a2029f 100644
--- a/package.json
+++ b/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",
diff --git a/scripts/embed-svg-data.js b/scripts/embed-svg-data.js
new file mode 100644
index 0000000..dcf2458
--- /dev/null
+++ b/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.');
+}
diff --git a/src/template/preview.hbs b/src/template/preview.hbs
index 690e159..09d57f9 100644
--- a/src/template/preview.hbs
+++ b/src/template/preview.hbs
@@ -210,6 +210,50 @@
             opacity: .9;
         }
 
+        #copy-modal {
+            position: fixed;
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
+            padding: 8px 0;
+            z-index: 1000;
+            display: none;
+            min-width: 160px;
+        }
+
+        #copy-modal.show {
+            display: block;
+        }
+
+        .copy-option {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            cursor: pointer;
+            color: var(--text-color);
+            font-size: 14px;
+            transition: background-color 0.2s ease;
+        }
+
+        .copy-option:hover {
+            background-color: var(--input-border);
+        }
+
+        #modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 999;
+            display: none;
+        }
+
+        #modal-overlay.show {
+            display: block;
+        }
+
     </style>
 
     <link rel="stylesheet" type="text/css" href="{{ name }}.css" />
@@ -238,6 +282,18 @@
     <div id="notification">📋 Copied: <span id="notification-id"></span></div>
     <input type="text" id="copier" aria-label="Clipboard helper">
 
+    <div id="modal-overlay"></div>
+    <div id="copy-modal">
+        <div class="copy-option" id="copy-name-option">
+            <i class="codicon codicon-symbol-string" aria-hidden="true"></i>
+            <span>Copy icon name</span>
+        </div>
+        <div class="copy-option" id="copy-svg-option">
+            <i class="codicon codicon-file-code" aria-hidden="true"></i>
+            <span>Copy SVG</span>
+        </div>
+    </div>
+
 <script type="text/javascript">
     let icons = document.getElementsByClassName('icon');
     let copier = document.getElementById('copier');
@@ -248,6 +304,9 @@
     
     // Load metadata
     let metadata = {}; // METADATA_PLACEHOLDER
+    
+    // Load SVG data
+    let svgData = {}; // SVG_DATA_PLACEHOLDER
 
     if (Object.keys(metadata).length > 0) {
         applyMetadata();
@@ -579,18 +638,99 @@
         });
     }
 
-    for(i=0;i<icons.length;i++){
-        let icon = icons[i]
-        icon.onclick = function(e){
-            let name = this.getAttribute('data-name');
+    // Copy modal elements
+    let copyModal = document.getElementById('copy-modal');
+    let modalOverlay = document.getElementById('modal-overlay');
+    let copyNameOption = document.getElementById('copy-name-option');
+    let copySvgOption = document.getElementById('copy-svg-option');
+    let currentIconName = null;
+
+    function showCopyModal(iconName, x, y) {
+        currentIconName = iconName;
+        
+        // Position the modal near the click
+        copyModal.style.left = x + 'px';
+        copyModal.style.top = y + 'px';
+        
+        // Ensure modal stays within viewport
+        let rect = copyModal.getBoundingClientRect();
+        let viewportWidth = window.innerWidth;
+        let viewportHeight = window.innerHeight;
+        
+        if (x + 160 > viewportWidth) {
+            copyModal.style.left = (x - 160) + 'px';
+        }
+        if (y + 100 > viewportHeight) {
+            copyModal.style.top = (y - 100) + 'px';
+        }
+        
+        copyModal.classList.add('show');
+        modalOverlay.classList.add('show');
+    }
 
-            copier.value = name;
+    function hideCopyModal() {
+        copyModal.classList.remove('show');
+        modalOverlay.classList.remove('show');
+        currentIconName = null;
+    }
+
+    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();
+        }
+    }
+
+    modalOverlay.onclick = hideCopyModal;
+
+    copyNameOption.onclick = function() {
+        if (currentIconName) {
+            copyToClipboard(currentIconName, currentIconName);
+        }
+        hideCopyModal();
+    };
+
+    copySvgOption.onclick = function() {
+        if (currentIconName && svgData[currentIconName]) {
+            copyToClipboard(svgData[currentIconName], currentIconName + ' (SVG)');
+        } else if (currentIconName) {
+            // Fallback: try to fetch SVG if not in embedded data
+            fetch('icons/' + currentIconName + '.svg')
+                .then(response => response.text())
+                .then(svg => {
+                    copyToClipboard(svg, currentIconName + ' (SVG)');
+                })
+                .catch(error => {
+                    console.warn('Could not fetch SVG for ' + currentIconName, error);
+                    notificationText.innerHTML = 'SVG not available';
+                    animateNotification();
+                });
+        }
+        hideCopyModal();
+    };
+
+    for(i=0;i<icons.length;i++){
+        let icon = icons[i]
+        icon.onclick = function(e){
+            let name = this.getAttribute('data-name');
+            showCopyModal(name, e.pageX, e.pageY);
             e.preventDefault();
         }
     }

From 0da86a4d55a6f769594626ba5e73e822b3064b4b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 7 Jan 2026 23:07:27 +0000
Subject: [PATCH 3/6] Replace modal UI with two icon buttons per card for copy
 name/SVG

Co-authored-by: hawkticehurst <39639992+hawkticehurst@users.noreply.github.com>
---
 src/template/preview.hbs | 207 +++++++++++++++------------------------
 1 file changed, 77 insertions(+), 130 deletions(-)

diff --git a/src/template/preview.hbs b/src/template/preview.hbs
index 09d57f9..7db660f 100644
--- a/src/template/preview.hbs
+++ b/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,41 @@
             text-overflow: ellipsis;
         }
 
+        .copy-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 8px;
+            margin-top: 4px;
+            opacity: 0;
+            transition: opacity 0.2s ease-in-out;
+        }
+
+        .icon:hover .copy-buttons {
+            opacity: 1;
+        }
+
+        .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;
         }
@@ -210,50 +241,6 @@
             opacity: .9;
         }
 
-        #copy-modal {
-            position: fixed;
-            background-color: var(--card-bg);
-            border-radius: 8px;
-            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
-            padding: 8px 0;
-            z-index: 1000;
-            display: none;
-            min-width: 160px;
-        }
-
-        #copy-modal.show {
-            display: block;
-        }
-
-        .copy-option {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 8px 16px;
-            cursor: pointer;
-            color: var(--text-color);
-            font-size: 14px;
-            transition: background-color 0.2s ease;
-        }
-
-        .copy-option:hover {
-            background-color: var(--input-border);
-        }
-
-        #modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 999;
-            display: none;
-        }
-
-        #modal-overlay.show {
-            display: block;
-        }
-
     </style>
 
     <link rel="stylesheet" type="text/css" href="{{ name }}.css" />
@@ -275,6 +262,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>
@@ -282,18 +277,6 @@
     <div id="notification">📋 Copied: <span id="notification-id"></span></div>
     <input type="text" id="copier" aria-label="Clipboard helper">
 
-    <div id="modal-overlay"></div>
-    <div id="copy-modal">
-        <div class="copy-option" id="copy-name-option">
-            <i class="codicon codicon-symbol-string" aria-hidden="true"></i>
-            <span>Copy icon name</span>
-        </div>
-        <div class="copy-option" id="copy-svg-option">
-            <i class="codicon codicon-file-code" aria-hidden="true"></i>
-            <span>Copy SVG</span>
-        </div>
-    </div>
-
 <script type="text/javascript">
     let icons = document.getElementsByClassName('icon');
     let copier = document.getElementById('copier');
@@ -638,42 +621,7 @@
         });
     }
 
-    // Copy modal elements
-    let copyModal = document.getElementById('copy-modal');
-    let modalOverlay = document.getElementById('modal-overlay');
-    let copyNameOption = document.getElementById('copy-name-option');
-    let copySvgOption = document.getElementById('copy-svg-option');
-    let currentIconName = null;
-
-    function showCopyModal(iconName, x, y) {
-        currentIconName = iconName;
-        
-        // Position the modal near the click
-        copyModal.style.left = x + 'px';
-        copyModal.style.top = y + 'px';
-        
-        // Ensure modal stays within viewport
-        let rect = copyModal.getBoundingClientRect();
-        let viewportWidth = window.innerWidth;
-        let viewportHeight = window.innerHeight;
-        
-        if (x + 160 > viewportWidth) {
-            copyModal.style.left = (x - 160) + 'px';
-        }
-        if (y + 100 > viewportHeight) {
-            copyModal.style.top = (y - 100) + 'px';
-        }
-        
-        copyModal.classList.add('show');
-        modalOverlay.classList.add('show');
-    }
-
-    function hideCopyModal() {
-        copyModal.classList.remove('show');
-        modalOverlay.classList.remove('show');
-        currentIconName = null;
-    }
-
+    // Copy functionality
     function copyToClipboard(text, displayText) {
         if (navigator.clipboard && navigator.clipboard.writeText) {
             navigator.clipboard.writeText(text).then(function() {
@@ -698,41 +646,40 @@
         }
     }
 
-    modalOverlay.onclick = hideCopyModal;
-
-    copyNameOption.onclick = function() {
-        if (currentIconName) {
-            copyToClipboard(currentIconName, currentIconName);
-        }
-        hideCopyModal();
-    };
-
-    copySvgOption.onclick = function() {
-        if (currentIconName && svgData[currentIconName]) {
-            copyToClipboard(svgData[currentIconName], currentIconName + ' (SVG)');
-        } else if (currentIconName) {
-            // Fallback: try to fetch SVG if not in embedded data
-            fetch('icons/' + currentIconName + '.svg')
-                .then(response => response.text())
-                .then(svg => {
-                    copyToClipboard(svg, currentIconName + ' (SVG)');
-                })
-                .catch(error => {
-                    console.warn('Could not fetch SVG for ' + currentIconName, error);
-                    notificationText.innerHTML = 'SVG not available';
-                    animateNotification();
-                });
-        }
-        hideCopyModal();
-    };
-
+    // Setup copy buttons for each icon
     for(i=0;i<icons.length;i++){
-        let icon = icons[i]
-        icon.onclick = function(e){
-            let name = this.getAttribute('data-name');
-            showCopyModal(name, e.pageX, e.pageY);
-            e.preventDefault();
-        }
+        let icon = icons[i];
+        let name = icon.getAttribute('data-name');
+        
+        // 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(){

From 2d1da31635ff4772d106f8503837ef64ab494740 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 7 Jan 2026 23:09:22 +0000
Subject: [PATCH 4/6] Fix code review: use let for loop variable and remove
 unused variable

Co-authored-by: hawkticehurst <39639992+hawkticehurst@users.noreply.github.com>
---
 src/template/preview.hbs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/template/preview.hbs b/src/template/preview.hbs
index 7db660f..f2216e6 100644
--- a/src/template/preview.hbs
+++ b/src/template/preview.hbs
@@ -647,9 +647,8 @@
     }
 
     // Setup copy buttons for each icon
-    for(i=0;i<icons.length;i++){
+    for(let i=0;i<icons.length;i++){
         let icon = icons[i];
-        let name = icon.getAttribute('data-name');
         
         // Copy name button
         let copyNameBtn = icon.querySelector('.copy-name-btn');

From ed35e25f216c021ae962cf75d922564f38a2432f Mon Sep 17 00:00:00 2001
From: Lee Murray <mrleemurray@gmail.com>
Date: Tue, 13 Jan 2026 11:10:22 +0000
Subject: [PATCH 5/6] Update src/template/preview.hbs

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 src/template/preview.hbs | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/template/preview.hbs b/src/template/preview.hbs
index f2216e6..2f60702 100644
--- a/src/template/preview.hbs
+++ b/src/template/preview.hbs
@@ -161,11 +161,15 @@
             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 {

From 6fb490e88b8944e2c174b6f414d303828bb78231 Mon Sep 17 00:00:00 2001
From: Lee Murray <mrleemurray@gmail.com>
Date: Tue, 13 Jan 2026 11:11:45 +0000
Subject: [PATCH 6/6] Update scripts/embed-svg-data.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 scripts/embed-svg-data.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/embed-svg-data.js b/scripts/embed-svg-data.js
index dcf2458..2af63a1 100644
--- a/scripts/embed-svg-data.js
+++ b/scripts/embed-svg-data.js
@@ -23,7 +23,7 @@ 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`);
+    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 {