Implement deprecated block comment (#1765)

* Implement deprecate comment lucide-react

* Add export template with comment

* Add block comment to Lucide Svelte

* Add blockcomment to lucide-angular

* Add block comment to lucide-static

* revert runtime change build:tags

* Fix failed tests

* Remove optional property in icon schema

icon.schema.json

@@ -47,6 +47,10 @@
       },
       "minItems": 1,
       "uniqueItems": true
+    },
+    "deprecated": {
+      "type": "boolean",
+      "default": false
     }
   },
   "description": "A JSON Schema for icons defined by Lucide Icons."

icons/chrome.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "ericfennis"
@@ -11,4 +12,4 @@
   "categories": [
     "brands"
   ]
-}
+}

icons/codepen.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "ericfennis"
@@ -11,4 +12,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/codesandbox.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -12,4 +13,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/dribbble.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "ahtohbi4",
     "karsa-mistmere"
@@ -13,4 +14,4 @@
     "social",
     "design"
   ]
-}
+}

icons/facebook.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -14,4 +15,4 @@
     "social",
     "brands"
   ]
-}
+}

icons/figma.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "brands",
     "design"
   ]
-}
+}

icons/framer.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "brands",
     "design"
   ]
-}
+}

icons/github.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -14,4 +15,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/gitlab.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -14,4 +15,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/instagram.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "social",
     "photography"
   ]
-}
+}

icons/pocket.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -13,4 +14,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/slack.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "ashygee",
@@ -17,4 +18,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/trello.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "bdbch",
     "csandman",
@@ -15,4 +16,4 @@
     "brands",
     "development"
   ]
-}
+}

icons/twitch.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "ahtohbi4",
     "johnletey"
@@ -14,4 +15,4 @@
     "account",
     "gaming"
   ]
-}
+}

icons/twitter.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "social",
     "account"
   ]
-}
+}

icons/youtube.json

@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -20,4 +21,4 @@
     "text",
     "brands"
   ]
-}
+}

packages/lucide-angular/scripts/exportTemplate.mjs

@@ -1,8 +1,26 @@
-export default ({ componentName, children }) => `
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `\
 import { LucideIconData } from './types';
 
-/* eslint-disable no-shadow-restricted-names */
-const ${componentName}: LucideIconData = ${JSON.stringify(children)};
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-vue-next - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {FunctionalComponent} Vue component
+ * ${deprecated ? '@deprecated' : ''}
+*/
+const ${componentName}: LucideIconData = ${JSON.stringify(children)}; //eslint-disable-line no-shadow-restricted-names
 
 export default ${componentName};
-`;
+`
+};

packages/lucide-preact/scripts/exportTemplate.mjs

@@ -1,7 +1,26 @@
-export default ({ componentName, children }) => `
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `
 import createLucideIcon from '../createLucideIcon';
 
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-preact - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ * ${deprecated ? '@deprecated' : ''}
+ */
 const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
 
 export default ${componentName};
 `;
+};

packages/lucide-react-native/scripts/exportTemplate.mjs

@@ -1,7 +1,26 @@
-export default ({ componentName, children }) => `
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `
 import createLucideIcon from '../createLucideIcon';
 
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-react-native - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ * ${deprecated ? '@deprecated' : ''}
+ */
 const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
 
 export default ${componentName};
 `;
+};

packages/lucide-react/scripts/exportTemplate.mjs

@@ -1,16 +1,9 @@
-export default ({ componentName, iconName, children, getSvg }) => {
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
   const svgContents = getSvg();
-
-  const svgBase64 = Buffer.from(
-    svgContents
-      .replace('\n', '')
-      .replace(
-        'stroke="currentColor"',
-        'stroke="#000" style="background-color: #fff; border-radius: 2px"',
-      ),
-  ).toString('base64');
-
-  // declarationFileContent += `\
+  const svgBase64 = base64SVG(svgContents);
 
   return `
 import createLucideIcon from '../createLucideIcon';
@@ -24,7 +17,7 @@ import createLucideIcon from '../createLucideIcon';
  *
  * @param {Object} props - Lucide icons props and any valid SVG attribute
  * @returns {JSX.Element} JSX Element
- *
+ * ${deprecated ? '@deprecated' : ''}
  */
 const ${componentName} = createLucideIcon('${componentName}', ${JSON.stringify(children)});
 

packages/lucide-react/scripts/getAliasesEntryNames.mjs

@@ -1,11 +1,11 @@
 import path from 'path';
 // eslint-disable-next-line import/no-extraneous-dependencies
-import getAliases from '@lucide/build-icons/utils/getAliases.mjs';
+import getIconMetaData from '@lucide/build-icons/utils/getIconMetaData.mjs';
 
 const ICONS_DIR = path.resolve(process.cwd(), '../../icons');
 
 export default async function getAliasesEntryNames() {
-  const metaJsonFiles = await getAliases(ICONS_DIR);
+  const metaJsonFiles = await getIconMetaData(ICONS_DIR);
 
   const iconWithAliases = Object.values(metaJsonFiles).filter(({ aliases }) => aliases != null);
 

packages/lucide-react/src/createLucideIcon.ts

@@ -35,8 +35,9 @@ export const toKebabCase = (string: string) =>
 
 const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
   const Component = forwardRef<SVGSVGElement, LucideProps>(
-    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, className = '', children, ...rest }, ref) =>
-      createElement(
+    ({ color = 'currentColor', size = 24, strokeWidth = 2, absoluteStrokeWidth, className = '', children, ...rest }, ref) =>{
+
+      return createElement(
         'svg',
         {
           ref,
@@ -53,6 +54,7 @@ const createLucideIcon = (iconName: string, iconNode: IconNode): LucideIcon => {
           ...(Array.isArray(children) ? children : [children]),
         ]
       )
+    }
   );
 
   Component.displayName = `${iconName}`;

packages/lucide-solid/scripts/exportTemplate.mjs

@@ -1,12 +1,31 @@
-export default ({ componentName, children }) => `
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `
 import Icon from '../Icon';
 import type { IconNode, LucideProps } from '../types';
 
 const iconNode: IconNode = ${JSON.stringify(children)};
 
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-solid - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ * ${deprecated ? '@deprecated' : ''}
+ */
 const ${componentName} = (props: LucideProps) => (
   <Icon {...props} name="${componentName}" iconNode={iconNode} />
 )
 
 export default ${componentName};
 `;
+};

packages/lucide-static/package.json

@@ -22,17 +22,27 @@
     "Fontawesome",
     "Font Awesome"
   ],
-  "main": "lib/index.js",
+  "source": "src/lucide-static.js",
+  "main": "dist/cjs/lucide-static.js",
+  "module": "dist/esm/lucide-static.js",
+  "typings": "dist/lucide-static.d.ts",
+  "sideEffects": false,
   "scripts": {
     "copy:license": "cp ../../LICENSE ./LICENSE",
+    "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles && pnpm build:lib && pnpm build:tags",
     "build:tags": "node ../../scripts/migrateIconsToTags.mjs",
-    "build": "pnpm clean && pnpm copy:license && pnpm build:lib && pnpm build:tags",
+    "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --withAliases --aliasNamesOnly --aliasesFileExtension=.ts --exportFileName=index.ts",
     "build:lib": "node ./scripts/buildLib.mjs",
+    "build:bundles": "rollup -c rollup.config.mjs",
     "clean": "rm -rf lib && rm -rf build && rm -rf icons && rm -f sprite.svg",
     "version": "pnpm version --git-tag-version=false"
   },
   "devDependencies": {
     "prettier": "^2.3.2",
-    "svgson": "^5.2.1"
+    "svgson": "^5.2.1",
+    "@lucide/build-icons": "workspace:*",
+    "@lucide/rollup-plugins": "workspace:*",
+    "rollup": "^4.9.2",
+    "rollup-plugin-dts": "^6.1.0"
   }
 }

packages/lucide-static/rollup.config.mjs

@@ -0,0 +1,59 @@
+import plugins from '@lucide/rollup-plugins';
+import dts from 'rollup-plugin-dts';
+import pkg from './package.json' assert { type: 'json' };
+
+const outputFileName = pkg.name;
+const outputDir = 'dist';
+const inputs = ['src/lucide-static.ts'];
+const bundles = [
+  {
+    format: 'cjs',
+    inputs,
+    outputDir,
+  },
+  {
+    format: 'esm',
+    inputs,
+    outputDir,
+    preserveModules: true,
+  },
+];
+
+const configs = bundles
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
+    inputs.map(input => ({
+      input,
+      plugins: plugins(pkg, minify),
+      output: {
+        name: outputFileName,
+        ...(preserveModules
+          ? {
+            dir: `${outputDir}/${format}`,
+          }
+          : {
+            file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+          }),
+        format,
+        sourcemap: true,
+        preserveModules,
+      },
+    })),
+  )
+  .flat();
+
+const typesFileConfig = {
+  input: inputs[0],
+  output: [
+    {
+      file: `${outputDir}/${outputFileName}.d.ts`,
+      format: 'esm',
+    },
+  ],
+  plugins: [
+    dts({
+      include: ['src'],
+    }),
+  ],
+};
+
+export default [...configs, typesFileConfig];

packages/lucide-static/scripts/buildLib.mjs

@@ -5,9 +5,7 @@ import getArgumentOptions from 'minimist';
 import { parseSync } from 'svgson';
 
 import {
-  appendFile,
   readSvgDirectory,
-  toCamelCase,
   getCurrentDirPath,
 } from '../../../scripts/helpers.mjs';
 import readSvgs from './readSvgs.mjs';
@@ -39,22 +37,6 @@ createDirectory(ICON_MODULE_DIR);
 const svgFiles = readSvgDirectory(ICONS_DIR);
 const svgs = readSvgs(svgFiles, ICONS_DIR);
 
-const jsLicense = `/**\n * ${license}\n */\n`;
-
-appendFile(jsLicense, `index.js`, LIB_DIR);
-
-svgs.forEach(({ name, contents }) => {
-  const componentName = toCamelCase(name);
-  const importString = `module.exports.${componentName} = require('./icons/${name}');\n`;
-  appendFile(importString, `index.js`, LIB_DIR);
-
-  const svgContent = contents.replace('<svg', `<svg
-  class="lucide lucide-${name}"`);
-
-  const exportString = `${jsLicense}module.exports = \`${svgContent}\`;\n`;
-  appendFile(exportString, `${name}.js`, ICON_MODULE_DIR);
-});
-
 const parsedSvgs = svgs.map(({ name, contents }) => ({
   name,
   contents,

packages/lucide-static/scripts/exportTemplate.mjs

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  let svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  svgContents = svgContents.replace(
+    '<svg',
+    `
+<svg
+  class="lucide lucide-${iconName}"`,
+  );
+
+  return `
+/**
+ * @name ${iconName}
+ * @description Lucide SVG string.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-static - Documentation
+ *
+ * @returns {String}
+ * ${deprecated ? '@deprecated' : ''}
+ */
+const ${componentName}: string = \`\
+${svgContents}\
+\`
+
+export default ${componentName};
+`;
+};

packages/lucide-static/src/lucide-static.ts

@@ -0,0 +1,2 @@
+export * from './icons'
+export * from './aliases';

packages/lucide-static/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "declaration": true,
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "allowJs": true,
+    "lib": ["esnext", "dom"],
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+  }
+}

packages/lucide-svelte/scripts/addLicense.mjs

@@ -24,6 +24,7 @@ for (const file of files) {
   if (filestat.isFile() === false || filestat.isDirectory()) continue;
 
   const contents = await readFile(filepath, { encoding: 'utf-8' });
+  let newContents = contents;
   const ext = path.extname(filepath);
   let license;
 
@@ -36,7 +37,31 @@ for (const file of files) {
   }
 
   if (license) {
-    await writeFile(filepath, license + contents, { encoding: 'utf-8' });
+    newContents = license + contents;
+
+  }
+
+  // Places icon block comment at the top of the Svelte component class
+  if(/icons\/(.*?)\.svelte\.d\.ts/.test(filepath)) {
+    const svelteFilepath = filepath.replace('.d.ts', '')
+    let svelteFileContents = await readFile(svelteFilepath, { encoding: 'utf-8' });
+
+    const blockCommentRegex = /\/\*\*[\s\S]*?\*\//;
+    const blockCommentMatch = blockCommentRegex.exec(svelteFileContents);
+
+    if (blockCommentMatch !== null) {
+      const blockComment = blockCommentMatch[0];
+
+      const exportClassRegex = /export default class (\w+) extends SvelteComponentTyped<(.*?)> {/;
+
+      if (exportClassRegex.test(newContents)) {
+        newContents = newContents.replace(exportClassRegex, `${blockComment}\nexport default class $1 extends SvelteComponentTyped<$2> {`);
+      }
+    }
+  }
+
+  if(newContents !== contents) {
+    await writeFile(filepath, newContents, { encoding: 'utf-8' });
   }
 }
 
@@ -48,8 +73,8 @@ function getJSBanner() {
 }
 
 function getSvelteBanner() {
-  return `<!-- 
-  ${BANNER} 
+  return `<!--
+  ${BANNER}
 -->
 \n`;
 }

packages/lucide-svelte/scripts/exportTemplate.mjs

@@ -1,6 +1,11 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-export default ({ iconName, children }) =>
-  `\
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ iconName, children, componentName, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `\
 <script lang="ts">
 import Icon from '../Icon.svelte';
 import type { IconNode, IconProps } from '../types.js';
@@ -8,9 +13,22 @@ import type { IconNode, IconProps } from '../types.js';
 type $$Props = IconProps;
 
 const iconNode: IconNode = ${JSON.stringify(children)};
+
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {FunctionalComponent} Vue component
+ * ${deprecated ? '@deprecated' : ''}
+ */
 </script>
 
 <Icon name="${iconName}" {...$$props} iconNode={iconNode}>
   <slot/>
 </Icon>
 `;
+};

packages/lucide-vue-next/scripts/exportTemplate.mjs

@@ -1,7 +1,26 @@
-export default ({ componentName, children }) => `
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `
 import createLucideIcon from '../createLucideIcon';
 
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-vue-next - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {FunctionalComponent} Vue component
+ * ${deprecated ? '@deprecated' : ''}
+ */
 const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)});
 
 export default ${componentName};
 `;
+};

packages/lucide-vue/scripts/exportTemplate.mjs

@@ -1,7 +1,26 @@
-export default ({ componentName, children }) => `
-import createVueComponent from '../createVueComponent';
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
 
-const ${componentName} = createVueComponent('${componentName}Icon', ${JSON.stringify(children)});
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `
+import createLucideIcon from '../createLucideIcon';
+
+/**
+ * @component @name ${componentName}
+ * @description Lucide SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide-vue - Documentation
+ *
+ * @param {Object} props - Lucide icons props and any valid SVG attribute
+ * @returns {Component} Vue Component
+ * ${deprecated ? '@deprecated' : ''}
+ */
+const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)});
 
 export default ${componentName};
 `;
+};

packages/lucide/scripts/exportTemplate.mjs

@@ -1,7 +1,24 @@
-export default ({ componentName, children }) => `
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
+
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  const svgBase64 = base64SVG(svgContents);
+
+  return `
 import defaultAttributes from '../defaultAttributes';
 import type { IconNode } from '../types';
 
+/**
+ * @name ${iconName}
+ * @description Lucide SVG icon node.
+ *
+ * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName}
+ * @see https://lucide.dev/guide/packages/lucide - Documentation
+ *
+ * @returns {Array}
+ * ${deprecated ? '@deprecated' : ''}
+ */
 const ${componentName}: IconNode = [
   'svg',
   defaultAttributes,
@@ -10,3 +27,4 @@ const ${componentName}: IconNode = [
 
 export default ${componentName};
 `;
+};

pnpm-lock.yaml

@@ -547,9 +547,21 @@ importers:
 
   packages/lucide-static:
     devDependencies:
+      '@lucide/build-icons':
+        specifier: workspace:*
+        version: link:../../tools/build-icons
+      '@lucide/rollup-plugins':
+        specifier: workspace:*
+        version: link:../../tools/rollup-plugins
       prettier:
         specifier: ^2.3.2
         version: 2.8.8
+      rollup:
+        specifier: ^4.9.2
+        version: 4.9.2
+      rollup-plugin-dts:
+        specifier: ^6.1.0
+        version: 6.1.0(rollup@4.9.2)(typescript@4.9.5)
       svgson:
         specifier: ^5.2.1
         version: 5.3.1
@@ -13790,8 +13802,8 @@ packages:
       duplexer: 0.1.2
     dev: true
 
-  /h3-nightly@1.10.0-1701948668.39f9434:
-    resolution: {integrity: sha512-ZgDOpzAr8BO/sFzWYvLZLhg3d/NRbDeff+rA6vnoog0530NPEVfO3nIzCwY3nT+Z0faROooaiCyKaAPYbo7b9A==}
+  /h3-nightly@1.10.1-1704400265.ae91fc8:
+    resolution: {integrity: sha512-R2kWa+PpzYWLel4wSyJxS3DH8GSOs515uf72bW10uo5rbR0qvLw3esTnSYQLgDiOaqiFRP56kFFK7ClTfqko0g==}
     dependencies:
       cookie-es: 1.0.0
       defu: 6.1.3
@@ -16817,7 +16829,7 @@ packages:
       fs-extra: 11.2.0
       globby: 13.2.2
       gzip-size: 7.0.0
-      h3: /h3-nightly@1.10.0-1701948668.39f9434
+      h3: /h3-nightly@1.10.1-1704400265.ae91fc8
       hookable: 5.5.3
       httpxy: 0.1.5
       is-primitive: 3.0.1

tools/build-icons/building/generateAliasesFile.mjs

@@ -10,7 +10,7 @@ export default async function generateAliasesFile({
   outputDirectory,
   fileExtension,
   iconFileExtension = '.js',
-  aliases,
+  iconMetaData,
   aliasImportFileExtension,
   aliasNamesOnly = false,
   separateAliasesFile = false,
@@ -27,7 +27,7 @@ export default async function generateAliasesFile({
   await Promise.all(
     icons.map(async (iconName, index) => {
       const componentName = toPascalCase(iconName);
-      const iconAliases = aliases[iconName]?.aliases;
+      const iconAliases = iconMetaData[iconName]?.aliases;
 
       let importString = '';
 

tools/build-icons/building/generateIconFiles.mjs

@@ -11,6 +11,7 @@ export default ({
   iconFileExtension = '.js',
   pretty = true,
   iconsDir,
+  iconMetaData,
 }) => {
   const icons = Object.keys(iconNodes);
   const iconsDistDirectory = path.join(outputDirectory, `icons`);
@@ -27,8 +28,9 @@ export default ({
     children = children.map(({ name, attributes }) => [name, attributes]);
 
     const getSvg = () => readSvg(`${iconName}.svg`, iconsDir);
+    const { deprecated = false } = iconMetaData[iconName];
 
-    const elementTemplate = template({ componentName, iconName, children, getSvg });
+    const elementTemplate = template({ componentName, iconName, children, getSvg, deprecated });
     const output = pretty
       ? prettier.format(elementTemplate, {
           singleQuote: true,

tools/build-icons/index.mjs

@@ -1,2 +1,2 @@
 // eslint-disable-next-line import/prefer-default-export
-export { default as getAliases } from './utils/getAliases.mjs';
+export { default as getIconMetaData } from './utils/getIconMetaData.mjs';

tools/build-icons/main.mjs

@@ -9,7 +9,7 @@ import generateExportsFile from './building/generateExportsFile.mjs';
 
 import { readSvgDirectory, getCurrentDirPath } from '../../scripts/helpers.mjs';
 import generateAliasesFile from './building/generateAliasesFile.mjs';
-import getAliases from './utils/getAliases.mjs';
+import getIconMetaData from './utils/getIconMetaData.mjs';
 import generateDynamicImports from './building/generateDynamicImports.mjs';
 
 const cliArguments = getArgumentOptions(process.argv.slice(2));
@@ -50,6 +50,8 @@ async function buildIcons() {
 
   const { default: iconFileTemplate } = await import(path.resolve(process.cwd(), templateSrc));
 
+  const iconMetaData = await getIconMetaData(ICONS_DIR);
+
   // Generates iconsNodes files for each icon
   generateIconFiles({
     iconNodes: icons,
@@ -59,14 +61,13 @@ async function buildIcons() {
     iconFileExtension,
     pretty: JSON.parse(pretty),
     iconsDir: ICONS_DIR,
+    iconMetaData,
   });
 
   if (withAliases) {
-    const aliases = await getAliases(ICONS_DIR);
-
     await generateAliasesFile({
       iconNodes: icons,
-      aliases,
+      iconMetaData,
       aliasNamesOnly,
       iconFileExtension,
       outputDirectory: OUTPUT_DIR,

tools/build-icons/utils/base64SVG.mjs

@@ -0,0 +1,11 @@
+const base64SVG = (svgContents) =>
+  Buffer.from(
+    svgContents
+      .replace('\n', '')
+      .replace(
+        'stroke="currentColor"',
+        'stroke="#000" style="background-color: #fff; border-radius: 2px"',
+      ),
+  ).toString('base64');
+
+export default base64SVG;

tools/build-icons/utils/getIconMetaData.mjs

@@ -1,7 +1,7 @@
 import path from 'path';
 import { readSvgDirectory } from '../../../scripts/helpers.mjs';
 
-async function getAliases(iconDirectory) {
+async function getIconMetaData(iconDirectory) {
   const iconJsons = readSvgDirectory(iconDirectory, '.json');
   const aliasesEntries = await Promise.all(
     iconJsons.map(async (jsonFile) => {
@@ -13,4 +13,4 @@ async function getAliases(iconDirectory) {
   return Object.fromEntries(aliasesEntries);
 }
 
-export default getAliases
+export default getIconMetaData