From 4db0fff73bd97b6ecce3431e96738f6d7f8d1438 Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Sat, 23 Dec 2023 16:27:54 +0100 Subject: [PATCH] Add export template with comment --- .../lucide-preact/scripts/exportTemplate.mjs | 21 ++++++++++++++++- .../scripts/exportTemplate.mjs | 21 ++++++++++++++++- .../lucide-solid/scripts/exportTemplate.mjs | 21 ++++++++++++++++- .../lucide-vue-next/scripts/buildTypes.mjs | 4 ++-- .../scripts/exportTemplate.mjs | 21 ++++++++++++++++- .../lucide-vue/scripts/exportTemplate.mjs | 23 +++++++++++++++++-- packages/lucide/scripts/exportTemplate.mjs | 20 +++++++++++++++- tools/build-icons/index.mjs | 2 +- 8 files changed, 123 insertions(+), 10 deletions(-) diff --git a/packages/lucide-preact/scripts/exportTemplate.mjs b/packages/lucide-preact/scripts/exportTemplate.mjs index ee09feaab7d..857ce67cca7 100644 --- 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 index ee09feaab7d..ad1051c2a91 100644 --- 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-solid/scripts/exportTemplate.mjs b/packages/lucide-solid/scripts/exportTemplate.mjs index 715f47719e1..72385eb3387 100644 --- a/packages/lucide-solid/scripts/exportTemplate.mjs +++ b/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) => ( ) export default ${componentName}; `; +}; diff --git a/packages/lucide-vue-next/scripts/buildTypes.mjs b/packages/lucide-vue-next/scripts/buildTypes.mjs index 028f7d29ed2..f8cd977ac95 100644 --- a/packages/lucide-vue-next/scripts/buildTypes.mjs +++ b/packages/lucide-vue-next/scripts/buildTypes.mjs @@ -1,6 +1,6 @@ import path from 'path'; // eslint-disable-next-line import/no-extraneous-dependencies -import { getAliases } from '@lucide/build-icons'; +import { getIconMetaData } from '@lucide/build-icons'; import { readSvgDirectory, resetFile, @@ -48,7 +48,7 @@ svgFiles.forEach((svgFile) => { declarationFileContent += getComponentImport(componentName); }); -const aliases = await getAliases(ICONS_DIR); +const aliases = await getIconMetaData(ICONS_DIR); declarationFileContent += `\n diff --git a/packages/lucide-vue-next/scripts/exportTemplate.mjs b/packages/lucide-vue-next/scripts/exportTemplate.mjs index 97b97310090..1c22ec9b1a7 100644 --- a/packages/lucide-vue-next/scripts/exportTemplate.mjs +++ b/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}; `; +}; diff --git a/packages/lucide-vue/scripts/exportTemplate.mjs b/packages/lucide-vue/scripts/exportTemplate.mjs index 650b4178263..3852e740eea 100644 --- a/packages/lucide-vue/scripts/exportTemplate.mjs +++ b/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'; +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} = createVueComponent('${componentName}Icon', ${JSON.stringify(children)}); export default ${componentName}; `; +}; diff --git a/packages/lucide/scripts/exportTemplate.mjs b/packages/lucide/scripts/exportTemplate.mjs index 282b62baeeb..bcd2ee9423d 100644 --- a/packages/lucide/scripts/exportTemplate.mjs +++ b/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}; `; +}; diff --git a/tools/build-icons/index.mjs b/tools/build-icons/index.mjs index 923e98a8cce..3f7ddaca9e8 100644 --- a/tools/build-icons/index.mjs +++ b/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';