diff --git a/packages/lucide/package.json b/packages/lucide/package.json index 4ba2d154c9..d64cf1b44a 100644 --- a/packages/lucide/package.json +++ b/packages/lucide/package.json @@ -25,7 +25,7 @@ "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts", - "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --withAliases --aliasesFileExtension=.ts --exportFileName=index.ts", + "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --iconFileExtension=.ts --withAliases --aliasNamesOnly --aliasesFileExtension=.ts --exportFileName=index.ts", "build:types": "node ./scripts/buildTypes.mjs", "build:bundles": "rollup -c rollup.config.mjs", "test": "vitest run", diff --git a/packages/lucide/src/lucide.ts b/packages/lucide/src/lucide.ts index 8e01af7d65..43e4ec4af3 100644 --- a/packages/lucide/src/lucide.ts +++ b/packages/lucide/src/lucide.ts @@ -1,5 +1,5 @@ import replaceElement from './replaceElement'; -import * as iconAndAliases from './icons'; +import * as iconAndAliases from './iconsAndAliases'; /** * Replaces all elements with matching nameAttr with the defined icons diff --git a/packages/lucide/src/replaceElement.ts b/packages/lucide/src/replaceElement.ts index 33fad25af6..6b585bf5a9 100644 --- a/packages/lucide/src/replaceElement.ts +++ b/packages/lucide/src/replaceElement.ts @@ -66,7 +66,7 @@ interface ReplaceElementOptions { const replaceElement = (element: Element, { nameAttr, icons, attrs }: ReplaceElementOptions) => { const iconName = element.getAttribute(nameAttr); - if(iconName == null) return + if (iconName == null) return const ComponentName = toPascalCase(iconName); diff --git a/packages/lucide/tests/__snapshots__/lucide.spec.js.snap b/packages/lucide/tests/__snapshots__/lucide.spec.js.snap index b39c78d903..2cb27d149d 100644 --- a/packages/lucide/tests/__snapshots__/lucide.spec.js.snap +++ b/packages/lucide/tests/__snapshots__/lucide.spec.js.snap @@ -2,4 +2,6 @@ exports[`createIcons > should add custom attributes 1`] = `""`; +exports[`createIcons > should read elements from DOM and replace icon with alias name 1`] = `""`; + exports[`createIcons > should read elements from DOM and replace it with icons 1`] = `""`; diff --git a/packages/lucide/tests/lucide.spec.js b/packages/lucide/tests/lucide.spec.js index 4403bd3ae3..b9bc241084 100644 --- a/packages/lucide/tests/lucide.spec.js +++ b/packages/lucide/tests/lucide.spec.js @@ -6,12 +6,12 @@ import { parseSync, stringify } from 'svgson'; const ICONS_DIR = path.resolve(__dirname, '../../../icons'); -const getOriginalSvg = (iconName) => { +const getOriginalSvg = (iconName, aliasName) => { const svgContent = fs.readFileSync(path.join(ICONS_DIR, `${iconName}.svg`), 'utf8'); const svgParsed = parseSync(svgContent); - svgParsed.attributes['data-lucide'] = iconName; - svgParsed.attributes['class'] = `lucide lucide-${iconName}`; + svgParsed.attributes['data-lucide'] = aliasName ?? iconName; + svgParsed.attributes['class'] = `lucide lucide-${aliasName ?? iconName}`; return stringify(svgParsed, { selfClose: false }); }; @@ -89,11 +89,9 @@ describe('createIcons', () => { it('should read elements from DOM and replace icon with alias name', () => { document.body.innerHTML = ``; - console.log(icons); - createIcons({ icons }); - const svg = getOriginalSvg('grid-3x3'); + const svg = getOriginalSvg('grid-3x3', 'grid'); expect(document.body.innerHTML).toBe(svg) expect(document.body.innerHTML).toMatchSnapshot() diff --git a/tools/build-icons/building/generateAliasesFile.mjs b/tools/build-icons/building/generateAliasesFile.mjs index 53957da41c..47e7a31811 100644 --- a/tools/build-icons/building/generateAliasesFile.mjs +++ b/tools/build-icons/building/generateAliasesFile.mjs @@ -12,6 +12,7 @@ export default async function generateAliasesFile({ iconFileExtension = '.js', aliases, aliasImportFileExtension, + aliasNamesOnly = false, separateAliasesFile = false, showLog = true, }) { @@ -24,14 +25,28 @@ export default async function generateAliasesFile({ // Generate Import for Icon VNodes await Promise.all( - icons.map(async (iconName) => { + icons.map(async (iconName, index) => { const componentName = toPascalCase(iconName); const iconAliases = aliases[iconName]?.aliases; - let importString = `// ${componentName} aliases\n`; + let importString = ''; - importString += getImportString(`${componentName}Icon`, iconName, aliasImportFileExtension); - importString += getImportString(`Lucide${componentName}`, iconName, aliasImportFileExtension); + if ((iconAliases != null && Array.isArray(iconAliases)) || !aliasNamesOnly) { + if (index > 0) { + importString += '\n'; + } + + importString += `// ${componentName} aliases\n`; + } + + if (!aliasNamesOnly) { + importString += getImportString(`${componentName}Icon`, iconName, aliasImportFileExtension); + importString += getImportString( + `Lucide${componentName}`, + iconName, + aliasImportFileExtension, + ); + } if (iconAliases != null && Array.isArray(iconAliases)) { await Promise.all( @@ -57,23 +72,24 @@ export default async function generateAliasesFile({ exportFileIcon, aliasImportFileExtension, ); - importString += getImportString( - `${componentNameAlias}Icon`, - exportFileIcon, - aliasImportFileExtension, - ); - importString += getImportString( - `Lucide${componentNameAlias}`, - exportFileIcon, - aliasImportFileExtension, - ); + if (!aliasNamesOnly) { + importString += getImportString( + `${componentNameAlias}Icon`, + exportFileIcon, + aliasImportFileExtension, + ); + + importString += getImportString( + `Lucide${componentNameAlias}`, + exportFileIcon, + aliasImportFileExtension, + ); + } }), ); } - importString += '\n'; - appendFile(importString, fileName, outputDirectory); }), ); diff --git a/tools/build-icons/main.mjs b/tools/build-icons/main.mjs index 1207a5d5a3..ff0e34b46e 100755 --- a/tools/build-icons/main.mjs +++ b/tools/build-icons/main.mjs @@ -31,6 +31,7 @@ const { importImportFileExtension = '', exportFileName = 'index.js', withAliases = false, + aliasNamesOnly = false, withDynamicImports = false, separateAliasesFile = false, aliasesFileExtension = '.js', @@ -66,6 +67,7 @@ async function buildIcons() { await generateAliasesFile({ iconNodes: icons, aliases, + aliasNamesOnly, iconFileExtension, outputDirectory: OUTPUT_DIR, fileExtension: aliasesFileExtension,