@tinloof/typed-svg-sprite 0.0.1 → 0.1.1

package/CHANGELOG.md

@@ -1,13 +1,25 @@
-# @tinloof/typed-svg-sprite
-
-## 0.0.1
-
-### Patch Changes
-
-- Initial release of @tinloof/typed-svg-sprite
-- Generate optimized SVG sprites with full TypeScript support
-- CLI tool for generating sprites from SVG files
-- Next.js integration with `withSpriteLoader`
-- Auto-generated TypeScript definitions
-- Auto-generated React Icon component
-- Watch mode for development
+# @tinloof/typed-svg-sprite
+
+## 0.1.1
+
+### Patch Changes
+
+- 3120201: Generate the `Icon` component from `React.ComponentPropsWithRef<"svg">` instead of `React.SVGProps<SVGSVGElement>`. The old base typed `ref` as `LegacyRef` (allowing string refs), which React 19's intrinsic elements reject — causing a type error in the generated `Icon.tsx`. The new base uses the React-19-correct `Ref` typing.
+
+## 0.1.0
+
+### Minor Changes
+
+- b2234dd: Added astro integration
+
+## 0.0.1
+
+### Patch Changes
+
+- Initial release of @tinloof/typed-svg-sprite
+- Generate optimized SVG sprites with full TypeScript support
+- CLI tool for generating sprites from SVG files
+- Next.js integration with `withSpriteLoader`
+- Auto-generated TypeScript definitions
+- Auto-generated React Icon component
+- Watch mode for development

package/README.md

@@ -1,190 +1,230 @@
-# @tinloof/typed-svg-sprite
-
-> Generate optimized SVG sprites with full TypeScript support
-
-Automatically generates SVG sprite files with type-safe TypeScript definitions and a ready-to-use React component.
-
-## Installation
-
-```bash
-npm install @tinloof/typed-svg-sprite
-```
-
-## Quick Start
-
-### CLI
-
-```bash
-# Generate sprite
-typed-svg-sprite --input public/icons --output public/sprite.svg
-
-# Watch mode
-typed-svg-sprite -i public/icons -o public/sprite.svg --watch
-```
-
-### Next.js
-
-```typescript
-// next.config.ts
-import { withSpriteLoader } from "@tinloof/typed-svg-sprite/next";
-
-export default withSpriteLoader({});
-```
-
-Place SVGs in `public/icons/` and use:
-
-```typescript
-import { HOME, SETTINGS } from "@/generated/icons";
-import { Icon } from "@/generated/Icon";
-
-function MyComponent() {
-  return (
-    <>
-      <Icon href={HOME} />
-      <Icon href={SETTINGS} size={32} />
-    </>
-  );
-}
-```
-
-## Usage
-
-### CLI Options
-
-```bash
-typed-svg-sprite --input <dir> --output <file> [options]
-
-Options:
-  -i, --input <dir>    Directory containing SVG files
-  -o, --output <file>  Output sprite file path
-  -w, --watch          Watch for changes and regenerate
-  -h, --help           Show help message
-```
-
-### Next.js Configuration
-
-```typescript
-export default withSpriteLoader(
-  {
-    // your existing Next.js config
-  },
-  {
-    inputDir?: string; // default: "public/icons"
-    outputFile?: string; // default: "public/sprite.svg"
-    url?: string; // default: "/"
-    filename?: string; // default: "sprite.svg"
-    typesOutputFile?: string; // default: "generated/icons.ts"
-    generateIconComponent?: boolean; // default: true
-    iconComponentOutputFile?: string; // default: "generated/Icon.tsx"
-  }
-);
-```
-
-## Generated Files
-
-### 1. Sprite (`public/sprite.svg`)
-
-```xml
-<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
-  <symbol id="a" viewBox="0 0 24 24"><!-- icon content --></symbol>
-  <symbol id="b" viewBox="0 0 24 24"><!-- icon content --></symbol>
-</svg>
-```
-
-### 2. TypeScript Types (`generated/icons.ts`)
-
-```typescript
-export enum IconId {
-  HOME = "a",
-  SETTINGS = "b",
-}
-
-export type IconHref = `/sprite.svg#${IconId}`;
-
-export const HOME: IconHref = "/sprite.svg#a";
-export const SETTINGS: IconHref = "/sprite.svg#b";
-
-export function getIconHref(iconId: IconId): IconHref;
-export const allIcons: IconId[];
-```
-
-### 3. React Component (`generated/Icon.tsx`)
-
-```typescript
-import { IconHref } from "./icons";
-
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
-  href: IconHref;
-  size?: number | string;
-}
-
-export function Icon({ href, size = 24, ...props }: IconProps) {
-  // ...
-}
-```
-
-## Examples
-
-### Basic Usage
-
-```typescript
-import { HOME, SEARCH, SETTINGS } from "@/generated/icons";
-import { Icon } from "@/generated/Icon";
-
-<Icon href={HOME} />
-<Icon href={SEARCH} size={20} />
-<Icon href={SETTINGS} className="text-blue-500" />
-```
-
-### Dynamic Icons
-
-```typescript
-import { IconId, getIconHref } from "@/generated/icons";
-
-function DynamicIcon({ iconId }: { iconId: IconId }) {
-  return <Icon href={getIconHref(iconId)} />;
-}
-```
-
-### Build Script Integration
-
-```json
-{
-  "scripts": {
-    "generate:icons": "typed-svg-sprite --input public/icons --output public/sprite.svg",
-    "build": "npm run generate:icons && next build"
-  }
-}
-```
-
-### Without React
-
-```bash
-# Generate sprite and types
-typed-svg-sprite --input src/icons --output public/sprite.svg
-
-# Use generated types
-import { HOME, SETTINGS } from "./generated/icons";
-
-// In your HTML/JS
-<svg><use href={HOME} /></svg>
-```
-
-## How It Works
-
-1. Scans directory for `.svg` files
-2. Extracts and optimizes SVG content
-3. Generates compact base-52 IDs (`a`, `b`, `aa`, etc.)
-4. Combines into single sprite file
-5. Generates TypeScript types with file-based names
-6. Generates React component (optional)
-
-**Symbol IDs**: Short IDs (`a`, `b`) in sprite, original names (`HOME`, `SETTINGS`) in TypeScript exports.
-
-## Roadmap
-
-- [ ] Integrate SVGO for advanced SVG optimization
-
-## License
-
-MIT
+# @tinloof/typed-svg-sprite
+
+> Generate optimized SVG sprites with full TypeScript support
+
+Automatically generates SVG sprite files with type-safe TypeScript definitions and a ready-to-use React component. Works with Next.js, Astro, or standalone via CLI.
+
+## Installation
+
+```bash
+npm install @tinloof/typed-svg-sprite
+```
+
+## Quick Start
+
+### CLI
+
+```bash
+# Generate sprite
+typed-svg-sprite --input public/icons --output public/sprite.svg
+
+# Watch mode
+typed-svg-sprite -i public/icons -o public/sprite.svg --watch
+```
+
+### Next.js
+
+```typescript
+// next.config.ts
+import { withSpriteLoader } from "@tinloof/typed-svg-sprite/next";
+
+export default withSpriteLoader({});
+```
+
+Place SVGs in `public/icons/` and use:
+
+```typescript
+import { HOME, SETTINGS } from "@/generated/icons";
+import { Icon } from "@/generated/Icon";
+
+function MyComponent() {
+  return (
+    <>
+      <Icon href={HOME} />
+      <Icon href={SETTINGS} size={32} />
+    </>
+  );
+}
+```
+
+### Astro
+
+```typescript
+// astro.config.mjs
+import { defineConfig } from "astro/config";
+import { svgSprite } from "@tinloof/typed-svg-sprite/astro";
+
+export default defineConfig({
+  integrations: [svgSprite()],
+});
+```
+
+Place SVGs in `public/icons/` and use:
+
+```typescript
+import { HOME, SETTINGS } from "../generated/icons";
+import { Icon } from "../generated/Icon";
+
+<Icon href={HOME} />
+<Icon href={SETTINGS} size={32} />
+```
+
+## Usage
+
+### CLI Options
+
+```bash
+typed-svg-sprite --input <dir> --output <file> [options]
+
+Options:
+  -i, --input <dir>    Directory containing SVG files
+  -o, --output <file>  Output sprite file path
+  -w, --watch          Watch for changes and regenerate
+  -h, --help           Show help message
+```
+
+### Next.js Configuration
+
+```typescript
+export default withSpriteLoader(
+  {
+    // your existing Next.js config
+  },
+  {
+    inputDir?: string; // default: "public/icons"
+    outputFile?: string; // default: "public/sprite.svg"
+    url?: string; // default: "/"
+    filename?: string; // default: "sprite.svg"
+    typesOutputFile?: string; // default: "generated/icons.ts"
+    generateIconComponent?: boolean; // default: true
+    iconComponentOutputFile?: string; // default: "generated/Icon.tsx"
+  }
+);
+```
+
+### Astro Configuration
+
+```typescript
+export default defineConfig({
+  integrations: [
+    svgSprite({
+      inputDir?: string; // default: "public/icons"
+      outputFile?: string; // default: "public/sprite.svg"
+      url?: string; // default: "/"
+      filename?: string; // default: "sprite.svg"
+      typesOutputFile?: string; // default: "src/generated/icons.ts"
+      generateIconComponent?: boolean; // default: true
+      iconComponentOutputFile?: string; // default: "src/generated/Icon.tsx"
+    }),
+  ],
+});
+```
+
+## Generated Files
+
+### 1. Sprite (`public/sprite.svg`)
+
+```xml
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+  <symbol id="a" viewBox="0 0 24 24"><!-- icon content --></symbol>
+  <symbol id="b" viewBox="0 0 24 24"><!-- icon content --></symbol>
+</svg>
+```
+
+### 2. TypeScript Types (`generated/icons.ts`)
+
+```typescript
+export enum IconId {
+  HOME = "a",
+  SETTINGS = "b",
+}
+
+export type IconHref = `/sprite.svg#${IconId}`;
+
+export const HOME: IconHref = "/sprite.svg#a";
+export const SETTINGS: IconHref = "/sprite.svg#b";
+
+export function getIconHref(iconId: IconId): IconHref;
+export const allIcons: IconId[];
+```
+
+### 3. React Component (`generated/Icon.tsx`)
+
+```typescript
+import { IconHref } from "./icons";
+
+export interface IconProps extends React.SVGProps<SVGSVGElement> {
+  href: IconHref;
+  size?: number | string;
+}
+
+export function Icon({ href, size = 24, ...props }: IconProps) {
+  // ...
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```typescript
+import { HOME, SEARCH, SETTINGS } from "@/generated/icons";
+import { Icon } from "@/generated/Icon";
+
+<Icon href={HOME} />
+<Icon href={SEARCH} size={20} />
+<Icon href={SETTINGS} className="text-blue-500" />
+```
+
+### Dynamic Icons
+
+```typescript
+import { IconId, getIconHref } from "@/generated/icons";
+
+function DynamicIcon({ iconId }: { iconId: IconId }) {
+  return <Icon href={getIconHref(iconId)} />;
+}
+```
+
+### Build Script Integration
+
+```json
+{
+  "scripts": {
+    "generate:icons": "typed-svg-sprite --input public/icons --output public/sprite.svg",
+    "build": "npm run generate:icons && next build"
+  }
+}
+```
+
+### Without React
+
+```bash
+# Generate sprite and types
+typed-svg-sprite --input src/icons --output public/sprite.svg
+
+# Use generated types
+import { HOME, SETTINGS } from "./generated/icons";
+
+// In your HTML/JS
+<svg><use href={HOME} /></svg>
+```
+
+## How It Works
+
+1. Scans directory for `.svg` files
+2. Extracts and optimizes SVG content
+3. Generates compact base-52 IDs (`a`, `b`, `aa`, etc.)
+4. Combines into single sprite file
+5. Generates TypeScript types with file-based names
+6. Generates React component (optional)
+
+**Symbol IDs**: Short IDs (`a`, `b`) in sprite, original names (`HOME`, `SETTINGS`) in TypeScript exports.
+
+## Roadmap
+
+- [ ] Integrate SVGO for advanced SVG optimization
+
+## License
+
+MIT

package/dist/astro.d.ts

@@ -0,0 +1,63 @@
+import type { AstroIntegration } from "astro";
+export interface SpriteIntegrationOptions {
+    /**
+     * URL path where the sprite file will be served from.
+     * @default "/"
+     */
+    url?: string;
+    /**
+     * Filename for the sprite file.
+     * @default "sprite.svg"
+     */
+    filename?: string;
+    /**
+     * Directory containing SVG files to include in the sprite.
+     * Relative to project root.
+     * @default "public/icons"
+     */
+    inputDir?: string;
+    /**
+     * Output path for the sprite file.
+     * Relative to project root.
+     * @default "public/sprite.svg"
+     */
+    outputFile?: string;
+    /**
+     * Output path for the TypeScript types file.
+     * Relative to project root.
+     * @default "src/generated/icons.ts"
+     */
+    typesOutputFile?: string;
+    /**
+     * Whether to generate the Icon component.
+     * - `true`: generates both Astro and React components
+     * - `false`: generates no component
+     * - `{ astro?: boolean, react?: boolean }`: choose which to generate
+     * @default { astro: true }
+     */
+    generateIconComponent?: boolean | {
+        astro?: boolean;
+        react?: boolean;
+    };
+    /**
+     * Output path for the Icon component file (without extension).
+     * Extension will be added based on component type (.astro, .tsx).
+     * Relative to project root.
+     * @default "src/generated/Icon"
+     */
+    iconComponentOutputFile?: string;
+}
+/**
+ * Astro integration for generating SVG sprites with TypeScript types
+ *
+ * @example
+ * ```typescript
+ * // astro.config.mjs
+ * import { svgSprite } from '@tinloof/typed-svg-sprite/astro';
+ *
+ * export default defineConfig({
+ *   integrations: [svgSprite()]
+ * });
+ * ```
+ */
+export declare function svgSprite(options?: SpriteIntegrationOptions): AstroIntegration;

package/dist/astro.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.svgSprite = svgSprite;
+const shared_js_1 = require("./shared.js");
+/**
+ * Astro integration for generating SVG sprites with TypeScript types
+ *
+ * @example
+ * ```typescript
+ * // astro.config.mjs
+ * import { svgSprite } from '@tinloof/typed-svg-sprite/astro';
+ *
+ * export default defineConfig({
+ *   integrations: [svgSprite()]
+ * });
+ * ```
+ */
+function svgSprite(options) {
+    const inputDir = options?.inputDir ?? "public/icons";
+    const outputFile = options?.outputFile ?? "public/sprite.svg";
+    const spriteUrl = options?.url ?? "/";
+    const spriteFilename = options?.filename ?? "sprite.svg";
+    const typesOutputFile = options?.typesOutputFile ?? "src/generated/icons.ts";
+    const generateIcon = options?.generateIconComponent === false
+        ? false
+        : options?.generateIconComponent === true
+            ? true
+            : options?.generateIconComponent ?? { astro: true };
+    const iconComponentOutputFile = options?.iconComponentOutputFile ?? "src/generated/Icon";
+    return {
+        name: "typed-svg-sprite",
+        hooks: {
+            "astro:config:setup": ({ command }) => {
+                // Generate on startup
+                (0, shared_js_1.generateSpriteAndTypes)(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
+                // Watch in dev mode
+                if (command === "dev") {
+                    (0, shared_js_1.startWatcher)(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
+                }
+            },
+            "astro:build:start": () => {
+                // Regenerate before build
+                (0, shared_js_1.generateSpriteAndTypes)(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
+            },
+        },
+    };
+}

package/dist/cli.js

@@ -68,21 +68,21 @@ function parseArgs() {
     return options;
 }
 function printHelp() {
-    console.log(`
-SVG Sprite Generator
-
-Usage:
-  typed-svg-sprite --input <dir> --output <file> [options]
-
-Options:
-  -i, --input <dir>    Directory containing SVG files
-  -o, --output <file>  Output sprite file path
-  -w, --watch          Watch for changes and regenerate
-  -h, --help           Show this help message
-
-Examples:
-  typed-svg-sprite --input public/icons --output public/sprite.svg
-  typed-svg-sprite -i ./icons -o ./dist/sprite.svg --watch
+    console.log(`
+SVG Sprite Generator
+
+Usage:
+  typed-svg-sprite --input <dir> --output <file> [options]
+
+Options:
+  -i, --input <dir>    Directory containing SVG files
+  -o, --output <file>  Output sprite file path
+  -w, --watch          Watch for changes and regenerate
+  -h, --help           Show this help message
+
+Examples:
+  typed-svg-sprite --input public/icons --output public/sprite.svg
+  typed-svg-sprite -i ./icons -o ./dist/sprite.svg --watch
 `);
 }
 function runSpriteGeneration(inputDir, outputFile) {

package/dist/components.d.ts

@@ -21,4 +21,8 @@ export interface IconComponentGenerationOptions {
 /**
  * Generate React Icon component file
  */
-export declare function generateIconComponent(options: IconComponentGenerationOptions): void;
+export declare function generateReactIconComponent(options: IconComponentGenerationOptions): void;
+/**
+ * Generate Astro Icon component file
+ */
+export declare function generateAstroIconComponent(options: IconComponentGenerationOptions): void;