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
lucide-icons · Jan 7, 2024 · ef89510 · ef89510
1 parent b72cea6
commit ef89510
Show file tree

Hide file tree

Showing 43 changed files with 402 additions and 85 deletions.
diff --git a/icon.schema.json b/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."

diff --git a/icons/chrome.json b/icons/chrome.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "ericfennis"
@@ -11,4 +12,4 @@
   "categories": [
     "brands"
   ]
-}
+}
diff --git a/icons/codepen.json b/icons/codepen.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "ericfennis"
@@ -11,4 +12,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/codesandbox.json b/icons/codesandbox.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -12,4 +13,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/dribbble.json b/icons/dribbble.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "ahtohbi4",
     "karsa-mistmere"
@@ -13,4 +14,4 @@
     "social",
     "design"
   ]
-}
+}
diff --git a/icons/facebook.json b/icons/facebook.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -14,4 +15,4 @@
     "social",
     "brands"
   ]
-}
+}
diff --git a/icons/figma.json b/icons/figma.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "brands",
     "design"
   ]
-}
+}
diff --git a/icons/framer.json b/icons/framer.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "brands",
     "design"
   ]
-}
+}
diff --git a/icons/github.json b/icons/github.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -14,4 +15,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/gitlab.json b/icons/gitlab.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -14,4 +15,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/instagram.json b/icons/instagram.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "social",
     "photography"
   ]
-}
+}
diff --git a/icons/pocket.json b/icons/pocket.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -13,4 +14,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/slack.json b/icons/slack.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "ashygee",
@@ -17,4 +18,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/trello.json b/icons/trello.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "bdbch",
     "csandman",
@@ -15,4 +16,4 @@
     "brands",
     "development"
   ]
-}
+}
diff --git a/icons/twitch.json b/icons/twitch.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "ahtohbi4",
     "johnletey"
@@ -14,4 +15,4 @@
     "account",
     "gaming"
   ]
-}
+}
diff --git a/icons/twitter.json b/icons/twitter.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -15,4 +16,4 @@
     "social",
     "account"
   ]
-}
+}
diff --git a/icons/youtube.json b/icons/youtube.json
@@ -1,5 +1,6 @@
 {
   "$schema": "../icon.schema.json",
+  "deprecated": true,
   "contributors": [
     "colebemis",
     "csandman",
@@ -20,4 +21,4 @@
     "text",
     "brands"
   ]
-}
+}
diff --git a/packages/lucide-angular/scripts/exportTemplate.mjs b/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};
-`;
+`
+};
diff --git a/packages/lucide-preact/scripts/exportTemplate.mjs b/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};
 `;
+};
diff --git a/packages/lucide-react-native/scripts/exportTemplate.mjs b/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};
 `;
+};
diff --git a/packages/lucide-react/scripts/exportTemplate.mjs b/packages/lucide-react/scripts/exportTemplate.mjs
@@ -1,16 +1,9 @@
-export default ({ componentName, iconName, children, getSvg }) => {
-  const svgContents = getSvg();
-
-  const svgBase64 = Buffer.from(
-    svgContents
-      .replace('\n', '')
-      .replace(
-        'stroke="currentColor"',
-        'stroke="#000" style="background-color: #fff; border-radius: 2px"',
-      ),
-  ).toString('base64');
+/* eslint-disable import/no-extraneous-dependencies */
+import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs';
 
-  // declarationFileContent += `\
+export default ({ componentName, iconName, children, getSvg, deprecated }) => {
+  const svgContents = getSvg();
+  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)});
 

diff --git a/packages/lucide-react/scripts/getAliasesEntryNames.mjs b/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);
 

diff --git a/packages/lucide-react/src/createLucideIcon.ts b/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}`;