Refactor icon comment generation to include inline SVGs in markdown tables and update workflow to handle output correctly.

.build/generate-icons-comment.mjs

@@ -1,6 +1,7 @@
 import { execSync } from 'child_process'
-import { writeFileSync } from 'fs'
-import { basename } from 'path'
+import { readFileSync } from 'fs'
+import { basename, join } from 'path'
+import { ICONS_SRC_DIR } from './helpers.mjs'
 
 // Check icon files added relative to main branch (for PR)
 function getAddedIconsFromMain() {
@@ -40,31 +41,71 @@ function getAddedIconsFromMain() {
   }
 }
 
-// Generate markdown comment with list of added icons
+// Extract SVG content from file (remove metadata comments)
+function getSVGContent(iconPath) {
+  try {
+    const content = readFileSync(join(ICONS_SRC_DIR, iconPath), 'utf-8')
+    // Remove metadata comments (<!-- ... -->)
+    const svgContent = content.replace(/<!--[\s\S]*?-->/g, '').trim()
+    return svgContent
+  } catch (error) {
+    return null
+  }
+}
+
+// Generate markdown comment with table of added icons
 function generateIconsComment(icons) {
   if (icons.length === 0) {
     return ''
   }
 
-  // Group icons by type (outline/filled)
-  const outlineIcons = icons.filter(icon => icon.startsWith('outline/')).map(icon => icon.replace('outline/', ''))
-  const filledIcons = icons.filter(icon => icon.startsWith('filled/')).map(icon => icon.replace('filled/', ''))
+  // Group icons by type (outline/filled) with full paths
+  const outlineIcons = icons.filter(icon => icon.startsWith('outline/'))
+  const filledIcons = icons.filter(icon => icon.startsWith('filled/'))
 
   let markdown = `## 📦 Added Icons\n\n`
   markdown += `This PR adds **${icons.length}** new icon${icons.length > 1 ? 's' : ''}.\n\n`
 
+  // Generate table for outline icons
   if (outlineIcons.length > 0) {
     markdown += `### Outline Icons (${outlineIcons.length})\n\n`
-    outlineIcons.forEach(icon => {
-      markdown += `- \`${icon}\`\n`
+    markdown += `| Icon | Name |\n`
+    markdown += `|------|------|\n`
+    
+    outlineIcons.forEach(iconPath => {
+      const iconName = basename(iconPath, '.svg')
+      const svgContent = getSVGContent(iconPath)
+      
+      if (svgContent) {
+        // Use inline SVG - GitHub supports HTML in markdown
+        // Escape pipe characters in SVG to avoid breaking table
+        const escapedSvg = svgContent.replace(/\|/g, '&#124;').replaceAll('\n', '')
+        markdown += `| ${escapedSvg} | \`${iconName}\` |\n`
+      } else {
+        markdown += `| ❌ | \`${iconName}\` |\n`
+      }
     })
     markdown += `\n`
   }
 
+  // Generate table for filled icons
   if (filledIcons.length > 0) {
     markdown += `### Filled Icons (${filledIcons.length})\n\n`
-    filledIcons.forEach(icon => {
-      markdown += `- \`${icon}\`\n`
+    markdown += `| Icon | Name |\n`
+    markdown += `|------|------|\n`
+    
+    filledIcons.forEach(iconPath => {
+      const iconName = basename(iconPath, '.svg')
+      const svgContent = getSVGContent(iconPath)
+      
+      if (svgContent) {
+        // Use inline SVG - GitHub supports HTML in markdown
+        // Escape pipe characters in SVG to avoid breaking table
+        const escapedSvg = svgContent.replace(/\|/g, '&#124;').replaceAll('\n', '')
+        markdown += `| ${escapedSvg} | \`${iconName}\` |\n`
+      } else {
+        markdown += `| ❌ | \`${iconName}\` |\n`
+      }
     })
     markdown += `\n`
   }
@@ -76,11 +117,8 @@ const addedIcons = getAddedIconsFromMain()
 
 if (addedIcons.length > 0) {
   const comment = generateIconsComment(addedIcons)
-  writeFileSync('./comment-icons.md', comment, 'utf-8')
-  console.log(`Generated comment for ${addedIcons.length} icon(s)`)
+  console.log(comment)
 } else {
-  // Create empty file or exit
-  writeFileSync('./comment-icons.md', '', 'utf-8')
   process.exit(0)
 }
 

.github/workflows/validate-pr.yml

@@ -65,7 +65,7 @@ jobs:
 
       - name: Generate icons comment
         id: generate-icons-comment
-        run: pnpm run --silent generate-icons-comment
+        run: pnpm run --silent generate-icons-comment > ./comment-icons.md || true
         continue-on-error: true
 
       - name: Check if icons were added