react-icons-sprite 0.1.0 → 0.3.0

package/dist/icon.js

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/icon.tsx
 const ReactIconsSpriteIcon = ({ iconId,...rest }) => {
-	const spriteHref = "__SPRITE_URL_PLACEHOLDER__";
-	const iconHref = `${spriteHref}#${iconId}`;
+	const iconHref = `__SPRITE_URL_PLACEHOLDER__#${iconId}`;
 	return /* @__PURE__ */ jsx("svg", {
 		height: "1em",
 		width: "1em",

package/dist/vite/plugin.d.ts

@@ -3,10 +3,11 @@ import { Plugin } from "vite";
 //#region src/vite/plugin.d.ts
 type ReactIconsSpriteVitePluginOptions = {
   /**
-   * Append a cache-busting query parameter to the emitted sprite URL.
-   * Example: { spriteUrlVersion: "1.2.3" } -> "/assets/react-icons-sprite.svg?v=1.2.3"
+   * If passed, this exact string will be used for the emitted file name.
+   * If fileName is omitted, name will be generated as `react-icons-sprite-[hash].svg.
+   * This is useful when, for example, multiple sprite sheets are generated during client and server builds.
    */
-  spriteUrlVersion?: string;
+  fileName?: string;
 };
 declare const reactIconsSprite: (options?: ReactIconsSpriteVitePluginOptions) => Plugin;
 //#endregion

package/dist/vite/plugin.js

@@ -1,3 +1,4 @@
+import { createHash } from "node:crypto";
 import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import * as t from "@babel/types";
@@ -64,8 +65,7 @@ const replaceJsxWithSprite = (ast, localNameToImport, iconLocalName, register) =
 			if (!meta) return;
 			if (isAlreadyIcon(name)) return;
 			path.node.name = t.jSXIdentifier(iconLocalName);
-			const hasIconId = path.node.attributes.some((a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "iconId" }));
-			if (!hasIconId) path.node.attributes.unshift(t.jSXAttribute(t.jSXIdentifier("iconId"), t.stringLiteral(`ri-${meta.exportName}`)));
+			if (!path.node.attributes.some((a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "iconId" }))) path.node.attributes.unshift(t.jSXAttribute(t.jSXIdentifier("iconId"), t.stringLiteral(`ri-${meta.exportName}`)));
 			usedLocalNames.add(local);
 			anyReplacements = true;
 			register(meta.pack, meta.exportName);
@@ -147,11 +147,10 @@ const PRESENTATION_ATTRS = new Set([
 ]);
 const ATTR_RE = /([a-zA-Z_:.-]+)\s*=\s*"([^"]*)"/g;
 const renderOneIcon = async (pack, exportName) => {
-	const mod = await import(
+	const Comp = (await import(
 		/* @vite-ignore */
 		pack
-);
-	const Comp = mod[exportName];
+))[exportName];
 	if (!Comp) throw new Error(`Icon export not found: ${pack} -> ${exportName}`);
 	const id = `ri-${exportName}`;
 	const html = renderToStaticMarkup(createElement(Comp));
@@ -163,17 +162,13 @@ const renderOneIcon = async (pack, exportName) => {
 		if (PRESENTATION_ATTRS.has(key)) attrs.push(`${key}="${v}"`);
 	}
 	const inner = html.replace(/^<svg[^>]*>/i, "").replace(/<\/svg>\s*$/i, "");
-	const stylePart = attrs.length ? ` ${attrs.join(" ")}` : "";
-	const symbol = `<symbol id="${id}" viewBox="${viewBox}"${stylePart}>${inner}</symbol>`;
 	return {
 		id,
-		symbol
+		symbol: `<symbol id="${id}" viewBox="${viewBox}"${attrs.length ? ` ${attrs.join(" ")}` : ""}>${inner}</symbol>`
 	};
 };
 const buildSprite = async (icons) => {
-	const rendered = await Promise.all(Array.from(icons).map(({ pack, exportName }) => renderOneIcon(pack, exportName)));
-	const symbols = rendered.map((r) => r.symbol).join("");
-	return `<svg xmlns="http://www.w3.org/2000/svg"><defs>${symbols}</defs></svg>`;
+	return `<svg xmlns="http://www.w3.org/2000/svg"><defs>${(await Promise.all(Array.from(icons).map(({ pack, exportName }) => renderOneIcon(pack, exportName)))).map((r) => r.symbol).join("")}</defs></svg>`;
 };
 const createCollector = () => {
 	const set = /* @__PURE__ */ new Map();
@@ -196,7 +191,7 @@ const createCollector = () => {
 //#endregion
 //#region src/vite/plugin.ts
 const reactIconsSprite = (options = {}) => {
-	const { spriteUrlVersion } = options;
+	const { fileName } = options;
 	const collector = createCollector();
 	return {
 		name: "vite-plugin-react-icons-sprite",
@@ -225,13 +220,15 @@ const reactIconsSprite = (options = {}) => {
 		},
 		async generateBundle(_options, bundle) {
 			const spriteXml = await buildSprite(collector.toList());
-			const assetId = this.emitFile({
+			const generatedHash = createHash("sha256").update(spriteXml).digest("hex").slice(0, 8);
+			const emitFileOptions = {
 				type: "asset",
-				name: "react-icons-sprite.svg",
 				source: spriteXml
-			});
-			const fileName = this.getFileName(assetId);
-			const finalUrl = spriteUrlVersion && spriteUrlVersion.length > 0 ? `/${fileName}?v=${encodeURIComponent(spriteUrlVersion)}` : `/${fileName}`;
+			};
+			if (fileName) emitFileOptions.fileName = fileName;
+			else emitFileOptions.name = "react-icons-sprite.svg";
+			const assetId = this.emitFile(emitFileOptions);
+			const finalUrl = `/${this.getFileName(assetId)}?v=${encodeURIComponent(generatedHash)}`;
 			for (const [, item] of Object.entries(bundle)) if (item.type === "chunk" && typeof item.code === "string") {
 				if (item.code.includes(PLACEHOLDER)) item.code = item.code.replaceAll(PLACEHOLDER, finalUrl);
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-icons-sprite",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "description": "",
@@ -49,20 +49,21 @@
     "react-icons": ">= 5"
   },
   "devDependencies": {
-    "@babel/generator": "7.28.3",
-    "@babel/parser": "7.28.3",
-    "@babel/traverse": "7.28.3",
-    "@babel/types": "7.28.2",
-    "@biomejs/biome": "2.2.2",
+    "@babel/generator": "7.28.5",
+    "@babel/parser": "7.28.5",
+    "@babel/traverse": "7.28.5",
+    "@babel/types": "7.28.5",
+    "@biomejs/biome": "2.3.0",
     "@types/babel__generator": "7.27.0",
     "@types/babel__traverse": "7.28.0",
-    "@types/react-dom": "19.1.9",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
+    "@types/node": "^24.9.1",
+    "@types/react-dom": "19.2.2",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-icons": "5.5.0",
-    "tsdown": "0.14.2",
-    "typescript": "5.9.2",
-    "vite": "7.1.3"
+    "tsdown": "0.15.10",
+    "typescript": "5.9.3",
+    "vite": "7.1.12"
   },
   "keywords": [
     "vite",