lucide-react - Generate types for all exported icons (#243)

* Generate types for all exported icons

* renderUniqueKey will generate duplicate keys if the SVG attributse are identical.
Fixed by adding an index attribute to the hash.

* Revert "renderUniqueKey will generate duplicate keys if the SVG attributse are identical. Fixed by adding an index attribute to the hash."

This reverts commit 1c42b39e

* Update packages/lucide-react/build-types.js

* Update packages/lucide-react/build-types.js

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

packages/lucide-react/build-types.js

@@ -0,0 +1,54 @@
+const fs = require("fs")
+const path = require("path")
+const srcDirectory = path.join(__dirname, "dist")
+
+// Declare type definitions
+const typeDefinitions = `
+/// <reference types="react" />
+import { SVGAttributes } from 'react'
+
+// Create interface extending SVGAttributes
+export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
+    color?: string
+    size?: string | number
+    stroke?: string | number
+    strokeWidth?: string | number
+}
+
+// Generated icons
+`
+
+// Write type definitions to file
+fs.writeFileSync(
+  path.join(srcDirectory, "index.d.ts"),
+  typeDefinitions,
+  "utf-8",
+)
+
+const iconsFolder = "./build/icons"
+fs.readdir(iconsFolder, (err, files) => {
+
+  files.forEach(file => {
+
+    const fileName = file.replace(".js", "")
+
+    // Convert fileName to component name
+    const componentName = fileName.split("-")
+                                  .map(word => word[0].toUpperCase() + word.substr(1, word.length))
+                                  .join("")
+
+    // Declare component type
+    const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`
+
+    // Add component to the types file
+    fs.appendFileSync(
+      path.join(srcDirectory, "index.d.ts"),
+      exportTypeString,
+      "utf-8",
+    )
+
+  })
+
+  console.log("Generated index.d.ts file with", files.length, "icons")
+
+})

packages/lucide-react/package.json

@@ -16,11 +16,13 @@
   "main:umd": "dist/umd/lucide-react.js",
   "module": "dist/esm/lucide-react.js",
   "unpkg": "dist/umd/lucide-react.min.js",
+  "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:bundles",
+    "build": "yarn clean && yarn build:move && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
     "clean": "rm -rf dist && rm -rf build",
     "build:move": "cp -av src build",
     "build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/build --templateSrc=../packages/lucide-react/scripts/exportTemplate --camelizeAttrs --noDefaultAttrs --renderUniqueKey",
+    "build:types": "node build-types.js",
     "build:es": "yarn --cwd ../../ babel packages/lucide-react/build -d packages/lucide-react/dist/esm",
     "build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-react/rollup.config.js",
     "test": "jest"