diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 471102f4b..cc12ddd8f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -159,7 +159,7 @@ Simply run `pnpm generate component` and follow the prompts, and you'll be well ### Adding Icons to LaunchPad - Add the SVG body content into a new symbol entry with id `lp-icon-{name}` in the `/src/image/sprite.svg` file in the `@launchpad/icons` package. -- Add its `id` (minus prefix `lp-icon`) to the icons array in `/src/types.ts`. +- Run `pnpm icons:build` to add its `id` (minus prefix `lp-icon`) to the icons array in `/src/types.ts`. - Run `pnpm storybook` and visit the "Icons" page to ensure your icon was generated properly. --- diff --git a/package.json b/package.json index 003b30db7..f1b5ea298 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "format": "prettier --write \"**/*.{ts,tsx,md}\"", "generate": "plop", "graph": "nx affected:graph", + "icons:build": "npx ts-node -O '{\"types\": [\"node\"], \"module\": \"nodenext\"}' ./scripts/build-icons.ts", "lint": "eslint '**/*.{ts,tsx,js}' --ignore-pattern '/packages/' --ignore-pattern '/apps/'", "lint:ci": "pnpm build:transform && pnpm lint && pnpm lint:packages", "lint:packages": "nx affected --target=lint", diff --git a/scripts/build-icons.ts b/scripts/build-icons.ts new file mode 100644 index 000000000..e68b73d95 --- /dev/null +++ b/scripts/build-icons.ts @@ -0,0 +1,23 @@ +import fs from 'fs'; +import path from 'path'; + +const iconsPath: string = path.join(__dirname, '../packages/icons/src/img/sprite.svg'); +const icons: string = fs.readFileSync(iconsPath, 'utf8'); +const matchResult: RegExpMatchArray | null = icons.match(/id="lp-icon-([a-z-]+)"/g); + +if (matchResult) { + const ids: string[] = matchResult.map((id: string) => id.slice(12, -1)); + const stylizedString: string = JSON.stringify(ids, null, 2).replace(/"/g, "'").slice(0, -2) + ','; + const outputPath: string = path.join(__dirname, '../packages/icons/src/types.ts'); + const output: string = `const icons = ${stylizedString} +] as const; +type IconName = (typeof icons)[number]; + +export type { IconName }; +export { icons }; +`; + + fs.writeFileSync(outputPath, output, 'utf8'); +} else { + console.log('No icon IDs found in the SVG file.'); +}