@hugeicons/svelte 1.0.1

package/README.md

@@ -0,0 +1,240 @@
+![31c9262e-aeea-4403-9086-3c8b88885cab](https://github.com/hugeicons/hugeicons-react/assets/130147052/ff91f2f0-095a-4c6d-8942-3af4759f9021)
+
+# @hugeicons/svelte
+
+> HugeIcons Pro Svelte Component Library - Beautiful and customizable icons for your Svelte applications
+
+## What is HugeIcons?
+
+HugeIcons is a comprehensive icon library designed for modern web and mobile applications. The free package includes 4,000+ carefully crafted icons in the Stroke Rounded style, while the pro version offers over 36,000 icons across 9 unique styles.
+
+### Key Highlights
+- **4,000+ Free Icons**: Extensive collection of Stroke Rounded icons covering essential UI elements, actions, and concepts
+- **Pixel Perfect**: Every icon is crafted on a 24x24 pixel grid ensuring crisp, clear display at any size
+- **Customizable**: Easily adjust colors, sizes, and styles to match your design needs
+- **Regular Updates**: New icons added regularly to keep up with evolving design trends
+
+> 📚 **Looking for Pro Icons?** Check out our comprehensive documentation at [docs.hugeicons.com](https://docs.hugeicons.com) for detailed information about pro icons, styles, and advanced usage.
+
+![a40aa766-1b04-4a2a-a2e6-0ec3c492b96a](https://github.com/hugeicons/hugeicons-react/assets/130147052/f82c0e0e-60ae-4617-802f-812cdc7a58da)
+
+## Table of Contents
+- [What is HugeIcons?](#what-is-hugeicons)
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+  - [Basic Usage](#basic-usage)
+  - [Custom Size and Color](#custom-size-and-color)
+  - [Interactive Examples](#interactive-examples)
+- [Performance](#performance)
+- [Troubleshooting](#troubleshooting)
+- [Browser Support](#browser-support)
+- [Related Packages](#related-packages)
+- [Pro Version](#pro-version)
+- [License](#license)
+- [Related](#related)
+
+## Features
+
+- 🎨 Customizable colors and sizes
+- 💪 TypeScript support with full type definitions
+- 🎯 Tree-shakeable for optimal bundle size
+- 📦 Multiple bundle formats (ESM, CJS, UMD)
+- ⚡ Lightweight and optimized
+- 🔄 Alternate icon support for dynamic interactions
+
+## Installation
+
+```bash
+# Using npm
+npm install @hugeicons/svelte @hugeicons/core-free-icons
+
+# Using yarn
+yarn add @hugeicons/svelte @hugeicons/core-free-icons
+
+# Using pnpm
+pnpm add @hugeicons/svelte @hugeicons/core-free-icons
+
+# Using bun
+bun add @hugeicons/svelte @hugeicons/core-free-icons
+```
+
+## Usage
+
+```svelte
+<script>
+  import { HugeiconsIcon } from '@hugeicons/svelte';
+  import { SearchIcon } from '@hugeicons/core-free-icons';
+</script>
+
+<HugeiconsIcon
+  icon={SearchIcon}
+  size={24}
+  color="currentColor"
+  strokeWidth={1.5}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `icon` | `IconType` | Required | The main icon to display |
+| `altIcon` | `IconType` | - | Alternative icon that can be used for states, interactions, animations, or dynamic icon swapping |
+| `showAlt` | `boolean` | `false` | When true, displays the altIcon instead of the main icon |
+| `size` | `number` | `24` | Icon size in pixels |
+| `color` | `string` | `currentColor` | Icon color (CSS color value) |
+| `strokeWidth` | `number` | `1.5` | Width of the icon strokes (works with stroke-style icons) |
+| `absoluteStrokeWidth` | `boolean` | `false` | When true, strokeWidth will be absolute and won't scale with the icon size |
+| `class` | `string` | - | Additional CSS classes |
+
+## Examples
+
+### Basic Usage
+```svelte
+<script>
+  import { HugeiconsIcon } from '@hugeicons/svelte';
+  import { SearchIcon } from '@hugeicons/core-free-icons';
+</script>
+
+<HugeiconsIcon icon={SearchIcon} />
+```
+
+### Custom Size and Color
+```svelte
+<script>
+  import { HugeiconsIcon } from '@hugeicons/svelte';
+  import { NotificationIcon } from '@hugeicons/core-free-icons';
+</script>
+
+<HugeiconsIcon
+  icon={NotificationIcon}
+  size={32}
+  color="#FF5733"
+/>
+```
+
+### Interactive Examples
+
+#### Search Bar with Clear Button
+```svelte
+<script>
+  import { HugeiconsIcon } from '@hugeicons/svelte';
+  import { SearchIcon, CloseCircleIcon } from '@hugeicons/core-free-icons';
+  
+  let value = '';
+</script>
+
+<div>
+  <input
+    type="text"
+    bind:value
+    placeholder="Search..."
+  />
+  <HugeiconsIcon
+    icon={SearchIcon}
+    altIcon={CloseCircleIcon}
+    showAlt={value.length > 0}
+    on:click={() => value.length > 0 && (value = '')}
+  />
+</div>
+```
+
+#### Theme Toggle
+```svelte
+<script>
+  import { HugeiconsIcon } from '@hugeicons/svelte';
+  import { SunIcon, MoonIcon } from '@hugeicons/core-free-icons';
+  
+  let isDark = false;
+</script>
+
+<button on:click={() => isDark = !isDark}>
+  <HugeiconsIcon
+    icon={SunIcon}
+    altIcon={MoonIcon}
+    showAlt={isDark}
+  />
+</button>
+```
+
+#### Menu Toggle
+```svelte
+<script>
+  import { HugeiconsIcon } from '@hugeicons/svelte';
+  import { MenuIcon, CancelIcon } from '@hugeicons/core-free-icons';
+  
+  let isOpen = false;
+</script>
+
+<button on:click={() => isOpen = !isOpen}>
+  <HugeiconsIcon
+    icon={MenuIcon}
+    altIcon={CancelIcon}
+    showAlt={isOpen}
+  />
+</button>
+```
+
+## Performance
+
+- **Tree-shaking**: The package is fully tree-shakeable, ensuring only the icons you use are included in your final bundle
+- **Optimized SVGs**: All icons are optimized for size and performance
+- **Code Splitting**: Icons can be easily code-split when using dynamic imports
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Icons not showing up?**
+   - Make sure you've installed both `@hugeicons/svelte` and `@hugeicons/core-free-icons`
+   - Check that the icon names are correctly imported
+
+2. **TypeScript errors?**
+   - Ensure your `tsconfig.json` includes the necessary type definitions
+   - Check that you're using the latest version of the package
+
+3. **Bundle size concerns?**
+   - Use named imports instead of importing the entire icon set
+   - Implement code splitting for different sections of your app
+
+## Browser Support
+
+The library supports all modern browsers.
+
+## Related Packages
+
+- [@hugeicons/react](https://www.npmjs.com/package/@hugeicons/react) - React component
+- [@hugeicons/vue](https://www.npmjs.com/package/@hugeicons/vue) - Vue component
+- [@hugeicons/angular](https://www.npmjs.com/package/@hugeicons/angular) - Angular component
+- [@hugeicons/react-native](https://www.npmjs.com/package/@hugeicons/react-native) - React Native component
+
+## Pro Version
+
+> 🌟 **Want access to 36,000+ icons and 9 unique styles?** 
+> Check out our [Pro Version](https://hugeicons.com/pricing) and visit [docs.hugeicons.com](https://docs.hugeicons.com) for comprehensive documentation.
+
+### Available Pro Styles
+- **Stroke Styles**
+  - Stroke Rounded (`@hugeicons-pro/core-stroke-rounded`)
+  - Stroke Sharp (`@hugeicons-pro/core-stroke-sharp`)
+  - Stroke Standard (`@hugeicons-pro/core-stroke-standard`)
+- **Solid Styles**
+  - Solid Rounded (`@hugeicons-pro/core-solid-rounded`)
+  - Solid Sharp (`@hugeicons-pro/core-solid-sharp`)
+  - Solid Standard (`@hugeicons-pro/core-solid-standard`)
+- **Special Styles**
+  - Bulk Rounded (`@hugeicons-pro/core-bulk-rounded`)
+  - Duotone Rounded (`@hugeicons-pro/core-duotone-rounded`)
+  - Twotone Rounded (`@hugeicons-pro/core-twotone-rounded`)
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).
+
+## Related
+
+- [@hugeicons/core-free-icons](https://www.npmjs.com/package/@hugeicons/core-free-icons) - Free icon package
+- [HugeIcons Website](https://hugeicons.com) - Browse all available icons 

package/dist/components/HugeiconsIcon.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import { onMount } from 'svelte';
+import { createHugeiconSingleton } from '../create-hugeicon-singleton';
+let props = $props();
+let svgElement;
+let hugeiconAction = $state();
+let cleanup = $state();
+const propsForUpdate = $derived({
+    size: props.size ?? 24,
+    strokeWidth: props.strokeWidth,
+    absoluteStrokeWidth: props.absoluteStrokeWidth ?? false,
+    color: props.color ?? 'currentColor',
+    altIcon: props.altIcon,
+    showAlt: props.showAlt ?? false,
+    class: props.className ?? ''
+});
+onMount(() => {
+    if (!svgElement)
+        return;
+    hugeiconAction = createHugeiconSingleton('HugeiconsIcon', props.icon);
+    cleanup = hugeiconAction.render(svgElement, propsForUpdate);
+    return () => {
+        cleanup?.destroy();
+    };
+});
+$effect(() => {
+    if (hugeiconAction && svgElement && cleanup) {
+        cleanup.update(propsForUpdate);
+    }
+});
+</script>
+
+<svg 
+    bind:this={svgElement}
+    xmlns="http://www.w3.org/2000/svg"
+    width={props.size ?? 24}
+    height={props.size ?? 24}
+    viewBox="0 0 24 24"
+    fill="none"
+    class={props.className}
+>
+    <!-- SVG content will be managed by the action -->
+</svg>

package/dist/components/HugeiconsIcon.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { IconSvgElement } from '../create-hugeicon-singleton';
+type $$ComponentProps = {
+    icon: IconSvgElement;
+    altIcon?: IconSvgElement;
+    size?: string | number;
+    strokeWidth?: number;
+    absoluteStrokeWidth?: boolean;
+    color?: string;
+    showAlt?: boolean;
+    className?: string;
+};
+declare const HugeiconsIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type HugeiconsIcon = ReturnType<typeof HugeiconsIcon>;
+export default HugeiconsIcon;

package/dist/create-hugeicon-singleton.d.ts

@@ -0,0 +1,18 @@
+export type IconSvgElement = readonly (readonly [string, {
+    readonly [key: string]: string | number;
+}])[];
+export interface HugeiconsProps extends Record<string, any> {
+    size?: string | number;
+    strokeWidth?: number;
+    absoluteStrokeWidth?: boolean;
+    color?: string;
+    class?: string;
+    altIcon?: IconSvgElement;
+    showAlt?: boolean;
+}
+export declare function createHugeiconSingleton(iconName: string, svgElements: IconSvgElement): {
+    render(node: SVGSVGElement, props: HugeiconsProps): {
+        update(newProps: HugeiconsProps): void;
+        destroy(): void;
+    };
+};

package/dist/create-hugeicon-singleton.js

@@ -0,0 +1,57 @@
+const defaultAttributes = {
+    xmlns: 'http://www.w3.org/2000/svg',
+    width: 24,
+    height: 24,
+    viewBox: '0 0 24 24',
+    fill: 'none',
+};
+export function createHugeiconSingleton(iconName, svgElements) {
+    const renderIcon = (node, props) => {
+        const { color = 'currentColor', size = 24, strokeWidth, absoluteStrokeWidth = false, class: className = '', altIcon, showAlt = false, ...rest } = props;
+        const elementProps = {
+            ...defaultAttributes,
+            width: size,
+            height: size,
+            color,
+            class: className,
+            ...rest
+        };
+        const currentIcon = showAlt && altIcon ? altIcon : svgElements;
+        // Calculate stroke width if explicitly set
+        const calculatedStrokeWidth = strokeWidth !== undefined
+            ? (absoluteStrokeWidth ? (strokeWidth * (24 / Number(size))) : strokeWidth)
+            : undefined;
+        // Set SVG attributes
+        Object.entries(elementProps).forEach(([key, value]) => {
+            node.setAttribute(key, String(value));
+        });
+        // Clear existing content
+        node.innerHTML = '';
+        // Create and append SVG children
+        currentIcon.forEach(([tag, attrs]) => {
+            const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
+            const updatedAttrs = { ...attrs };
+            if (calculatedStrokeWidth !== undefined) {
+                updatedAttrs['stroke-width'] = calculatedStrokeWidth;
+                updatedAttrs['stroke'] = 'currentColor';
+            }
+            Object.entries(updatedAttrs).forEach(([key, value]) => {
+                element.setAttribute(key, String(value));
+            });
+            node.appendChild(element);
+        });
+    };
+    return {
+        render(node, props) {
+            renderIcon(node, props);
+            return {
+                update(newProps) {
+                    renderIcon(node, newProps);
+                },
+                destroy() {
+                    node.innerHTML = '';
+                }
+            };
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import HugeiconsIcon from './components/HugeiconsIcon.svelte';
+export { HugeiconsIcon };
+export type { IconSvgElement, HugeiconsProps } from './create-hugeicon-singleton';

package/dist/index.js

@@ -0,0 +1,2 @@
+import HugeiconsIcon from './components/HugeiconsIcon.svelte';
+export { HugeiconsIcon };

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@hugeicons/svelte",
+  "version": "1.0.1",
+  "description": "Hugeicons component library for Svelte",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "svelte": "./dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.js",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^4.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.2.5",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@tsconfig/svelte": "^5.0.2",
+    "svelte": "^5.0.0",
+    "svelte-check": "^3.6.3",
+    "svelte-preprocess": "^6.0.3",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10"
+  },
+  "keywords": [
+    "svelte",
+    "icons",
+    "hugeicons",
+    "components"
+  ],
+  "author": "Hugeicons",
+  "license": "MIT",
+  "scripts": {
+    "build": "vite build && pnpm run package",
+    "package": "svelte-kit sync && svelte-package",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  }
+}