diff --git a/packages/icons-preact/build.mjs b/packages/icons-preact/build.mjs
index 7dc82a451..23ed988e1 100644
--- a/packages/icons-preact/build.mjs
+++ b/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 = () => `///
-import { JSX, RefObject } from 'preact'
-
-interface TablerIconsProps extends Partial> {
- key?: string | number;
- ref?: string | ((component: any) => any) | RefObject;
- 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'
})
diff --git a/packages/icons-preact/package.json b/packages/icons-preact/package.json
index 599f709d6..0428126ca 100644
--- a/packages/icons-preact/package.json
+++ b/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": {
diff --git a/packages/icons-preact/rollup.config.mjs b/packages/icons-preact/rollup.config.mjs
index 60f3360f0..42a61e9f2 100644
--- a/packages/icons-preact/rollup.config.mjs
+++ b/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
+];
diff --git a/packages/icons-preact/src/aliases.ts b/packages/icons-preact/src/aliases.ts
new file mode 100644
index 000000000..e62d20b61
--- /dev/null
+++ b/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';
diff --git a/packages/icons-preact/src/createPreactComponent.js b/packages/icons-preact/src/createPreactComponent.js
deleted file mode 100644
index 78f76f156..000000000
--- a/packages/icons-preact/src/createPreactComponent.js
+++ /dev/null
@@ -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;
-};
diff --git a/packages/icons-preact/src/createPreactComponent.ts b/packages/icons-preact/src/createPreactComponent.ts
new file mode 100644
index 000000000..ed60a15f4
--- /dev/null
+++ b/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;
diff --git a/packages/icons-preact/src/defaultAttributes.js b/packages/icons-preact/src/defaultAttributes.ts
similarity index 50%
rename from packages/icons-preact/src/defaultAttributes.js
rename to packages/icons-preact/src/defaultAttributes.ts
index 8ae7d46ea..550697042 100644
--- a/packages/icons-preact/src/defaultAttributes.js
+++ b/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;
diff --git a/packages/icons-preact/src/tabler-icons-preact.js b/packages/icons-preact/src/tabler-icons-preact.js
deleted file mode 100644
index 70f99d97d..000000000
--- a/packages/icons-preact/src/tabler-icons-preact.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './icons';
-export { default as createReactComponent } from './createPreactComponent';
diff --git a/packages/icons-preact/src/tabler-icons-preact.ts b/packages/icons-preact/src/tabler-icons-preact.ts
new file mode 100644
index 000000000..4db406fd6
--- /dev/null
+++ b/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';
diff --git a/packages/icons-preact/src/types.ts b/packages/icons-preact/src/types.ts
new file mode 100644
index 000000000..39e9b7e7e
--- /dev/null
+++ b/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][];
+
+export interface IconProps
+ extends Partial> {
+ color?: string;
+ size?: string | number;
+ stroke?: string | number;
+}
+
+export type Icon = FunctionComponent;
diff --git a/packages/icons-preact/tsconfig.json b/packages/icons-preact/tsconfig.json
new file mode 100644
index 000000000..23e3877e3
--- /dev/null
+++ b/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"]
+}
diff --git a/packages/icons-react/rollup.config.mjs b/packages/icons-react/rollup.config.mjs
index c84cee9e0..21e501718 100644
--- a/packages/icons-react/rollup.config.mjs
+++ b/packages/icons-react/rollup.config.mjs
@@ -68,4 +68,5 @@ export default [
}],
plugins: [dts()],
},
- ...configs];
+ ...configs
+];
diff --git a/packages/icons-react/src/createReactComponent.ts b/packages/icons-react/src/createReactComponent.ts
index b20eb496c..f7c79a074 100644
--- a/packages/icons-react/src/createReactComponent.ts
+++ b/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(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 593849632..bba799f0d 100644
--- a/pnpm-lock.yaml
+++ b/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: