fix: fix icons svelte package

.build/build-icons.mjs

@@ -29,35 +29,41 @@ export const buildIcons = ({
   extension = 'js',
   pretty = true,
   key = true,
-  pascalCase = false
+  pascalCase = false,
+  pascalName = true,
+  indexFile = 'icons.js'
 }) => {
   const DIST_DIR = path.resolve(PACKAGES_DIR, name),
-      svgFiles = readSvgs()
+    svgFiles = readSvgs()
 
   let index = []
   let typings = []
 
   svgFiles.forEach((svgFile, i) => {
+    if (i > 100) {
+      return;
+    }
+
     const children = svgFile.obj.children
-        .map(({
-          name,
-          attributes
-        }, i) => {
-          if (key) {
-            attributes.key = `svg-${i}`
-          }
-
-          if(pascalCase) {
-            attributes.strokeWidth = attributes['stroke-width']
-            delete attributes['stroke-width']
-          }
-
-          return [name, attributes]
-        })
-        .filter((i) => {
-          const [name, attributes] = i
-          return !attributes.d || attributes.d !== 'M0 0h24v24H0z'
-        })
+      .map(({
+        name,
+        attributes
+      }, i) => {
+        if (key) {
+          attributes.key = `svg-${i}`
+        }
+
+        if (pascalCase) {
+          attributes.strokeWidth = attributes['stroke-width']
+          delete attributes['stroke-width']
+        }
+
+        return [name, attributes]
+      })
+      .filter((i) => {
+        const [name, attributes] = i
+        return !attributes.d || attributes.d !== 'M0 0h24v24H0z'
+      })
 
     // process.stdout.write(`Building ${i}/${svgFiles.length}: ${svgFile.name.padEnd(42)}\r`)
 
@@ -75,7 +81,7 @@ export const buildIcons = ({
       parser: 'babel'
     }) : component
 
-    let filePath = path.resolve(DIST_DIR, 'src/icons', `${svgFile.namePascal}.${extension}`)
+    let filePath = path.resolve(DIST_DIR, 'src/icons', `${pascalName ? svgFile.namePascal : svgFile.name}.${extension}`)
     fs.writeFileSync(filePath, output, 'utf-8')
 
     index.push(indexItemTemplate({
@@ -83,16 +89,20 @@ export const buildIcons = ({
       namePascal: svgFile.namePascal
     }))
 
-    typings.push(indexTypeTemplate({
-      name: svgFile.name,
-      namePascal: svgFile.namePascal
-    }))
+    if (indexTypeTemplate) {
+      typings.push(indexTypeTemplate({
+        name: svgFile.name,
+        namePascal: svgFile.namePascal
+      }))
+    }
   })
 
-  fs.writeFileSync(path.resolve(DIST_DIR, `./src/icons.js`), index.join('\n'), 'utf-8')
+  fs.writeFileSync(path.resolve(DIST_DIR, `./src/${indexFile}`), index.join('\n'), 'utf-8')
 
-  fs.ensureDirSync(path.resolve(DIST_DIR, `./dist/`))
-  fs.writeFileSync(path.resolve(DIST_DIR, `./dist/tabler-${name}.d.ts`), typeDefinitionsTemplate() + '\n' + typings.join('\n'), 'utf-8')
+  if (typeDefinitionsTemplate) {
+    fs.ensureDirSync(path.resolve(DIST_DIR, `./dist/`))
+    fs.writeFileSync(path.resolve(DIST_DIR, `./dist/tabler-${name}.d.ts`), typeDefinitionsTemplate() + '\n' + typings.join('\n'), 'utf-8')
+  }
 }
 
 export const getRollupPlugins = (pkg, minify) => {

.gitignore

@@ -28,9 +28,11 @@ random-icons.svg
 packages/icons*/icons/*
 packages/icons*/src/icons/*
 packages/icons*/src/icons.js
+packages/icons*/src/icons.ts
 packages/icons*/LICENSE
 packages/icons*/stats/*
 packages/icons*/icons/*
 
 .turbo
 .sass-cache
+aliases.json

packages/icons-svelte/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@babel/preset-env"]
-}

packages/icons-svelte/.gitignore

@@ -0,0 +1,2 @@
+src/icons/*.svelte
+.svelte-kit

packages/icons-svelte/build.mjs

@@ -10,7 +10,11 @@ const componentTemplate = ({
   return `\
 <script lang="ts">
 import Icon from '../Icon.svelte';
-const iconNode = ${JSON.stringify(children)};
+import type { IconNode, IconProps } from '../types.js';
+
+type $$Props = IconProps;
+
+const iconNode: IconNode = ${JSON.stringify(children)};
 </script>
 <Icon name="${name}" {...$$props} iconNode={iconNode}>
   <slot/>
@@ -21,39 +25,15 @@ const iconNode = ${JSON.stringify(children)};
 const indexItemTemplate = ({
   name,
   namePascal
-}) => `export { default as ${namePascal} } from './icons/${namePascal}.svelte';`
-
-const typeDefinitionsTemplate = () => `/// <reference types="svelte" />
-/// <reference types="svelte2tsx/svelte-jsx" />
-import { SvelteComponentTyped } from "svelte";
-
-interface IconProps extends Partial<svelte.JSX.SVGProps<SVGSVGElement>> {
-  color?: string
-  size?: number,
-  stroke?: number,
-  class?: string
-}
-
-interface IconEvents {
-  [evt: string]: CustomEvent<any>;
-}
-
-export type Icon = SvelteComponentTyped<IconProps, IconEvents, {}>
-
-// Generated icons`
-
-const indexTypeTemplate = ({
-  namePascal
-}) => `export declare class ${namePascal} extends SvelteComponentTyped<IconProps, IconEvents, {}> {}`
-
+}) => `export { default as ${namePascal} } from './${name}.svelte';`
 
 buildIcons({
   name: 'icons-svelte',
   componentTemplate,
   indexItemTemplate,
-  typeDefinitionsTemplate,
-  indexTypeTemplate,
   extension: 'svelte',
   pretty: false,
-  key: false
+  key: false,
+  indexFile: 'icons/index.ts',
+  pascalName: false,
 })

packages/icons-svelte/package.json

@@ -18,55 +18,52 @@
     "directory": "packages/icons-svelte"
   },
   "type": "module",
-  "main": "dist/esm/packages/icons-svelte/src/tabler-icons-svelte.js",
-  "module": "dist/esm/packages/icons-svelte/src/tabler-icons-svelte.js",
-  "svelte": "dist/svelte/tabler-icons-svelte.js",
-  "typings": "dist/tabler-icons-svelte.d.ts",
-  "sideEffects": false,
-  "files": [
-    "dist"
-  ],
+  "main": "dist/tabler-icons-svelte.js",
   "exports": {
     ".": {
       "types": "./dist/tabler-icons-svelte.d.ts",
-      "svelte": "./dist/svelte/tabler-icons-svelte.js"
+      "svelte": "./dist/tabler-icons-svelte.js",
+      "default": "./dist/tabler-icons-svelte.js"
+    },
+    "./icons": {
+      "types": "./dist/tabler-icons-svelte.d.ts",
+      "svelte": "./dist/tabler-icons-svelte.js"
     },
-    "./dist/svelte/Icon.svelte": "./dist/svelte/Icon.svelte",
-    "./dist/svelte/icons/*.svelte": "./dist/svelte/icons/*.svelte"
+    "./icons/*": {
+      "types": "./dist/icons/*.svelte.d.ts",
+      "svelte": "./dist/icons/*.svelte"
+    }
   },
+  "typings": "dist/tabler-icons-svelte.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm run build:bundles && pnpm build:strip",
+    "build": "pnpm run clean && pnpm run copy:license && pnpm run build:icons && pnpm run build:package",
     "build:icons": "node build.mjs",
-    "build:bundles": "rollup -c ./rollup.config.mjs",
-    "build:strip": "svelte-strip strip src/ dist/svelte",
+    "build:package": "svelte-package --input ./src",
     "copy:license": "cp ../../LICENSE ./LICENSE",
-    "clean": "rm -rf dist && rm -rf ./src/icons/*.svelte",
+    "clean": "rm -rf dist && rm -rf ./src/icons/*.svelte && rm -rf ./src/icons.js && rm -rf ./src/icons.ts",
     "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom"
   },
   "dependencies": {
     "@tabler/icons": "2.45.0"
   },
   "devDependencies": {
-    "@testing-library/svelte": "^3.0.3",
-    "@tsconfig/svelte": "^3.0.0",
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/svelte": "^4.0.2",
+    "@tsconfig/svelte": "^5.0.0",
     "babel-jest": "^29.4.1",
     "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
-    "rollup-plugin-svelte": "^7.1.0",
-    "svelte": "^3.53.1",
-    "svelte-check": "^2.9.2",
-    "svelte-jester": "^2.3.2",
-    "svelte-preprocess": "^4.10.7",
-    "svelte-strip": "^1.0.3",
-    "typescript": "^4.9.3"
+    "svelte": "^4.0.1",
+    "svelte-check": "^3.4.4",
+    "svelte-preprocess": "^5.0.4",
+    "typescript": "^5.1.6"
   },
   "peerDependencies": {
     "svelte": ">=3 <5"
-  },
-  "jest": {
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.svelte$": "svelte-jester"
-    }
   }
 }

packages/icons-svelte/rollup.config.mjs

@@ -1,73 +0,0 @@
-import svelte from 'rollup-plugin-svelte';
-import resolve from '@rollup/plugin-node-resolve';
-import svelteConfig from './svelte.config.mjs';
-import fs from 'fs'
-import { getRollupPlugins } from '../../.build/build-icons.mjs'
-
-const pkg = JSON.parse(fs.readFileSync('package.json', 'utf-8'))
-
-const packageName = '@tabler/icons-svelte';
-const outputFileName = 'tabler-icons-svelte';
-const outputDir = 'dist';
-const inputs = ['./src/tabler-icons-svelte.js'];
-const bundles = [
-  {
-    format: 'esm',
-    inputs,
-    outputDir,
-    preserveModules: true,
-  },
-  {
-    format: 'svelte',
-    inputs,
-    outputDir,
-    preserveModules: true,
-  },
-];
-
-const configs = bundles
-    .map(({ inputs, outputDir, format, minify, preserveModules }) =>
-        inputs.map(input => ({
-          input,
-          plugins: [
-            ...(format !== 'svelte' ? [
-              svelte({
-                ...svelteConfig,
-                include: 'src/**/*.svelte',
-                compilerOptions: {
-                  dev: false,
-                  css: false,
-                  hydratable: true,
-                },
-                emitCss: false,
-              }),
-              resolve({
-                browser: true,
-                exportConditions: ['svelte'],
-                extensions: ['.svelte']
-              }),
-            ] : []),
-            ...getRollupPlugins(pkg, minify),
-          ],
-          external: format === 'svelte' ? [/\.svelte/] : ['svelte'],
-          output: {
-            name: packageName,
-            ...(preserveModules
-                ? {
-                  dir: `${outputDir}/${format}`,
-                }
-                : {
-                  file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
-                }),
-            preserveModules,
-            format: format === 'svelte' ? 'esm' : format,
-            sourcemap: true,
-            globals: {
-              svelte: 'svelte',
-            },
-          },
-        })),
-    )
-    .flat();
-
-export default configs;

packages/icons-svelte/src/Icon.svelte

@@ -1,10 +1,12 @@
-<script>
-  import defaultAttributes from './defaultAttributes'
-  export let name
-  export let color = 'currentColor'
-  export let size = 24
-  export let stroke = 2
-  export let iconNode
+<script lang="ts">
+  import defaultAttributes from "./defaultAttributes";
+  import type { IconNode } from "./types";
+
+  export let name: string;
+  export let color: string = "currentColor";
+  export let size: number | string = 24;
+  export let strokeWidth: number | string = 2;
+  export let iconNode: IconNode;
 </script>
 
 <svg
@@ -13,11 +15,11 @@
   width={size}
   height={size}
   stroke={color}
-  stroke-width={stroke}
-  class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ''}`}
+  stroke-width={strokeWidth}
+  class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ""}`}
 >
   {#each iconNode as [tag, attrs]}
-    <svelte:element this={tag} {...attrs}/>
+    <svelte:element this={tag} {...attrs} />
   {/each}
   <slot />
 </svg>

packages/icons-svelte/src/aliases.ts

@@ -0,0 +1,101 @@
+export { default as Icon12Hours } from "./icons/12-hours.svelte";
+export { default as Icon123 } from "./icons/123.svelte";
+export { default as Icon24Hours } from "./icons/24-hours.svelte";
+export { default as Icon2fa } from "./icons/2fa.svelte";
+export { default as Icon360View } from "./icons/360-view.svelte";
+export { default as Icon360 } from "./icons/360.svelte";
+export { default as Icon3dCubeSphereOff } from "./icons/3d-cube-sphere-off.svelte";
+export { default as Icon3dCubeSphere } from "./icons/3d-cube-sphere.svelte";
+export { default as Icon3dRotate } from "./icons/3d-rotate.svelte";
+export { default as IconAB2 } from "./icons/a-b-2.svelte";
+export { default as IconABOff } from "./icons/a-b-off.svelte";
+export { default as IconAB } from "./icons/a-b.svelte";
+export { default as IconAbacusOff } from "./icons/abacus-off.svelte";
+export { default as IconAbacus } from "./icons/abacus.svelte";
+export { default as IconAbc } from "./icons/abc.svelte";
+export { default as IconAccessPointOff } from "./icons/access-point-off.svelte";
+export { default as IconAccessPoint } from "./icons/access-point.svelte";
+export { default as IconAccessibleOffFilled } from "./icons/accessible-off-filled.svelte";
+export { default as IconAccessibleOff } from "./icons/accessible-off.svelte";
+export { default as IconAccessible } from "./icons/accessible.svelte";
+export { default as IconActivityHeartbeat } from "./icons/activity-heartbeat.svelte";
+export { default as IconActivity } from "./icons/activity.svelte";
+export { default as IconAd2 } from "./icons/ad-2.svelte";
+export { default as IconAdCircleFilled } from "./icons/ad-circle-filled.svelte";
+export { default as IconAdCircleOff } from "./icons/ad-circle-off.svelte";
+export { default as IconAdCircle } from "./icons/ad-circle.svelte";
+export { default as IconAdFilled } from "./icons/ad-filled.svelte";
+export { default as IconAdOff } from "./icons/ad-off.svelte";
+export { default as IconAd } from "./icons/ad.svelte";
+export { default as IconAddressBookOff } from "./icons/address-book-off.svelte";
+export { default as IconAddressBook } from "./icons/address-book.svelte";
+export { default as IconAdjustmentsAlt } from "./icons/adjustments-alt.svelte";
+export { default as IconAdjustmentsBolt } from "./icons/adjustments-bolt.svelte";
+export { default as IconAdjustmentsCancel } from "./icons/adjustments-cancel.svelte";
+export { default as IconAdjustmentsCheck } from "./icons/adjustments-check.svelte";
+export { default as IconAdjustmentsCode } from "./icons/adjustments-code.svelte";
+export { default as IconAdjustmentsCog } from "./icons/adjustments-cog.svelte";
+export { default as IconAdjustmentsDollar } from "./icons/adjustments-dollar.svelte";
+export { default as IconAdjustmentsDown } from "./icons/adjustments-down.svelte";
+export { default as IconAdjustmentsExclamation } from "./icons/adjustments-exclamation.svelte";
+export { default as IconAdjustmentsFilled } from "./icons/adjustments-filled.svelte";
+export { default as IconAdjustmentsHeart } from "./icons/adjustments-heart.svelte";
+export { default as IconAdjustmentsHorizontal } from "./icons/adjustments-horizontal.svelte";
+export { default as IconAdjustmentsMinus } from "./icons/adjustments-minus.svelte";
+export { default as IconAdjustmentsOff } from "./icons/adjustments-off.svelte";
+export { default as IconAdjustmentsPause } from "./icons/adjustments-pause.svelte";
+export { default as IconAdjustmentsPin } from "./icons/adjustments-pin.svelte";
+export { default as IconAdjustmentsPlus } from "./icons/adjustments-plus.svelte";
+export { default as IconAdjustmentsQuestion } from "./icons/adjustments-question.svelte";
+export { default as IconAdjustmentsSearch } from "./icons/adjustments-search.svelte";
+export { default as IconAdjustmentsShare } from "./icons/adjustments-share.svelte";
+export { default as IconAdjustmentsStar } from "./icons/adjustments-star.svelte";
+export { default as IconAdjustmentsUp } from "./icons/adjustments-up.svelte";
+export { default as IconAdjustmentsX } from "./icons/adjustments-x.svelte";
+export { default as IconAdjustments } from "./icons/adjustments.svelte";
+export { default as IconAerialLift } from "./icons/aerial-lift.svelte";
+export { default as IconAffiliateFilled } from "./icons/affiliate-filled.svelte";
+export { default as IconAffiliate } from "./icons/affiliate.svelte";
+export { default as IconAirBalloon } from "./icons/air-balloon.svelte";
+export { default as IconAirConditioningDisabled } from "./icons/air-conditioning-disabled.svelte";
+export { default as IconAirConditioning } from "./icons/air-conditioning.svelte";
+export { default as IconAirTrafficControl } from "./icons/air-traffic-control.svelte";
+export { default as IconAlarmAverage } from "./icons/alarm-average.svelte";
+export { default as IconAlarmFilled } from "./icons/alarm-filled.svelte";
+export { default as IconAlarmMinusFilled } from "./icons/alarm-minus-filled.svelte";
+export { default as IconAlarmMinus } from "./icons/alarm-minus.svelte";
+export { default as IconAlarmOff } from "./icons/alarm-off.svelte";
+export { default as IconAlarmPlusFilled } from "./icons/alarm-plus-filled.svelte";
+export { default as IconAlarmPlus } from "./icons/alarm-plus.svelte";
+export { default as IconAlarmSnoozeFilled } from "./icons/alarm-snooze-filled.svelte";
+export { default as IconAlarmSnooze } from "./icons/alarm-snooze.svelte";
+export { default as IconAlarm } from "./icons/alarm.svelte";
+export { default as IconAlbumOff } from "./icons/album-off.svelte";
+export { default as IconAlbum } from "./icons/album.svelte";
+export { default as IconAlertCircleFilled } from "./icons/alert-circle-filled.svelte";
+export { default as IconAlertCircleOff } from "./icons/alert-circle-off.svelte";
+export { default as IconAlertCircle } from "./icons/alert-circle.svelte";
+export { default as IconAlertHexagonFilled } from "./icons/alert-hexagon-filled.svelte";
+export { default as IconAlertHexagonOff } from "./icons/alert-hexagon-off.svelte";
+export { default as IconAlertHexagon } from "./icons/alert-hexagon.svelte";
+export { default as IconAlertOctagonFilled } from "./icons/alert-octagon-filled.svelte";
+export { default as IconAlertOctagon } from "./icons/alert-octagon.svelte";
+export { default as IconAlertSmallOff } from "./icons/alert-small-off.svelte";
+export { default as IconAlertSmall } from "./icons/alert-small.svelte";
+export { default as IconAlertSquareFilled } from "./icons/alert-square-filled.svelte";
+export { default as IconAlertSquareRoundedFilled } from "./icons/alert-square-rounded-filled.svelte";
+export { default as IconAlertSquareRoundedOff } from "./icons/alert-square-rounded-off.svelte";
+export { default as IconAlertSquareRounded } from "./icons/alert-square-rounded.svelte";
+export { default as IconAlertSquare } from "./icons/alert-square.svelte";
+export { default as IconAlertTriangleFilled } from "./icons/alert-triangle-filled.svelte";
+export { default as IconAlertTriangleOff } from "./icons/alert-triangle-off.svelte";
+export { default as IconAlertTriangle } from "./icons/alert-triangle.svelte";
+export { default as IconAlienFilled } from "./icons/alien-filled.svelte";
+export { default as IconAlien } from "./icons/alien.svelte";
+export { default as IconAlignBoxBottomCenterFilled } from "./icons/align-box-bottom-center-filled.svelte";
+export { default as IconAlignBoxBottomCenter } from "./icons/align-box-bottom-center.svelte";
+export { default as IconAlignBoxBottomLeftFilled } from "./icons/align-box-bottom-left-filled.svelte";
+export { default as IconAlignBoxBottomLeft } from "./icons/align-box-bottom-left.svelte";
+export { default as IconAlignBoxBottomRightFilled } from "./icons/align-box-bottom-right-filled.svelte";
+export { default as IconAlignBoxBottomRight } from "./icons/align-box-bottom-right.svelte";
+export { default as IconAlignBoxCenterBottom } from "./icons/align-box-center-bottom.svelte";

packages/icons-svelte/src/defaultAttributes.js

@@ -1,11 +0,0 @@
-export default {
-  xmlns: 'http://www.w3.org/2000/svg',
-  width: 24,
-  height: 24,
-  viewBox: '0 0 24 24',
-  fill: 'none',
-  stroke: 'currentColor',
-  'stroke-width': 2,
-  'stroke-linecap': 'round',
-  'stroke-linejoin': 'round',
-};