vue components

packages/icons-solidjs/build.mjs

@@ -15,22 +15,6 @@ const indexItemTemplate = ({
   namePascal
 }) => `export { default as ${namePascal} } from './${namePascal}';`
 
-const typeDefinitionsTemplate = () => `/// <reference types="solid-js" />
-import { JSX } from 'solid-js'
-interface TablerIconsProps extends Partial<JSX.IntrinsicElements & JSX.SvgSVGAttributes<SVGSVGElement>> {
-  key?: string | number;
-  ref?: string | ((component: any) => any);
-  color?: string
-  size?: string | number
-  strokeWidth?: string | number
-  class?: string
-}
-// Generated icons`
-
-const indexTypeTemplate = ({
-  namePascal
-}) => `export declare const ${namePascal}: (props: TablerIconsProps) => JSX.Element;`
-
 const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 
 buildIcons({

packages/icons-vue/build.mjs

@@ -13,28 +13,15 @@ export default createVueComponent('${name}', '${namePascal}', ${JSON.stringify(c
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './icons/${namePascal}';`
-
-const typeDefinitionsTemplate = () => `import { SVGAttributes, FunctionalComponent } from 'vue';
-declare module '@tabler/icons-vue'
-
-// Create interface extending SVGAttributes
-export interface SVGProps extends Partial<SVGAttributes> {
-  size?: 24 | number
-  strokeWidth?: number | string
-}
-
-// Generated icons`
-
-const indexTypeTemplate = ({
-  namePascal
-}) => `export declare const ${namePascal}: (props: SVGProps) => FunctionalComponent<SVGProps>;`
+}) => `export { default as ${namePascal} } from './${namePascal}';`
 
+const aliasTemplate = ({ fromPascal, toPascal }) => `export { default as Icon${fromPascal} } from './icons/Icon${toPascal}';\n`
 
 buildIcons({
   name: 'icons-vue',
   componentTemplate,
   indexItemTemplate,
-  typeDefinitionsTemplate,
-  indexTypeTemplate
+  aliasTemplate,
+  extension: 'ts',
+  indexFile: 'icons/index.ts',
 })

packages/icons-vue/package.json

@@ -31,7 +31,7 @@
     "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",
+    "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"
   },
   "dependencies": {

packages/icons-vue/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-vue';
 const outputFileName = 'tabler-icons-vue';
 const outputDir = 'dist';
-const inputs = ['./src/tabler-icons-vue.js'];
+const inputs = ['./src/tabler-icons-vue.ts'];
 const bundles = [
   {
     format: 'umd',
@@ -24,11 +25,6 @@ const bundles = [
     inputs,
     outputDir,
   },
-  {
-    format: 'es',
-    inputs,
-    outputDir,
-  },
   {
     format: 'esm',
     inputs,
@@ -63,4 +59,19 @@ const configs = bundles
     )
     .flat();
 
-export default configs;
+export default [
+  {
+    input: inputs[0],
+    output: [{
+      file: `dist/${outputFileName}.d.ts`, format: "es"
+    }],
+    plugins: [
+      dts({
+        compilerOptions: {
+          preserveSymlinks: false
+        }
+      })
+    ],
+  },
+  ...configs
+];

packages/icons-vue/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-vue/src/createVueComponent.js

@@ -1,27 +0,0 @@
-import { h } from 'vue';
-import defaultAttributes from './defaultAttributes';
-
-const createVueComponent = (iconName, iconNamePascal, iconNode) => (
-    { size, color, strokeWidth, ...props },
-    { attrs, slots }
-) => {
-  return h(
-      'svg',
-      {
-        ...defaultAttributes,
-        width: size || defaultAttributes.width,
-        height: size || defaultAttributes.height,
-        stroke: color || defaultAttributes.stroke,
-        'stroke-width': strokeWidth || defaultAttributes['stroke-width'],
-        ...attrs,
-        class: ['tabler-icon', `tabler-icon-${iconName}`, attrs?.class || ''],
-        ...props,
-      },
-      [
-        ...iconNode.map(child => h(...child)),
-        ...(slots.default ? [slots.default()] : [])
-      ],
-  );
-};
-
-export default createVueComponent;

packages/icons-vue/src/createVueComponent.ts

@@ -0,0 +1,34 @@
+import { h } from 'vue';
+import type { SVGAttributes, FunctionalComponent } from 'vue';
+import defaultAttributes from './defaultAttributes';
+
+export interface SVGProps extends Partial<SVGAttributes> {
+  size?: 24 | number;
+  strokeWidth?: number | string;
+  absoluteStrokeWidth?: boolean;
+}
+
+export type IconNode = [elementName: string, attrs: Record<string, string>][];
+export type Icon = FunctionalComponent<SVGProps>;
+
+
+const createVueComponent =
+  (iconName: string, iconNamePascal: string, iconNode: IconNode): Icon =>
+  ({ size, color, strokeWidth, ...props }, { attrs, slots }) => {
+    return h(
+      'svg',
+      {
+        ...defaultAttributes,
+        width: size || defaultAttributes.width,
+        height: size || defaultAttributes.height,
+        stroke: color || defaultAttributes.stroke,
+        'stroke-width': strokeWidth || defaultAttributes['stroke-width'],
+        ...attrs,
+        class: ['tabler-icon', `tabler-icon-${iconName}`, attrs?.class || ''],
+        ...props,
+      },
+      [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])]
+    );
+  };
+
+export default createVueComponent;

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

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

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

@@ -0,0 +1,5 @@
+export * from './icons/index';
+export * as icons from './icons/index';
+export * from './aliases';
+
+export { default as createVueComponent } from './createVueComponent';

packages/icons-vue/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+  }
+}