preact components

packages/icons-preact/build.mjs

@@ -13,30 +13,18 @@ export default createPreactComponent('${name}', '${namePascal}', ${JSON.stringif
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './icons/${namePascal}';`
-
-const typeDefinitionsTemplate = () => `/// <reference types="preact" />
-import { JSX, RefObject } from 'preact'
-
-interface TablerIconsProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
-  key?: string | number;
-  ref?: string | ((component: any) => any) | RefObject<any>;
-  color?: string
-  size?: string | number
-}
-
-// Generated icons`
-
-const indexTypeTemplate = ({
-  namePascal
-}) => `export declare const ${namePascal}: (props: TablerIconsProps) => JSX.Element;`
+}) => `export { default as ${namePascal} } from './${namePascal}';`
 
+const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 
 buildIcons({
   name: 'icons-preact',
   componentTemplate,
   indexItemTemplate,
-  typeDefinitionsTemplate,
-  indexTypeTemplate,
-  pascalCase: true
+  // typeDefinitionsTemplate,
+  // indexTypeTemplate,
+  aliasTemplate,
+  pascalCase: true,
+  indexFile: 'icons/index.ts',
+  extension: 'ts'
 })

packages/icons-preact/package.json

@@ -17,22 +17,24 @@
     "url": "git+https://github.com/tabler/tabler-icons.git",
     "directory": "packages/icons-preact"
   },
+  "amdName": "tabler-icons-preact",
   "main": "dist/cjs/tabler-icons-preact.js",
   "main:umd": "dist/umd/tabler-icons-preact.js",
   "module": "dist/esm/tabler-icons-preact.js",
   "unpkg": "dist/umd/tabler-icons-preact.min.js",
   "typings": "dist/tabler-icons-preact.d.ts",
-  "sideEffects": false,
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "scripts": {
-    "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm run build:bundles",
+    "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm typecheck && pnpm run build:bundles",
     "build:icons": "node build.mjs",
     "build:bundles": "rollup -c ./rollup.config.mjs",
     "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf ./src/icons/*.js",
-    "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom"
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.js && rm -rf ./src/icons/*.ts",
+    "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom",
+    "typecheck": "tsc"
   },
   "dependencies": {
     "@tabler/icons": "2.45.0"
@@ -49,7 +51,8 @@
     "babel-jest": "^29.4.1",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.4.1",
-    "preact": "^10.11.3"
+    "preact": "^10.5.13",
+    "typescript": "^5.3.3"
   },
   "jest": {
     "testEnvironmentOptions": {

packages/icons-preact/rollup.config.mjs

@@ -1,12 +1,13 @@
 import fs from 'fs'
 import { getRollupPlugins } from '../../.build/build-icons.mjs'
+import dts from "rollup-plugin-dts";
 
 const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
 
 const packageName = '@tabler/icons-preact';
 const outputFileName = 'tabler-icons-preact';
 const outputDir = 'dist';
-const inputs = ['./src/tabler-icons-preact.js'];
+const inputs = ['./src/tabler-icons-preact.ts'];
 const bundles = [
   {
     format: 'umd',
@@ -24,11 +25,6 @@ const bundles = [
     inputs,
     outputDir,
   },
-  {
-    format: 'es',
-    inputs,
-    outputDir,
-  },
   {
     format: 'esm',
     inputs,
@@ -38,30 +34,39 @@ const bundles = [
 ];
 
 const configs = bundles
-    .map(({ inputs, outputDir, format, minify, preserveModules }) =>
-        inputs.map(input => ({
-          input,
-          plugins: getRollupPlugins(pkg, minify),
-          external: ['preact', 'prop-types'],
-          output: {
-            name: packageName,
-            ...(preserveModules
-                ? {
-                  dir: `${outputDir}/${format}`,
-                }
-                : {
-                  file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
-                }),
-            preserveModules,
-            format,
-            sourcemap: true,
-            globals: {
-              preact: 'preact',
-              'prop-types': 'PropTypes',
-            },
-          },
-        })),
-    )
-    .flat();
+  .map(({ inputs, outputDir, format, minify, preserveModules }) =>
+    inputs.map(input => ({
+      input,
+      plugins: getRollupPlugins(pkg, minify),
+      external: ['preact', 'prop-types'],
+      output: {
+        name: packageName,
+        ...(preserveModules
+          ? {
+            dir: `${outputDir}/${format}`,
+          }
+          : {
+            file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
+          }),
+        preserveModules,
+        format,
+        sourcemap: true,
+        globals: {
+          preact: 'preact',
+          'prop-types': 'PropTypes',
+        },
+      },
+    })),
+  )
+  .flat();
 
-export default configs;
+export default [
+  {
+    input: inputs[0],
+    output: [{
+      file: `dist/${outputFileName}.d.ts`, format: "es"
+    }],
+    plugins: [dts()],
+  },
+  ...configs
+];

packages/icons-preact/src/aliases.ts

@@ -0,0 +1,3 @@
+export { default as IconAaa } from './icons/IconCircle';
+export { default as IconBbb } from './icons/IconSquare';
+export { default as IconCcc } from './icons/IconSquare';

packages/icons-preact/src/createPreactComponent.js

@@ -1,23 +0,0 @@
-import { h, toChildArray } from 'preact';
-import defaultAttributes from './defaultAttributes';
-
-export default (iconName, iconNamePascal, iconNode) => {
-  const Component = ({ color = 'currentColor', size = 24, stroke = 2, children, ...rest }) =>
-      h(
-          'svg',
-          {
-            ...defaultAttributes,
-            width: size,
-            height: size,
-            stroke: color,
-            'stroke-width': stroke,
-            class: `tabler-icon tabler-icon-${iconName}`,
-            ...rest,
-          },
-          [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)],
-      );
-
-  Component.displayName = `${iconNamePascal}`;
-
-  return Component;
-};

packages/icons-preact/src/createPreactComponent.ts

@@ -0,0 +1,36 @@
+import { h, toChildArray } from 'preact';
+import defaultAttributes from './defaultAttributes';
+import type { Icon, IconNode, IconProps } from './types';
+
+const createPreactComponent = (
+  iconName: string,
+  iconNamePascal: string,
+  iconNode: IconNode
+): Icon => {
+  const Component = ({
+    color = 'currentColor',
+    size = 24,
+    strokeWidth = 2,
+    children,
+    class: classes = '',
+    ...rest
+  }: IconProps) =>
+    h(
+      'svg',
+      {
+        ...defaultAttributes,
+        width: String(size),
+        height: size,
+        stroke: color,
+        strokeWidth: strokeWidth,
+        class: [`tabler-icon`, `tabler-icon-${iconName}`, classes].join(' '),
+      },
+      [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)]
+    );
+
+  Component.displayName = `${iconNamePascal}`;
+
+  return Component;
+};
+
+export default createPreactComponent;

packages/icons-preact/src/defaultAttributes.ts

@@ -1,3 +1,5 @@
+import type { JSX } from 'preact';
+
 export default {
   xmlns: 'http://www.w3.org/2000/svg',
   width: 24,
@@ -5,7 +7,7 @@ export default {
   viewBox: '0 0 24 24',
   fill: 'none',
   stroke: 'currentColor',
-  'stroke-width': 2,
-  'stroke-linecap': 'round',
-  'stroke-linejoin': 'round',
-};
+  'strokeWidth': 2,
+  'strokeLinecap': 'round',
+  'strokeLinejoin': 'round',
+} satisfies JSX.SVGAttributes;

packages/icons-preact/src/tabler-icons-preact.js

@@ -1,2 +0,0 @@
-export * from './icons';
-export { default as createReactComponent } from './createPreactComponent';

packages/icons-preact/src/tabler-icons-preact.ts

@@ -0,0 +1,7 @@
+export * from './icons/index';
+export * as icons from './icons/index';
+export * from './aliases';
+
+export { default as createReactComponent } from './createPreactComponent';
+
+export type { IconNode, IconProps, Icon } from './types';

packages/icons-preact/src/types.ts

@@ -0,0 +1,12 @@
+import type { FunctionComponent, JSX } from 'preact';
+
+export type IconNode = [elementName: keyof JSX.IntrinsicElements, attrs: Record<string, string>][];
+
+export interface IconProps
+  extends Partial<Omit<JSX.SVGAttributes, 'ref' | 'size' | 'stroke'>> {
+  color?: string;
+  size?: string | number;
+  stroke?: string | number;
+}
+
+export type Icon = FunctionComponent<IconProps>;

packages/icons-preact/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "declaration": false,
+    "noEmitOnError": true,
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "target": "ESNext",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "sourceMap": true,
+    "outDir": "./dist",
+    "jsx": "react-jsx"
+  },
+  "exclude": ["**/node_modules"]
+}

packages/icons-react/rollup.config.mjs

@@ -68,4 +68,5 @@ export default [
     }],
     plugins: [dts()],
   },
-  ...configs];
+  ...configs
+];

packages/icons-react/src/createReactComponent.ts

@@ -3,7 +3,7 @@ import {
   createElement,
 } from 'react';
 import defaultAttributes from './defaultAttributes';
-import { IconNode, IconProps } from './types';
+import type { IconNode, IconProps } from './types';
 
 const createReactComponent = (iconName: string, iconNamePascal: string, iconNode: IconNode) => {
   const Component = forwardRef<SVGSVGElement, IconProps>(

pnpm-lock.yaml

@@ -190,8 +190,11 @@ importers:
         specifier: ^29.4.1
         version: 29.4.2
       preact:
-        specifier: ^10.11.3
+        specifier: ^10.5.13
         version: 10.11.3
+      typescript:
+        specifier: ^5.3.3
+        version: 5.3.3
 
   packages/icons-react:
     dependencies: