diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
index 9c9ba2163..d80b39eec 100644
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@@ -94,6 +94,10 @@ jobs:
comment-author: 'github-actions[bot]'
body-includes: Added or changed icons
+ - uses: actions/setup-node@v4
+ - name: Install svgson for code preview (safer and faster than installing all deps)
+ run: npm install svgson
+
- name: Generate comment markup
run: node ./scripts/generateChangedIconsCommentMarkup.mjs >> comment-markup.md
id: comment-markup
diff --git a/scripts/generateChangedIconsCommentMarkup.mjs b/scripts/generateChangedIconsCommentMarkup.mjs
index 0b9536103..7eaace980 100644
--- a/scripts/generateChangedIconsCommentMarkup.mjs
+++ b/scripts/generateChangedIconsCommentMarkup.mjs
@@ -1,6 +1,13 @@
import fs from 'fs';
import path from 'path';
-import { shuffle, readSvgDirectory, getCurrentDirPath, minifySvg } from './helpers.mjs';
+import { parseSync } from 'svgson';
+import {
+ shuffle,
+ readSvgDirectory,
+ getCurrentDirPath,
+ minifySvg,
+ toPascalCase,
+} from './helpers.mjs';
const currentDir = getCurrentDirPath(import.meta.url);
const ICONS_DIR = path.resolve(currentDir, '../icons');
@@ -70,6 +77,18 @@ const changeFilesXRayImageTags = getImageTagsByFiles(
400,
).join(' ');
+const readyToUseCode = changedFiles
+ .map((changedFile) => {
+ const svgContent = fs.readFileSync(path.join(process.cwd(), changedFile), 'utf-8');
+ const name = path.basename(changedFile, '.svg');
+ return `const ${toPascalCase(name)}Icon = createLucideIcon('${toPascalCase(name)}', [
+ ${parseSync(svgContent)
+ .children.map(({ name, attributes }) => JSON.stringify([name, attributes]))
+ .join(',\n ')}
+])`;
+ })
+ .join('\n\n');
+
const commentMarkup = `\
### Added or changed icons
${changeFiles2pxStrokeImageTags}
@@ -93,6 +112,20 @@ ${changeFilesLowDPIImageTags}
Icon X-rays
${changeFilesXRayImageTags}
+
+${
+ // collapse code block if it's too long
+ readyToUseCode.split('/n').length < 20
+ ? '### Icons as code'
+ : `
+Icons as code
+`
+}
+Only working for:
+`lucide-react`, `lucide-react-native`, `lucide-preact`, `lucide-vue-next`
+\`\`\`ts
+${readyToUseCode}
+\`\`\`${readyToUseCode.split('/n').length < 20 ? '' : '\n\n '}
`;
console.log(commentMarkup);