feat: introduce TypeScript types for icons

README.md

@@ -1,16 +1,16 @@
 # @nulogy/icons
 
-> This is a collection of Material Icons that are used by Nulogy applications. This package is already imported into the `<Icon />` component of the [@nulogy/components](https://github.com/nulogy/design-system/tree/master/components), and the icons here can be chosen with the `icon` prop.
+> A collection of Icons that are used by Nulogy applications.
 
 ![npm (scoped)](https://img.shields.io/npm/v/@nulogy/css.svg)
 
 ## 📦 Installation
 
-If you don't have access to the React component, you can install these directly:
+The icons are required as a peer dependency of `@nulogy/components`. You can install them using:
 
 `$ yarn add @nulogy/icons`
 
-They can then be used in your application like any other `.svg`.
+It is recommended to use the icons is through the `icon` prop in the `<Icon />` component from `@nulogy/components`.
 
 ## ➕ Adding a new icon
 
@@ -25,4 +25,4 @@ To find and add a new icon:
 
 ## 💬 Questions
 
-- [#design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)
+- [#support-design-system](slack://channel?team=T024N2KKA&id=CBAFQ4X7X)

package.json

@@ -1,36 +1,41 @@
 {
-    "name": "@nulogy/icons",
-    "version": "4.10.3",
-    "description": "A collection of Nulogy's svg icons",
-    "author": "Nulogy <[email protected]> (https://github.com/nulogy)",
-    "homepage": "http://nulogy.design",
-    "repository": "https://github.com/nulogy/nds-icons",
-    "private": false,
-    "publishConfig": {
-        "access": "public"
-    },
-    "files": [
-        "/dist"
-    ],
-    "main": "dist/main.js",
-    "scripts": {
-        "build": "node collect-icon-svgs && rollup -c"
-    },
-    "devDependencies": {
-        "svgi": "^1.1.1",
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-transform-runtime": "^7.12.1",
-        "@babel/preset-env": "^7.12.1",
-        "@rollup/plugin-babel": "^5.2.1",
-        "@semantic-release/changelog": "^5.0.1",
-        "@semantic-release/commit-analyzer": "^8.0.1",
-        "@semantic-release/git": "^9.0.0",
-        "@semantic-release/github": "^7.1.1",
-        "@semantic-release/npm": "^7.0.6",
-        "@semantic-release/release-notes-generator": "^9.0.1",
-        "babel-plugin-inline-json-import": "^0.3.2",
-        "prettier": "3.2.5",
-        "rollup": "^2.32.1",
-        "semantic-release": "^17.2.1"
-    }
+  "name": "@nulogy/icons",
+  "version": "4.10.3",
+  "description": "A collection of Nulogy's svg icons",
+  "author": "Nulogy <[email protected]> (https://github.com/nulogy)",
+  "homepage": "http://nulogy.design",
+  "repository": "https://github.com/nulogy/nds-icons",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/main.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn generate:types && node src/collect-icon-svgs && rollup -c",
+    "format": "prettier --write \"**/*.{ts,js}\"",
+    "generate:types": "npx tsx src/generate-types.ts && yarn format"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@rollup/plugin-babel": "^5.2.1",
+    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/commit-analyzer": "^8.0.1",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/github": "^7.1.1",
+    "@semantic-release/npm": "^7.0.6",
+    "@semantic-release/release-notes-generator": "^9.0.1",
+    "babel-plugin-inline-json-import": "^0.3.2",
+    "prettier": "^3.3.3",
+    "rollup": "^2.32.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "semantic-release": "^17.2.1",
+    "svgi": "^1.1.1",
+    "typescript": "^5.7.2"
+  }
 }

rollup.config.js

@@ -1,18 +1,20 @@
 import babel from "@rollup/plugin-babel";
+import copy from "rollup-plugin-copy";
 
 export default {
-  input: "index.js",
+  input: "src/index.js",
   output: {
     name: "ndsIcons",
     file: "dist/main.js",
     format: "umd",
   },
   plugins: [
     babel({
-      /* exclude: globs to exclude */
       exclude: ["./node_modules/**/*"],
-      /* exclude: files to be transpiled by babel */
       extensions: [".js", ".jsx", ".json"],
     }),
+    copy({
+      targets: [{ src: "src/index.d.ts", dest: "dist" }],
+    }),
   ],
 };

collect-icon-svgs.js → src/collect-icon-svgs.js

@@ -1,8 +1,9 @@
 const fs = require("fs");
 const SVG = require("svgi");
+const path = require("path");
 
-const jsonPath = "assets/icons.json";
-const svgPath = "assets";
+const jsonPath = path.join(__dirname, "..", "assets", "icons.json");
+const svgPath = path.join(__dirname, "..", "assets");
 
 const parseSvg = (svg) => {
   const { nodes } = new SVG(svg).report();
@@ -19,7 +20,7 @@ const parseSvg = (svg) => {
   function getPath({ children }) {
     return children
       .filter(
-        (child) => child.type === "path" && child.properties.fill !== "none"
+        (child) => child.type === "path" && child.properties.fill !== "none",
       )
       .map((child) => child.properties.d);
   }

src/generate-types.ts

@@ -0,0 +1,31 @@
+import fs from "fs";
+import path from "path";
+
+const ASSETS_DIR = path.join(__dirname, "..", "assets");
+const TYPES_FILE = path.join(__dirname, "index.d.ts");
+
+function generateIconTypes() {
+  const iconNames = fs
+    .readdirSync(ASSETS_DIR)
+    .filter((file) => file.endsWith(".svg"))
+    .map((file) => file.replace(".svg", ""));
+
+  const declarationContent = `declare module "@nulogy/icons" {
+  export interface IconData {
+    path: string[];
+    viewBox: string;
+  }
+
+  export type IconName = ${iconNames.map((name) => `"${name}"`).join(" | ")};
+
+  const icons: { [K in IconName]: IconData };
+
+  export default icons;
+}`;
+
+  fs.writeFileSync(TYPES_FILE, declarationContent);
+
+  console.log(`Generated types for ${iconNames.length} icons 🎉`);
+}
+
+generateIconTypes();

src/index.js

@@ -0,0 +1,3 @@
+import icons from "../assets/icons.json";
+
+export default icons;