@vezham/icons-svelte 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @vezham/icons-svelte
+
+## 1.0.0
+
+### Patch Changes
+
+- [`4bc7ae2`](https://github.com/vezham/reicon/commit/4bc7ae21342fe26c90359bc0d5cbb74258b32fe7) Thanks [@vx-vigneshwaran](https://github.com/vx-vigneshwaran)! - ver bump
+
+## 1.0.1
+
+### Patch Changes
+
+- [`345a93a`](https://github.com/vezham/reicon/commit/345a93aa6f5a5b7f0d4598a0708eb24dd704046a) Thanks [@vx-vigneshwaran](https://github.com/vx-vigneshwaran)! - ver bump
+
+## 1.0.0
+
+### Patch Changes
+
+- [`ccfadd2`](https://github.com/vezham/reicon/commit/ccfadd29b3031f81cc6986d9e2ff084eca798c81) Thanks [@vx-vigneshwaran](https://github.com/vx-vigneshwaran)! - init test

package/LICENSE

@@ -0,0 +1,32 @@
+SPDX-License-Identifier: MIT
+
+Attribution:
+  Creator / Maintainer : Vezham Technologies Private Limited
+  Original Author      : REICON
+  Licensor             : Vezham Technologies Private Limited
+
+Copyright (c) 2025 REICON.
+Copyright (c) 2025–present Vezham Technologies Private Limited. All rights reserved.
+
+---
+
+MIT License
+
+Copyright (c) 2025 REICON
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+<p align="center">
+  <a href="https://reicon.dev">
+    <img src="https://reicon.dev/readme-banner.png" alt="Reicon Svelte — SVG Icon Library for Svelte" width="100%" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://npmjs.com/package/reicon-svelte"><img src="https://img.shields.io/npm/v/reicon-svelte?color=black&label=npm" alt="npm version" /></a>
+  <a href="https://npmjs.com/package/reicon-svelte"><img src="https://img.shields.io/npm/dm/reicon-svelte?color=black&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/dqev/reicon/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" alt="MIT License" /></a>
+  <a href="https://reicon.dev"><img src="https://img.shields.io/badge/docs-reicon.dev-black" alt="Documentation" /></a>
+  <a href="https://github.com/dqev/reicon"><img src="https://img.shields.io/badge/github-dqev/reicon-black" alt="GitHub" /></a>
+</p>
+
+<h1 align="center">Reicon Svelte</h1>
+
+<p align="center">
+  <b>2674+ pixel-perfect SVG icons</b> • Outline & Filled weights • Svelte component wrapper • Zero dependencies • MIT Licensed
+</p>
+
+<p align="center">
+  <a href="#install">Install</a> •
+  <a href="#usage">Usage</a> •
+  <a href="#props">Props</a> •
+  <a href="#tree-shaking">Tree-shaking</a> •
+  <a href="#icon-names">Icon Names</a> •
+  <a href="#typescript">TypeScript</a>
+</p>
+
+**Reicon Svelte** is the official Svelte package for <a href="https://reicon.dev">Reicon</a> — a free, open-source SVG icon library featuring 2674+ handcrafted, grid-aligned icons. Every component is tree-shakeable, fully TypeScript-ready, and ships with zero dependencies.
+
+| 🔗 &nbsp; Resource | Link |
+|---|---|
+| 🌐 &nbsp; Website & icon browser | [reicon.dev](https://reicon.dev) |
+| 📖 &nbsp; Documentation | [reicon.dev/docs](https://reicon.dev/docs) |
+| 📦 &nbsp; Core package (vanilla JS) | [reicon](https://npmjs.com/package/reicon) |
+| 🎨 &nbsp; Figma plugin | [reicon.dev/docs/figma](https://reicon.dev/docs/figma) |
+
+---
+
+## Install
+
+```bash
+npm i reicon-svelte
+# or
+bun add reicon-svelte
+# or
+yarn add reicon-svelte
+```
+
+<details>
+<summary><b>Requirements</b></summary>
+
+- **Svelte** ≥ 4.0 or **Svelte 5** (runes mode)
+- No other dependencies required.
+
+</details>
+
+---
+
+## Usage
+
+### Basic
+
+```svelte
+<script>
+  import { Home, ShieldCheck, AltArrowDown } from 'reicon-svelte';
+</script>
+
+<Home />
+<ShieldCheck size={32} color="#d97757" />
+<AltArrowDown weight="Filled" />
+```
+
+### Weights
+
+Every icon ships in two weights — **Outline** (default) and **Filled**:
+
+```svelte
+<Home />                        <!-- Outline (default) -->
+<Home weight="Filled" />        <!-- Filled -->
+```
+
+### Sizing & coloring
+
+```svelte
+<Home size={32} />                    <!-- 32×32px -->
+<Home size={48} color="#d97757" />    <!-- Custom size and color -->
+<Home color="currentColor" />         <!-- Inherits parent text color -->
+```
+
+### Direct icon import (smallest bundle)
+
+For the absolute minimum bundle size, import icons directly from the sub-path:
+
+```js
+import Home from 'reicon-svelte/icons/Home.svelte';
+import ShieldCheck from 'reicon-svelte/icons/ShieldCheck.svelte';
+```
+
+### All SVG attributes are supported
+
+Pass any standard SVG attribute — `class`, `style`, `on:click`, `aria-*`, etc.:
+
+```svelte
+<Home
+  size={48}
+  color="red"
+  class="my-icon"
+  style="margin-right: 8px"
+  on:click={() => console.log('clicked')}
+  aria-label="Home"
+/>
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `size` | `number | string` | `24` | Icon width & height (number = px) |
+| `color` | `string` | — | Primary icon stroke/fill color. Leave unset to use CSS class. |
+| `weight` | `'Outline' | 'Filled'` | `'Outline'` | Icon style variant |
+| `strokeWidth` | `number | string` | — | Override the default stroke width |
+| `class` | `string` | — | Additional CSS class on the `<svg>` element |
+| `style` | `string` | — | Additional inline styles |
+
+Any valid SVG attribute (e.g. `id`, `aria-*`) is forwarded to the underlying `<svg>` element.
+
+---
+
+## Tree-shaking
+
+Every icon is a standalone ES module. Modern bundlers — **Vite**, **Webpack**, **Rollup**, **esbuild** — automatically tree-shake unused icons, keeping only what you import.
+
+```js
+// ✅ Only Home is included in your production bundle
+import { Home } from 'reicon-svelte';
+
+// ✅ Even smaller — direct path import skips the barrel file entirely
+import Home from 'reicon-svelte/icons/Home.svelte';
+```
+
+The package is marked `"sideEffects": false` for optimal dead-code elimination.
+
+---
+
+## Icon Names
+
+Icons use **PascalCase**, derived from their original kebab-case file names:
+
+| Original name | PascalCase import |
+|---------------|-------------------|
+| `home` | `Home` |
+| `shield-check` | `ShieldCheck` |
+| `alt-arrow-down` | `AltArrowDown` |
+| `shopping-cart` | `ShoppingCart` |
+| `user-circle` | `UserCircle` |
+
+Browse and search all 2674+ icons at <a href="https://reicon.dev">reicon.dev</a>.
+
+---
+
+## TypeScript
+
+Full type declarations ship with the package — no separate `@types/` installation needed.
+
+```ts
+import { Home, type IconProps, type IconWeight } from 'reicon-svelte';
+
+const weight: IconWeight = 'Filled';
+const props: IconProps = { size: 32, color: '#d97757', weight };
+```
+
+### Exported types
+
+| Type | Description |
+|------|-------------|
+| `IconProps` | Combined icon props + Svelte SVG attributes |
+| `IconWeight` | `'Outline' | 'Filled'` |
+
+---
+
+## Features
+
+- **2674+ icons** — Handcrafted, pixel-perfect SVGs across a wide range of categories
+- **Two weights** — Outline and Filled, with consistent 24×24 grid alignment
+- **Tree-shakeable** — Import only what you use; every icon is a standalone ES module
+- **Zero dependencies** — No runtime overhead beyond Svelte itself
+- **TypeScript-ready** — Full type declarations included, no extra packages needed
+- **SVG attribute passthrough** — All standard SVG props (`class`, `style`, `aria-*`, etc.) are forwarded
+- **MIT licensed** — Free for personal and commercial use
+
+---
+
+## Related packages
+
+| Package | Description |
+|---------|-------------|
+| [`reicon`](https://npmjs.com/package/reicon) | Core vanilla JS + CDN runtime. No framework required. |
+| [`reicon-react`](https://npmjs.com/package/reicon-react) | React components for 2674+ icons. |
+| [`reicon-vue`](https://npmjs.com/package/reicon-vue) | Vue 3 components for 2674+ icons. |
+| [`reicon-svelte`](https://npmjs.com/package/reicon-svelte) | **You are here.** Svelte components for 2674+ icons. |
+
+---
+
+## Links
+
+- 🌐 &nbsp; Website: [reicon.dev](https://reicon.dev)
+- 📖 &nbsp; Documentation: [reicon.dev/docs](https://reicon.dev/docs)
+- 📦 &nbsp; npm: [npmjs.com/package/reicon-svelte](https://npmjs.com/package/reicon-svelte)
+- 🐙 &nbsp; GitHub: [github.com/dqev/reicon](https://github.com/dqev/reicon)
+- 🐛 &nbsp; Issues: [github.com/dqev/reicon/issues](https://github.com/dqev/reicon/issues)
+
+---
+
+## License
+
+MIT © [Dev Chauhan](https://devchauhan.in)
+
+Free to use in personal and commercial projects. Attribution is appreciated but not required.

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@vezham/icons-svelte",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Svelte icon components for Reicon.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vezham/reicon",
+    "directory": "packages/icons-svelte"
+  },
+  "bugs": {
+    "url": "https://github.com/vezham/reicon/issues"
+  },
+  "homepage": "https://vezham.com",
+  "peerDependencies": {
+    "svelte": ">=3.0.0"
+  },
+  "scripts": {
+    "build": "node scripts/build.cjs"
+  }
+}

package/scripts/build.cjs

@@ -0,0 +1,531 @@
+#!/usr/bin/env node
+/**
+ * build.cjs — Generates the `reicon-svelte` Svelte package from icondata.json
+ *
+ * Usage:  node packages/icons-svelte/scripts/build.cjs  (or: npm run build:svelte)
+ *
+ * Output:
+ *   src/icons/        Individual Svelte components and Svelte type declarations (git-ignored)
+ *   src/index.js      Barrel ESM exports (git-ignored)
+ *   src/index.d.ts    Barrel TypeScript declarations (git-ignored)
+ *   dist/             Standard NPM package ready to publish (git-ignored)
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// ── paths ──────────────────────────────────────────────────────────────────
+const DATA_PATH = path.join(__dirname, '..', '..', '..', 'data', 'icon-data.json');
+const TAGS_PATH = path.join(__dirname, '..', '..', '..', 'data', 'icon-tags.json');
+const SRC = path.join(__dirname, '..', 'src');
+const DIST = path.join(__dirname, '..', 'dist');
+
+// ── weight short keys ──────────────────────────────────────────────────────
+const W_KEY = { Filled: 'F', Outline: 'O' };
+
+// ── helpers ────────────────────────────────────────────────────────────────
+function toPascalCase(str) {
+  return str
+    .split('-')
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('');
+}
+
+function stripSvgWrapper(code) {
+  if (!code) return '';
+  return code.replace(/^<svg[^>]*>/, '').replace(/<\/svg>\s*$/, '').trim();
+}
+
+// Fix hardcoded fill="white" → currentColor so user color prop works correctly.
+function rewriteColors(svg) {
+  return svg.replace(/fill="white"/g, 'fill="currentColor"');
+}
+
+function escapeForJS(s) {
+  return s.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\n/g, ' ').replace(/\s+/g, ' ').replace(/\$\{/g, '\\${');
+}
+
+/**
+ * Build a base64 data URI for an inline SVG preview (shown in IDE hover).
+ */
+function buildPreviewDataUri(weights) {
+  const inner = weights['O'] || weights['F'] || '';
+  if (!inner) return '';
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">${inner}</svg>`
+    .replace(/currentColor/g, '#e4e4e7');
+  return `data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}`;
+}
+
+// ── read data ──────────────────────────────────────────────────────────────
+console.log('Reading icondata.json …');
+const data = JSON.parse(fs.readFileSync(DATA_PATH, 'utf-8'));
+
+let TAGS = {};
+if (fs.existsSync(TAGS_PATH)) {
+  TAGS = JSON.parse(fs.readFileSync(TAGS_PATH, 'utf-8'));
+  console.log(`Read ${Object.keys(TAGS).length} tag entries`);
+}
+
+// ── collect icons ──────────────────────────────────────────────────────────
+const RESERVED_EXPORT_NAMES = ['icon', 'createicon', 'iconprops', 'iconweight', 'iconcomponent', 'iconoptions', 'iconfunction'];
+const icons = [];
+const pascalLowerSet = new Set(RESERVED_EXPORT_NAMES);
+
+for (const [catKey, catData] of Object.entries(data.categories || {})) {
+  for (const [iconKey, icon] of Object.entries(catData.icons || {})) {
+    let pascal = toPascalCase(iconKey);
+
+    if (pascalLowerSet.has(pascal.toLowerCase())) {
+      pascal += toPascalCase(catKey);
+    }
+    pascalLowerSet.add(pascal.toLowerCase());
+
+    const weights = {};
+    for (const [wName, wData] of Object.entries(icon.weights || {})) {
+      const short = W_KEY[wName];
+      if (short && wData.code) {
+        weights[short] = rewriteColors(stripSvgWrapper(wData.code));
+      }
+    }
+
+    if (Object.keys(weights).length > 0) {
+      icons.push({
+        kebab: iconKey,
+        pascal,
+        category: catKey,
+        weights,
+        tags: TAGS[iconKey] || icon.description || [],
+      });
+    }
+  }
+}
+
+icons.sort((a, b) => a.pascal.localeCompare(b.pascal));
+console.log(`Found ${icons.length} icons`);
+
+// ── clean & prepare src ────────────────────────────────────────────────────
+fs.rmSync(path.join(SRC, 'icons'), { recursive: true, force: true });
+fs.mkdirSync(path.join(SRC, 'icons'), { recursive: true });
+
+// ── individual icon files ──────────────────────────────────────────────────
+console.log('Generating Svelte components in src/icons/ …');
+
+const barrelExports = [];
+const dtsExports = [];
+
+for (const icon of icons) {
+  const wEntries = Object.entries(icon.weights)
+    .map(([k, v]) => `    ${k}: \`${escapeForJS(v)}\``)
+    .join(',\n');
+
+  const previewUri = buildPreviewDataUri(icon.weights);
+  const kebab = icon.kebab;
+
+  // ── icon .svelte file ──
+  const iconSvelte = `<script>
+  import Icon from '../Icon.svelte';
+  export let size = 24;
+  export let color = undefined;
+  export let weight = 'Outline';
+  export let strokeWidth = undefined;
+
+  const iconData = {
+${wEntries}
+  };
+</script>
+
+<!--
+  @component
+  @name ${icon.pascal}
+  @description Reicon Svelte icon component, renders an SVG Element.
+  @preview ![${icon.pascal}](${previewUri}) - https://reicon.dev/icons/${kebab}
+  @see https://reicon.dev/docs — Documentation
+-->
+<Icon {size} {color} {weight} {strokeWidth} {iconData} {...$$restProps} />
+`;
+
+  fs.writeFileSync(path.join(SRC, 'icons', `${icon.pascal}.svelte`), iconSvelte);
+
+  // ── icon .svelte.d.ts file ──
+  const iconDTS = `import { SvelteComponent } from 'svelte';
+import { IconProps } from '../index';
+
+/**
+ * @component
+ * @name ${icon.pascal}
+ * @description Reicon Svelte icon component, renders an SVG Element.
+ * @preview ![${icon.pascal}](${previewUri}) - https://reicon.dev/icons/${kebab}
+ * @see https://reicon.dev/docs — Documentation
+ */
+export default class ${icon.pascal} extends SvelteComponent<IconProps, any, any> {}
+`;
+
+  fs.writeFileSync(path.join(SRC, 'icons', `${icon.pascal}.svelte.d.ts`), iconDTS);
+
+  barrelExports.push(`export { default as ${icon.pascal} } from './icons/${icon.pascal}.svelte';`);
+  dtsExports.push(`export { default as ${icon.pascal} } from './icons/${icon.pascal}.svelte';`);
+}
+
+// ── index.js (ESM barrel in src/) ──────────────────────────────────────────
+const indexJS = `// Auto-generated barrel — do not edit
+export { default as Icon } from './Icon.svelte';
+
+${barrelExports.join('\n')}
+`;
+
+fs.writeFileSync(path.join(SRC, 'index.js'), indexJS);
+
+// ── index.d.ts (types in src/) ─────────────────────────────────────────────
+const indexDTS = `// Auto-generated — do not edit
+import { SvelteComponent } from 'svelte';
+
+export interface IconProps {
+  /** Primary icon color. Default: inherits from CSS */
+  color?: string;
+  /** Icon size (px when number, or any CSS unit). Default: \`24\` */
+  size?: number | string;
+  /** Icon weight / style: \`'Outline'\` | \`'Filled'\`. Default: \`'Outline'\` */
+  weight?: 'Outline' | 'Filled';
+  /** Override stroke-width on stroked weights */
+  strokeWidth?: number | string;
+  // allow other standard SVG/HTML attributes
+  [key: string]: any;
+}
+
+export declare class Icon extends SvelteComponent<IconProps, any, any> {}
+
+${dtsExports.join('\n')}
+`;
+
+fs.writeFileSync(path.join(SRC, 'index.d.ts'), indexDTS);
+
+// ── recreate src/icons/.gitkeep ────────────────────────────────────────────
+fs.writeFileSync(path.join(SRC, 'icons', '.gitkeep'), '# Keep directory in Git\n');
+
+// ── clean & prepare dist ───────────────────────────────────────────────────
+console.log('Preparing production build in dist/ …');
+fs.rmSync(DIST, { recursive: true, force: true });
+fs.mkdirSync(path.join(DIST, 'icons'), { recursive: true });
+
+// ── copy src files to dist ─────────────────────────────────────────────────
+fs.copyFileSync(path.join(SRC, 'Icon.svelte'), path.join(DIST, 'Icon.svelte'));
+fs.copyFileSync(path.join(SRC, 'Icon.svelte.d.ts'), path.join(DIST, 'Icon.svelte.d.ts'));
+fs.copyFileSync(path.join(SRC, 'index.js'), path.join(DIST, 'index.js'));
+fs.copyFileSync(path.join(SRC, 'index.d.ts'), path.join(DIST, 'index.d.ts'));
+
+for (const icon of icons) {
+  fs.copyFileSync(path.join(SRC, 'icons', `${icon.pascal}.svelte`), path.join(DIST, 'icons', `${icon.pascal}.svelte`));
+  fs.copyFileSync(path.join(SRC, 'icons', `${icon.pascal}.svelte.d.ts`), path.join(DIST, 'icons', `${icon.pascal}.svelte.d.ts`));
+}
+
+// ── package.json ───────────────────────────────────────────────────────────
+const srcPkg = JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'package.json'), 'utf-8'));
+const pkg = {
+  name: srcPkg.name,
+  version: srcPkg.version,
+  type: 'module',
+  description:
+    `Svelte icon components for ${icons.length}+ icons in 2 weights (Outline & Filled). Tree-shakeable, TypeScript-ready.`,
+  main: './index.js',
+  module: './index.js',
+  svelte: './index.js',
+  types: './index.d.ts',
+  exports: {
+    '.': {
+      types: './index.d.ts',
+      svelte: './index.js',
+      default: './index.js'
+    },
+    './icons/*.svelte': {
+      types: './icons/*.svelte.d.ts',
+      svelte: './icons/*.svelte',
+      default: './icons/*.svelte'
+    },
+    './icons/*': {
+      types: './icons/*.svelte.d.ts',
+      svelte: './icons/*.svelte',
+      default: './icons/*.svelte'
+    },
+    './Icon.svelte': {
+      types: './Icon.svelte.d.ts',
+      svelte: './Icon.svelte',
+      default: './Icon.svelte'
+    }
+  },
+  sideEffects: false,
+  files: ['index.js', 'index.d.ts', 'Icon.svelte', 'Icon.svelte.d.ts', 'icons/', 'README.md'],
+  peerDependencies: {
+    svelte: '>=3.0.0',
+  },
+  keywords: [
+    'icons',
+    'svelte',
+    'svelte3',
+    'svelte4',
+    'svelte5',
+    'svelte-icons',
+    'svg-icons',
+    'icon-library',
+    'reicon',
+    'outline',
+    'filled',
+    'tree-shakeable',
+    'typescript',
+  ],
+  author: {
+    name: 'devchauhan',
+    email: 'dev@devchauhan.in',
+    url: 'https://devchauhan.in',
+  },
+  license: 'MIT',
+  repository: { type: 'git', url: 'https://github.com/vezham/reicon', directory: 'packages/icons-svelte' },
+  bugs: { url: 'https://github.com/vezham/reicon/issues' },
+  homepage: 'https://vezham.com',
+};
+
+fs.writeFileSync(path.join(DIST, 'package.json'), JSON.stringify(pkg, null, 2) + '\n');
+
+// ── README.md ──────────────────────────────────────────────────────────────
+const readme = `<p align="center">
+  <a href="https://reicon.dev">
+    <img src="https://reicon.dev/readme-banner.png" alt="Reicon Svelte — SVG Icon Library for Svelte" width="100%" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="https://npmjs.com/package/reicon-svelte"><img src="https://img.shields.io/npm/v/reicon-svelte?color=black&label=npm" alt="npm version" /></a>
+  <a href="https://npmjs.com/package/reicon-svelte"><img src="https://img.shields.io/npm/dm/reicon-svelte?color=black&label=downloads" alt="npm downloads" /></a>
+  <a href="https://github.com/dqev/reicon/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" alt="MIT License" /></a>
+  <a href="https://reicon.dev"><img src="https://img.shields.io/badge/docs-reicon.dev-black" alt="Documentation" /></a>
+  <a href="https://github.com/dqev/reicon"><img src="https://img.shields.io/badge/github-dqev/reicon-black" alt="GitHub" /></a>
+</p>
+
+<h1 align="center">Reicon Svelte</h1>
+
+<p align="center">
+  <b>${icons.length}+ pixel-perfect SVG icons</b> • Outline & Filled weights • Svelte component wrapper • Zero dependencies • MIT Licensed
+</p>
+
+<p align="center">
+  <a href="#install">Install</a> •
+  <a href="#usage">Usage</a> •
+  <a href="#props">Props</a> •
+  <a href="#tree-shaking">Tree-shaking</a> •
+  <a href="#icon-names">Icon Names</a> •
+  <a href="#typescript">TypeScript</a>
+</p>
+
+**Reicon Svelte** is the official Svelte package for <a href="https://reicon.dev">Reicon</a> — a free, open-source SVG icon library featuring ${icons.length}+ handcrafted, grid-aligned icons. Every component is tree-shakeable, fully TypeScript-ready, and ships with zero dependencies.
+
+| 🔗 &nbsp; Resource | Link |
+|---|---|
+| 🌐 &nbsp; Website & icon browser | [reicon.dev](https://reicon.dev) |
+| 📖 &nbsp; Documentation | [reicon.dev/docs](https://reicon.dev/docs) |
+| 📦 &nbsp; Core package (vanilla JS) | [reicon](https://npmjs.com/package/reicon) |
+| 🎨 &nbsp; Figma plugin | [reicon.dev/docs/figma](https://reicon.dev/docs/figma) |
+
+---
+
+## Install
+
+\`\`\`bash
+npm i reicon-svelte
+# or
+bun add reicon-svelte
+# or
+yarn add reicon-svelte
+\`\`\`
+
+<details>
+<summary><b>Requirements</b></summary>
+
+- **Svelte** ≥ 4.0 or **Svelte 5** (runes mode)
+- No other dependencies required.
+
+</details>
+
+---
+
+## Usage
+
+### Basic
+
+\`\`\`svelte
+<script>
+  import { Home, ShieldCheck, AltArrowDown } from 'reicon-svelte';
+</script>
+
+<Home />
+<ShieldCheck size={32} color="#d97757" />
+<AltArrowDown weight="Filled" />
+\`\`\`
+
+### Weights
+
+Every icon ships in two weights — **Outline** (default) and **Filled**:
+
+\`\`\`svelte
+<Home />                        <!-- Outline (default) -->
+<Home weight="Filled" />        <!-- Filled -->
+\`\`\`
+
+### Sizing & coloring
+
+\`\`\`svelte
+<Home size={32} />                    <!-- 32×32px -->
+<Home size={48} color="#d97757" />    <!-- Custom size and color -->
+<Home color="currentColor" />         <!-- Inherits parent text color -->
+\`\`\`
+
+### Direct icon import (smallest bundle)
+
+For the absolute minimum bundle size, import icons directly from the sub-path:
+
+\`\`\`js
+import Home from 'reicon-svelte/icons/Home.svelte';
+import ShieldCheck from 'reicon-svelte/icons/ShieldCheck.svelte';
+\`\`\`
+
+### All SVG attributes are supported
+
+Pass any standard SVG attribute — \`class\`, \`style\`, \`on:click\`, \`aria-*\`, etc.:
+
+\`\`\`svelte
+<Home
+  size={48}
+  color="red"
+  class="my-icon"
+  style="margin-right: 8px"
+  on:click={() => console.log('clicked')}
+  aria-label="Home"
+/>
+\`\`\`
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`size\` | \`number | string\` | \`24\` | Icon width & height (number = px) |
+| \`color\` | \`string\` | — | Primary icon stroke/fill color. Leave unset to use CSS class. |
+| \`weight\` | \`'Outline' | 'Filled'\` | \`'Outline'\` | Icon style variant |
+| \`strokeWidth\` | \`number | string\` | — | Override the default stroke width |
+| \`class\` | \`string\` | — | Additional CSS class on the \`<svg>\` element |
+| \`style\` | \`string\` | — | Additional inline styles |
+
+Any valid SVG attribute (e.g. \`id\`, \`aria-*\`) is forwarded to the underlying \`<svg>\` element.
+
+---
+
+## Tree-shaking
+
+Every icon is a standalone ES module. Modern bundlers — **Vite**, **Webpack**, **Rollup**, **esbuild** — automatically tree-shake unused icons, keeping only what you import.
+
+\`\`\`js
+// ✅ Only Home is included in your production bundle
+import { Home } from 'reicon-svelte';
+
+// ✅ Even smaller — direct path import skips the barrel file entirely
+import Home from 'reicon-svelte/icons/Home.svelte';
+\`\`\`
+
+The package is marked \`"sideEffects": false\` for optimal dead-code elimination.
+
+---
+
+## Icon Names
+
+Icons use **PascalCase**, derived from their original kebab-case file names:
+
+| Original name | PascalCase import |
+|---------------|-------------------|
+| \`home\` | \`Home\` |
+| \`shield-check\` | \`ShieldCheck\` |
+| \`alt-arrow-down\` | \`AltArrowDown\` |
+| \`shopping-cart\` | \`ShoppingCart\` |
+| \`user-circle\` | \`UserCircle\` |
+
+Browse and search all ${icons.length}+ icons at <a href="https://reicon.dev">reicon.dev</a>.
+
+---
+
+## TypeScript
+
+Full type declarations ship with the package — no separate \`@types/\` installation needed.
+
+\`\`\`ts
+import { Home, type IconProps, type IconWeight } from 'reicon-svelte';
+
+const weight: IconWeight = 'Filled';
+const props: IconProps = { size: 32, color: '#d97757', weight };
+\`\`\`
+
+### Exported types
+
+| Type | Description |
+|------|-------------|
+| \`IconProps\` | Combined icon props + Svelte SVG attributes |
+| \`IconWeight\` | \`'Outline' | 'Filled'\` |
+
+---
+
+## Features
+
+- **${icons.length}+ icons** — Handcrafted, pixel-perfect SVGs across a wide range of categories
+- **Two weights** — Outline and Filled, with consistent 24×24 grid alignment
+- **Tree-shakeable** — Import only what you use; every icon is a standalone ES module
+- **Zero dependencies** — No runtime overhead beyond Svelte itself
+- **TypeScript-ready** — Full type declarations included, no extra packages needed
+- **SVG attribute passthrough** — All standard SVG props (\`class\`, \`style\`, \`aria-*\`, etc.) are forwarded
+- **MIT licensed** — Free for personal and commercial use
+
+---
+
+## Related packages
+
+| Package | Description |
+|---------|-------------|
+| [\`reicon\`](https://npmjs.com/package/reicon) | Core vanilla JS + CDN runtime. No framework required. |
+| [\`reicon-react\`](https://npmjs.com/package/reicon-react) | React components for ${icons.length}+ icons. |
+| [\`reicon-vue\`](https://npmjs.com/package/reicon-vue) | Vue 3 components for ${icons.length}+ icons. |
+| [\`reicon-svelte\`](https://npmjs.com/package/reicon-svelte) | **You are here.** Svelte components for ${icons.length}+ icons. |
+
+---
+
+## Links
+
+- 🌐 &nbsp; Website: [reicon.dev](https://reicon.dev)
+- 📖 &nbsp; Documentation: [reicon.dev/docs](https://reicon.dev/docs)
+- 📦 &nbsp; npm: [npmjs.com/package/reicon-svelte](https://npmjs.com/package/reicon-svelte)
+- 🐙 &nbsp; GitHub: [github.com/dqev/reicon](https://github.com/dqev/reicon)
+- 🐛 &nbsp; Issues: [github.com/dqev/reicon/issues](https://github.com/dqev/reicon/issues)
+
+---
+
+## License
+
+MIT © [Dev Chauhan](https://devchauhan.in)
+
+Free to use in personal and commercial projects. Attribution is appreciated but not required.
+`;
+
+fs.writeFileSync(path.join(DIST, 'README.md'), readme);
+fs.writeFileSync(path.join(__dirname, '..', 'README.md'), readme);
+
+// ── icon name map ──────────────────────────────────────────────────────────
+const nameMap = {};
+for (const icon of icons) {
+  nameMap[icon.kebab] = icon.pascal;
+}
+fs.writeFileSync(path.join(DIST, 'icon-names.json'), JSON.stringify(nameMap, null, 2));
+
+// ── summary ────────────────────────────────────────────────────────────────
+const totalFiles = (icons.length * 2) + 5;
+console.log(`\nDone!`);
+console.log(`  Icons:       ${icons.length}`);
+console.log(`  Weights:     Outline + Filled`);
+console.log(`  Files:       ${totalFiles}`);
+console.log(`  Output:      ${DIST}`);
+console.log(`\nTo publish:`);
+console.log(`  cd dist && npm publish --access public`);

package/src/Icon.svelte

@@ -0,0 +1,45 @@
+<script>
+  /** @type {string | number} */
+  export let size = 24;
+  /** @type {string | undefined} */
+  export let color = undefined;
+  /** @type {string} */
+  export let weight = 'Outline';
+  /** @type {string | number | undefined} */
+  export let strokeWidth = undefined;
+  /** @type {Record<string, string>} */
+  export let iconData = {};
+
+  let className = '';
+  export { className as class };
+
+  let customStyle = '';
+  export { customStyle as style };
+
+  /** @type {Record<string, string>} */
+  const W_MAP = { Filled: 'F', Outline: 'O' };
+
+  $: key = W_MAP[weight] || 'O';
+  $: rawHtml = (() => {
+    /** @type {Record<string, string>} */
+    const data = iconData;
+    let html = data[key] || data[Object.keys(data)[0]] || '';
+    if (strokeWidth != null) {
+      html = html.replace(/stroke-width="[^"]*"/g, 'stroke-width="' + strokeWidth + '"');
+    }
+    return html;
+  })();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  viewBox="0 0 24 24"
+  fill="none"
+  class="reicon {className}"
+  style={color != null ? `color: ${color}; ${customStyle}` : customStyle}
+  {...$$restProps}
+>
+  {@html rawHtml}
+</svg>

package/src/Icon.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from 'svelte';
+
+export interface IconComponentProps {
+  /** Primary icon color. Default: inherits from CSS */
+  color?: string;
+  /** Icon size (px when number, or any CSS unit). Default: `24` */
+  size?: number | string;
+  /** Icon weight / style: `'Outline'` | `'Filled'`. Default: `'Outline'` */
+  weight?: 'Outline' | 'Filled';
+  /** Override stroke-width on stroked weights */
+  strokeWidth?: number | string;
+  /** Icon svg path data for different weights */
+  iconData?: Record<string, string>;
+  // allow other standard SVG/HTML attributes
+  [key: string]: any;
+}
+
+export default class Icon extends SvelteComponent<IconComponentProps, any, any> {}

package/src/icons/.gitkeep

@@ -0,0 +1 @@
+# Keep directory in Git

package/svelte.config.js

@@ -0,0 +1 @@
+export default {};

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "target": "es2022",
+    "module": "es2022",
+    "lib": ["es2022", "dom"],
+    "noEmit": true,
+    "allowJs": true,
+    "checkJs": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"]
+}