@tinloof/typed-svg-sprite 0.0.1 → 0.1.1

package/dist/components.js

@@ -33,13 +33,14 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateIconComponent = generateIconComponent;
+exports.generateReactIconComponent = generateReactIconComponent;
+exports.generateAstroIconComponent = generateAstroIconComponent;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 /**
  * Generate React Icon component file
  */
-function generateIconComponent(options) {
+function generateReactIconComponent(options) {
     const { outputFile, typesFileRelativePath, verbose = true } = options;
     try {
         const projectRoot = process.cwd();
@@ -48,54 +49,127 @@ function generateIconComponent(options) {
         const normalizedImportPath = typesFileRelativePath
             .replace(/\\/g, "/")
             .replace(/\.tsx?$/, "");
-        const content = `// Auto-generated by typed-svg-sprite
-// Do not edit this file manually
-
-import { IconHref } from "${normalizedImportPath}";
-
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
-  /** The icon href (import from generated/icons.ts) */
-  href: IconHref;
-  /** Size shorthand for width and height */
-  size?: number | string;
-}
-
-export function Icon({
-  href,
-  size = 24,
-  width,
-  height,
-  className = "",
-  viewBox = "0 0 24 24",
-  fill = "currentColor",
-  ...props
-}: IconProps) {
-  return (
-    <svg
-      className={className}
-      width={width || size}
-      height={height || size}
-      viewBox={viewBox}
-      fill={fill}
-      aria-hidden="true"
-      {...props}
-    >
-      <use href={href} />
-    </svg>
-  );
-}
+        const content = `// Auto-generated by typed-svg-sprite
+// Do not edit this file manually
+
+import type { IconHref } from "${normalizedImportPath}";
+
+export interface IconProps extends React.ComponentPropsWithRef<"svg"> {
+  /** The icon href (import from generated/icons.ts) */
+  href: IconHref;
+  /** Size shorthand for width and height */
+  size?: number | string;
+}
+
+export function Icon({
+  href,
+  size = 24,
+  width,
+  height,
+  className = "",
+  viewBox = "0 0 24 24",
+  fill = "currentColor",
+  ...props
+}: IconProps) {
+  return (
+    <svg
+      className={className}
+      width={width || size}
+      height={height || size}
+      viewBox={viewBox}
+      fill={fill}
+      aria-hidden="true"
+      {...props}
+    >
+      <use href={href} />
+    </svg>
+  );
+}
+`;
+        // Write component file
+        const outputDir = path.dirname(absoluteOutputFile);
+        fs.mkdirSync(outputDir, { recursive: true });
+        fs.writeFileSync(absoluteOutputFile, content, "utf8");
+        if (verbose) {
+            console.log(`[svg-sprite] ✅ Generated React Icon component → ${outputFile}`);
+        }
+    }
+    catch (error) {
+        if (verbose) {
+            console.error("[svg-sprite] Error generating React Icon component:", error);
+        }
+        throw error;
+    }
+}
+/**
+ * Generate Astro Icon component file
+ */
+function generateAstroIconComponent(options) {
+    const { outputFile, typesFileRelativePath, verbose = true } = options;
+    try {
+        const projectRoot = process.cwd();
+        const absoluteOutputFile = path.resolve(projectRoot, outputFile);
+        // Normalize the import path (ensure it uses / separator)
+        const normalizedImportPath = typesFileRelativePath
+            .replace(/\\/g, "/")
+            .replace(/\.tsx?$/, "");
+        const content = `---
+// Auto-generated by typed-svg-sprite
+// Do not edit this file manually
+
+import type { IconHref } from "${normalizedImportPath}";
+
+export interface Props {
+  /** The icon href (import from generated/icons.ts) */
+  href: IconHref;
+  /** Size shorthand for width and height */
+  size?: number | string;
+  /** CSS class */
+  class?: string;
+  /** viewBox attribute */
+  viewBox?: string;
+  /** fill attribute */
+  fill?: string;
+  /** Additional HTML attributes */
+  [key: string]: any;
+}
+
+const {
+  href,
+  size = 24,
+  class: className = "",
+  viewBox = "0 0 24 24",
+  fill = "currentColor",
+  ...props
+} = Astro.props;
+
+const width = props.width || size;
+const height = props.height || size;
+---
+
+<svg
+  class={className}
+  width={width}
+  height={height}
+  viewBox={viewBox}
+  fill={fill}
+  aria-hidden="true"
+  {...props}
+>
+  <use href={href} />
+</svg>
 `;
         // Write component file
         const outputDir = path.dirname(absoluteOutputFile);
         fs.mkdirSync(outputDir, { recursive: true });
         fs.writeFileSync(absoluteOutputFile, content, "utf8");
         if (verbose) {
-            console.log(`[svg-sprite] ✅ Generated Icon component → ${outputFile}`);
+            console.log(`[svg-sprite] ✅ Generated Astro Icon component → ${outputFile}`);
         }
     }
     catch (error) {
         if (verbose) {
-            console.error("[svg-sprite] Error generating Icon component:", error);
+            console.error("[svg-sprite] Error generating Astro Icon component:", error);
         }
         throw error;
     }

package/dist/core.js

@@ -143,7 +143,7 @@ function generateSpriteSvg(symbols, minify = true) {
     if (symbols.length === 0) {
         return minify
             ? '<svg xmlns="http://www.w3.org/2000/svg" style="display:none"></svg>'
-            : `<svg xmlns="http://www.w3.org/2000/svg" class="svg-sprite" style="display: none;">
+            : `<svg xmlns="http://www.w3.org/2000/svg" class="svg-sprite" style="display: none;">
 </svg>`;
     }
     const symbolElements = symbols
@@ -158,8 +158,8 @@ function generateSpriteSvg(symbols, minify = true) {
     if (minify) {
         return `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${symbolElements}</svg>`;
     }
-    return `<svg xmlns="http://www.w3.org/2000/svg" class="svg-sprite" style="display: none;">
-  ${symbolElements}
+    return `<svg xmlns="http://www.w3.org/2000/svg" class="svg-sprite" style="display: none;">
+  ${symbolElements}
 </svg>`;
 }
 /**

package/dist/next.d.ts

@@ -36,9 +36,9 @@ interface SpriteLoaderOptions {
      */
     generateIconComponent?: boolean;
     /**
-     * Output path for the Icon component file.
+     * Output path for the Icon component file (without extension).
      * Relative to project root.
-     * @default "generated/Icon.tsx"
+     * @default "generated/Icon"
      */
     iconComponentOutputFile?: string;
 }

package/dist/next.js

@@ -1,119 +1,9 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.withSpriteLoader = withSpriteLoader;
-const fs = __importStar(require("fs"));
-const path = __importStar(require("path"));
-const core_js_1 = require("./core.js");
-const types_js_1 = require("./types.js");
-const components_js_1 = require("./components.js");
-// Track if we've already started watching
-let watcherInitialized = false;
-function generateSpriteAndTypes(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile) {
-    // Generate sprite and get symbols
-    const symbols = (0, core_js_1.generateSprite)({
-        inputDir,
-        outputFile,
-        verbose: true,
-        minify: true,
-        optimize: true,
-    });
-    // Generate TypeScript types file if specified
-    if (typesOutputFile && symbols.length > 0) {
-        (0, types_js_1.generateTypesFile)({
-            symbols,
-            spriteUrl,
-            spriteFilename,
-            outputFile: typesOutputFile,
-            verbose: false,
-        });
-        // Generate Icon component if enabled
-        if (generateIcon && iconComponentOutputFile) {
-            // Calculate relative path from component to types file
-            const componentDir = path.dirname(path.resolve(process.cwd(), iconComponentOutputFile));
-            const typesFile = path.resolve(process.cwd(), typesOutputFile);
-            const typesDir = path.dirname(typesFile);
-            const typesFilename = path.basename(typesFile, path.extname(typesFile));
-            // Get relative path from component dir to types dir
-            const relativePath = path
-                .relative(componentDir, typesDir)
-                .replace(/\\/g, "/");
-            // Construct the import path
-            // If same directory, use ./filename
-            // If parent/child relationship, ensure proper path format
-            let importPath;
-            if (relativePath === "") {
-                importPath = `./${typesFilename}`;
-            }
-            else if (relativePath.startsWith("..")) {
-                // Parent directory - ensure proper path
-                importPath = `${relativePath}/${typesFilename}`.replace(/\/+/g, "/");
-            }
-            else {
-                // Child directory - ensure it starts with ./
-                const normalizedPath = relativePath.startsWith("./")
-                    ? relativePath
-                    : `./${relativePath}`;
-                importPath = `${normalizedPath}/${typesFilename}`.replace(/\/+/g, "/");
-            }
-            (0, components_js_1.generateIconComponent)({
-                outputFile: iconComponentOutputFile,
-                typesFileRelativePath: importPath,
-                verbose: false,
-            });
-        }
-    }
-}
-function startWatcher(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile) {
-    if (watcherInitialized) {
-        return;
-    }
-    const projectRoot = process.cwd();
-    const absoluteInputDir = path.resolve(projectRoot, inputDir);
-    if (!fs.existsSync(absoluteInputDir)) {
-        return;
-    }
-    watcherInitialized = true;
-    console.log(`[svg-sprite] 👀 Watching ${inputDir} for changes...`);
-    fs.watch(absoluteInputDir, { recursive: true }, (eventType, filename) => {
-        if (filename?.endsWith(".svg")) {
-            console.log(`[svg-sprite] Change detected: ${filename}`);
-            generateSpriteAndTypes(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
-        }
-    });
-}
+const shared_js_1 = require("./shared.js");
+// Prevent double generation when Next.js loads config multiple times
+let hasGenerated = false;
 /**
  * Generates SVG sprite and TypeScript types for Next.js projects
  *
@@ -185,16 +75,17 @@ function withSpriteLoader(nextConfig, options) {
     const spriteUrl = options?.url ?? "/";
     const spriteFilename = options?.filename ?? "sprite.svg";
     const typesOutputFile = options?.typesOutputFile ?? "generated/icons.ts";
-    const generateIcon = options?.generateIconComponent !== false
-        ? options?.generateIconComponent ?? true
-        : false;
-    const iconComponentOutputFile = options?.iconComponentOutputFile ?? "generated/Icon.tsx";
-    // Generate sprite and types on startup
-    generateSpriteAndTypes(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, generateIcon ? iconComponentOutputFile : undefined);
-    // Start watcher in dev mode
-    const isDev = process.env.NODE_ENV === "development";
-    if (isDev) {
-        startWatcher(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, generateIcon ? iconComponentOutputFile : undefined);
+    const generateIcon = options?.generateIconComponent === false ? false : { react: true };
+    const iconComponentOutputFile = options?.iconComponentOutputFile ?? "generated/Icon";
+    // Generate sprite and types on startup (only once)
+    if (!hasGenerated) {
+        hasGenerated = true;
+        (0, shared_js_1.generateSpriteAndTypes)(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
+        // Start watcher in dev mode
+        const isDev = process.env.NODE_ENV === "development";
+        if (isDev) {
+            (0, shared_js_1.startWatcher)(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
+        }
     }
     // Return config without loader modifications
     // Users should import from the generated types file instead

package/dist/shared.d.ts

@@ -0,0 +1,6 @@
+export type GenerateIconOption = boolean | {
+    astro?: boolean;
+    react?: boolean;
+};
+export declare function generateSpriteAndTypes(inputDir: string, outputFile: string, spriteUrl: string, spriteFilename: string, typesOutputFile?: string, generateIcon?: GenerateIconOption, iconComponentOutputFile?: string): void;
+export declare function startWatcher(inputDir: string, outputFile: string, spriteUrl: string, spriteFilename: string, typesOutputFile?: string, generateIcon?: GenerateIconOption, iconComponentOutputFile?: string): void;

package/dist/shared.js

@@ -0,0 +1,129 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateSpriteAndTypes = generateSpriteAndTypes;
+exports.startWatcher = startWatcher;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+const core_js_1 = require("./core.js");
+const types_js_1 = require("./types.js");
+const components_js_1 = require("./components.js");
+// Track if we've already started watching
+let watcherInitialized = false;
+function getTypesImportPath(componentOutputFile, typesOutputFile) {
+    const componentDir = path.dirname(path.resolve(process.cwd(), componentOutputFile));
+    const typesFile = path.resolve(process.cwd(), typesOutputFile);
+    const typesDir = path.dirname(typesFile);
+    const typesFilename = path.basename(typesFile, path.extname(typesFile));
+    const relativePath = path
+        .relative(componentDir, typesDir)
+        .replace(/\\/g, "/");
+    if (relativePath === "") {
+        return `./${typesFilename}`;
+    }
+    else if (relativePath.startsWith("..")) {
+        return `${relativePath}/${typesFilename}`.replace(/\/+/g, "/");
+    }
+    else {
+        const normalizedPath = relativePath.startsWith("./")
+            ? relativePath
+            : `./${relativePath}`;
+        return `${normalizedPath}/${typesFilename}`.replace(/\/+/g, "/");
+    }
+}
+function generateSpriteAndTypes(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile) {
+    // Generate sprite and get symbols
+    const symbols = (0, core_js_1.generateSprite)({
+        inputDir,
+        outputFile,
+        verbose: true,
+        minify: true,
+        optimize: true,
+    });
+    // Generate TypeScript types file if specified
+    if (typesOutputFile && symbols.length > 0) {
+        (0, types_js_1.generateTypesFile)({
+            symbols,
+            spriteUrl,
+            spriteFilename,
+            outputFile: typesOutputFile,
+            verbose: false,
+        });
+        // Determine which components to generate
+        const shouldGenerateAstro = generateIcon === true ||
+            (typeof generateIcon === "object" && generateIcon.astro === true);
+        const shouldGenerateReact = generateIcon === true ||
+            (typeof generateIcon === "object" && generateIcon.react === true);
+        if (iconComponentOutputFile && (shouldGenerateAstro || shouldGenerateReact)) {
+            const baseOutputFile = iconComponentOutputFile.replace(/\.(tsx|astro)$/, "");
+            if (shouldGenerateAstro) {
+                const astroOutputFile = `${baseOutputFile}.astro`;
+                const importPath = getTypesImportPath(astroOutputFile, typesOutputFile);
+                (0, components_js_1.generateAstroIconComponent)({
+                    outputFile: astroOutputFile,
+                    typesFileRelativePath: importPath,
+                    verbose: false,
+                });
+            }
+            if (shouldGenerateReact) {
+                const reactOutputFile = `${baseOutputFile}.tsx`;
+                const importPath = getTypesImportPath(reactOutputFile, typesOutputFile);
+                (0, components_js_1.generateReactIconComponent)({
+                    outputFile: reactOutputFile,
+                    typesFileRelativePath: importPath,
+                    verbose: false,
+                });
+            }
+        }
+    }
+}
+function startWatcher(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile) {
+    if (watcherInitialized) {
+        return;
+    }
+    const projectRoot = process.cwd();
+    const absoluteInputDir = path.resolve(projectRoot, inputDir);
+    if (!fs.existsSync(absoluteInputDir)) {
+        return;
+    }
+    watcherInitialized = true;
+    console.log(`[svg-sprite] 👀 Watching ${inputDir} for changes...`);
+    fs.watch(absoluteInputDir, { recursive: true }, (eventType, filename) => {
+        if (filename?.endsWith(".svg")) {
+            console.log(`[svg-sprite] Change detected: ${filename}`);
+            generateSpriteAndTypes(inputDir, outputFile, spriteUrl, spriteFilename, typesOutputFile, generateIcon, iconComponentOutputFile);
+        }
+    });
+}

package/dist/types.js

@@ -62,41 +62,41 @@ function generateTypesFile(options) {
             return `export const ${constantName}: IconHref = "${spriteUrlWithFilename}#${s.id}";`;
         })
             .join("\n");
-        const content = `// Auto-generated by typed-svg-sprite
-// Do not edit this file manually
-
-/**
- * Available icon IDs in the sprite
- */
-export enum IconId {
-${enumEntries}
-}
-
-/**
- * Type-safe icon href (sprite URL + fragment identifier)
- */
-export type IconHref = \`${spriteUrlWithFilename}#\${IconId}\`;
-
-/**
- * Get the full sprite URL for an icon ID
- */
-export function getIconHref(iconId: IconId): IconHref {
-  return \`${spriteUrlWithFilename}#\${iconId}\` as IconHref;
-}
-
-/**
- * Pre-built icon references
- */
-${iconExports}
-
-/**
- * All available icons as an array
- */
-export const allIcons: IconId[] = [
+        const content = `// Auto-generated by typed-svg-sprite
+// Do not edit this file manually
+
+/**
+ * Available icon IDs in the sprite
+ */
+export enum IconId {
+${enumEntries}
+}
+
+/**
+ * Type-safe icon href (sprite URL + fragment identifier)
+ */
+export type IconHref = \`${spriteUrlWithFilename}#\${IconId}\`;
+
+/**
+ * Get the full sprite URL for an icon ID
+ */
+export function getIconHref(iconId: IconId): IconHref {
+  return \`${spriteUrlWithFilename}#\${iconId}\` as IconHref;
+}
+
+/**
+ * Pre-built icon references
+ */
+${iconExports}
+
+/**
+ * All available icons as an array
+ */
+export const allIcons: IconId[] = [
 ${symbols
             .map((s) => `  IconId.${s.originalId.replace(/-/g, "_").toUpperCase()},`)
-            .join("\n")}
-];
+            .join("\n")}
+];
 `;
         // Write types file
         const outputDir = path.dirname(absoluteOutputFile);