react-icons-sprite 0.2.0 → 0.4.0

package/README.md

@@ -1,9 +1,6 @@
 # react-icons-sprite
 
-`react-icons-sprite` is a lightweight plugin built on top of [react-icons](https://github.com/react-icons/react-icons). It automatically detects the `react-icons` components you use, generates a single SVG spritesheet containing them, and rewrites your code to reference those symbols via `<use>`. This approach both shrinks your bundle (no more inlined React components for every icon) and reduces runtime overhead, since React no longer has to reconcile large, nested SVG trees.
-
-> [!NOTE]
-> Only Vite is currently supported. If you'd like to see a Webpack or Turbopack implementation, please open an issue!
+`react-icons-sprite` is a lightweight plugin for Vite and Webpack, built on top of [react-icons](https://github.com/react-icons/react-icons). It automatically detects the `react-icons` components you use, generates a single SVG spritesheet containing them, and rewrites your code to reference those symbols via `<use>`. This approach both shrinks your bundle (no more inlined React components for every icon) and reduces runtime overhead, since React no longer has to reconcile large, nested SVG trees.
 
 ## Motivation
 
@@ -104,19 +101,54 @@ Install the plugin via npm or yarn:
 npm install --save-dev react-icons-sprite
 ```
 
-Only Vite is currently supported. You only need to add the plugin to the `plugins` array.
+### Vite
+Add the plugin to the `plugins` array in your Vite config.
 
 ```typescript
 // vite.config.ts
 import { defineConfig } from 'vite';
 import { reactIconsSprite } from 'react-icons-sprite/vite';
 
-const viteConfig = defineConfig({
-  // ... rest of config
+export default defineConfig({
+  plugins: [reactIconsSprite()],
+});
+```
+
+### Webpack
+Add the loader to transform modules that import from `react-icons/*` and install the plugin to emit the sprite and rewrite the placeholder URL.
+
+```js
+// webpack.config.js (v5)
+const path = require('path');
+const { reactIconsSprite } = require('react-icons-sprite/webpack');
+
+module.exports = {
+  mode: 'production',
+  // ... your existing config
+  module: {
+    rules: [
+      {
+        test: /\.(mjs|cjs|js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve('react-icons-sprite/webpack/loader'),
+          },
+          // put your ts/tsx loader after ours (e.g. babel-loader or ts-loader)
+        ],
+      },
+    ],
+  },
   plugins: [
-    reactIconsSprite(),
+    reactIconsSprite({
+      // optional: fileName: 'icons.svg'
+    }),
   ],
-});
+  output: {
+    // ensure your publicPath is set correctly if you deploy under a sub-path
+    // publicPath: '/',
+  },
+};
 ```
 
 ## How it works
@@ -134,4 +166,3 @@ Contributions are welcome! Feel free to open an issue or submit a pull request.
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.
-

package/dist/collector-CbA7qCnf.mjs

@@ -0,0 +1,7 @@
+import { r as createCollector } from "./core-CcX_8jJU.mjs";
+
+//#region src/collector.ts
+const collector = createCollector();
+
+//#endregion
+export { collector as t };

package/dist/{vite/plugin.js → core-CcX_8jJU.mjs}

@@ -64,8 +64,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 +146,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 +161,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();
@@ -194,52 +188,4 @@ const createCollector = () => {
 };
 
 //#endregion
-//#region src/vite/plugin.ts
-const reactIconsSprite = (options = {}) => {
-	const { spriteUrlVersion, fileName } = options;
-	const collector = createCollector();
-	return {
-		name: "vite-plugin-react-icons-sprite",
-		enforce: "pre",
-		apply: "build",
-		buildStart() {
-			collector.clear();
-		},
-		transform(code, id) {
-			const cleanId = id.split("?", 1)[0];
-			if (!/\.(mjs|cjs|js|jsx|ts|tsx)$/.test(cleanId)) return null;
-			if (!/from\s+['"]react-icons\//.test(code)) return null;
-			try {
-				const { code: next, map, anyReplacements } = transformModule(code, id, (pack, exportName) => {
-					collector.add(pack, exportName);
-				});
-				if (!anyReplacements) return null;
-				return {
-					code: next,
-					map
-				};
-			} catch (error) {
-				console.error(error);
-				return null;
-			}
-		},
-		async generateBundle(_options, bundle) {
-			const spriteXml = await buildSprite(collector.toList());
-			const emitFileOptions = {
-				type: "asset",
-				source: spriteXml
-			};
-			if (fileName) emitFileOptions.fileName = fileName;
-			else emitFileOptions.name = "react-icons-sprite.svg";
-			const assetId = this.emitFile(emitFileOptions);
-			const name = this.getFileName(assetId);
-			const finalUrl = spriteUrlVersion && spriteUrlVersion.length > 0 ? `/${name}?v=${encodeURIComponent(spriteUrlVersion)}` : `/${name}`;
-			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);
-			}
-		}
-	};
-};
-
-//#endregion
-export { reactIconsSprite };
+export { transformModule as i, buildSprite as n, createCollector as r, PLACEHOLDER as t };

package/dist/icon.d.mts

@@ -0,0 +1,12 @@
+import { JSX, SVGProps } from "react";
+
+//#region src/icon.d.ts
+type IconProps = SVGProps<SVGSVGElement> & {
+  iconId: string;
+};
+declare const ReactIconsSpriteIcon: ({
+  iconId,
+  ...rest
+}: IconProps) => JSX.Element;
+//#endregion
+export { IconProps, ReactIconsSpriteIcon };

package/dist/{icon.js → icon.mjs}

@@ -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 → plugin.d.mts}

@@ -2,11 +2,6 @@ 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"
-   */
-  spriteUrlVersion?: string;
   /**
    * 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.

package/dist/vite/plugin.mjs

@@ -0,0 +1,52 @@
+import { i as transformModule, n as buildSprite, r as createCollector, t as PLACEHOLDER } from "../core-CcX_8jJU.mjs";
+import { createHash } from "node:crypto";
+
+//#region src/vite/plugin.ts
+const reactIconsSprite = (options = {}) => {
+	const { fileName } = options;
+	const collector = createCollector();
+	return {
+		name: "vite-plugin-react-icons-sprite",
+		enforce: "pre",
+		apply: "build",
+		buildStart() {
+			collector.clear();
+		},
+		transform(code, id) {
+			const cleanId = id.split("?", 1)[0];
+			if (!/\.(mjs|cjs|js|jsx|ts|tsx)$/.test(cleanId)) return null;
+			if (!/from\s+['"]react-icons\//.test(code)) return null;
+			try {
+				const { code: next, map, anyReplacements } = transformModule(code, id, (pack, exportName) => {
+					collector.add(pack, exportName);
+				});
+				if (!anyReplacements) return null;
+				return {
+					code: next,
+					map
+				};
+			} catch (error) {
+				console.error(error);
+				return null;
+			}
+		},
+		async generateBundle(_options, bundle) {
+			const spriteXml = await buildSprite(collector.toList());
+			const generatedHash = createHash("sha256").update(spriteXml).digest("hex").slice(0, 8);
+			const emitFileOptions = {
+				type: "asset",
+				source: spriteXml
+			};
+			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);
+			}
+		}
+	};
+};
+
+//#endregion
+export { reactIconsSprite };

package/dist/webpack/loader.d.mts

@@ -0,0 +1,6 @@
+import { LoaderDefinitionFunction } from "webpack";
+
+//#region src/webpack/loader.d.ts
+declare const reactIconsSpriteLoader: LoaderDefinitionFunction;
+//#endregion
+export { reactIconsSpriteLoader as default };

package/dist/webpack/loader.mjs

@@ -0,0 +1,22 @@
+import { i as transformModule } from "../core-CcX_8jJU.mjs";
+import { t as collector } from "../collector-CbA7qCnf.mjs";
+
+//#region src/webpack/loader.ts
+const reactIconsSpriteLoader = async function(source) {
+	const id = this.resourcePath;
+	try {
+		if (!/\.(mjs|cjs|js|jsx|ts|tsx)$/i.test(id) || !/from\s+['"]react-icons\//.test(String(source))) return source;
+		const { code, anyReplacements } = transformModule(String(source), id, (pack, exportName) => {
+			collector.add(pack, exportName);
+		});
+		if (!anyReplacements) return source;
+		return code;
+	} catch (err) {
+		this.emitWarning(/* @__PURE__ */ new Error(`[react-icons-sprite] Failed to transform ${id}: ${String(err)}`));
+		return source;
+	}
+};
+var loader_default = reactIconsSpriteLoader;
+
+//#endregion
+export { loader_default as default };

package/dist/webpack/plugin.d.mts

@@ -0,0 +1,18 @@
+import { Compiler, WebpackPluginInstance } from "webpack";
+
+//#region src/webpack/plugin.d.ts
+type ReactIconsSpriteWebpackPluginOptions = {
+  /**
+   * 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.svg`.
+   * This is useful when, for example, multiple sprite sheets are generated during client and server builds.
+   */
+  fileName?: string;
+};
+declare class ReactIconsSpriteWebpackPlugin implements WebpackPluginInstance {
+  private readonly fileName?;
+  constructor(options?: ReactIconsSpriteWebpackPluginOptions);
+  apply(compiler: Compiler): void;
+}
+//#endregion
+export { ReactIconsSpriteWebpackPlugin, ReactIconsSpriteWebpackPluginOptions };

package/dist/webpack/plugin.mjs

@@ -0,0 +1,46 @@
+import { n as buildSprite, t as PLACEHOLDER } from "../core-CcX_8jJU.mjs";
+import { t as collector } from "../collector-CbA7qCnf.mjs";
+import { createHash } from "node:crypto";
+
+//#region src/webpack/plugin.ts
+var ReactIconsSpriteWebpackPlugin = class {
+	fileName;
+	constructor(options = {}) {
+		this.fileName = options.fileName;
+	}
+	apply(compiler) {
+		const pluginName = "react-icons-sprite-webpack-plugin";
+		compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+			collector.clear();
+			const stage = compiler.webpack?.Compilation ? compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE : 4e3;
+			compilation.hooks.processAssets.tapPromise({
+				name: pluginName,
+				stage
+			}, async () => {
+				const spriteXml = await buildSprite(collector.toList());
+				const generatedHash = createHash("sha256").update(spriteXml).digest("hex").slice(0, 8);
+				const name = this.fileName ?? "react-icons-sprite.svg";
+				const RawSource = compiler.webpack?.sources?.RawSource;
+				if (!RawSource) throw new Error("[react-icons-sprite] Unable to access webpack RawSource");
+				compilation.emitAsset(name, new RawSource(spriteXml));
+				const outputPublicPath = compilation.outputOptions?.publicPath;
+				let base = "";
+				if (typeof outputPublicPath === "string" && outputPublicPath !== "auto") base = outputPublicPath.endsWith("/") ? outputPublicPath : `${outputPublicPath}/`;
+				else base = "/";
+				const finalUrl = `${base}${name}?v=${encodeURIComponent(generatedHash)}`;
+				for (const asset of compilation.getAssets()) {
+					const filename = asset.name;
+					if (!/\.(js|mjs|cjs)$/i.test(filename)) continue;
+					const src = asset.source.source();
+					if (typeof src !== "string") continue;
+					if (!src.includes(PLACEHOLDER)) continue;
+					const next = src.replaceAll(PLACEHOLDER, finalUrl);
+					compilation.updateAsset(filename, new RawSource(next));
+				}
+			});
+		});
+	}
+};
+
+//#endregion
+export { ReactIconsSpriteWebpackPlugin };

package/package.json

@@ -1,24 +1,39 @@
 {
   "name": "react-icons-sprite",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "description": "",
   "author": "Jure Rotar <hello@jurerotar.com>",
   "homepage": "https://github.com/jurerotar/react-icons-sprite#README",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/icon.mjs",
+  "types": "dist/icon.d.mts",
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/icon.d.ts",
-      "import": "./dist/icon.js",
-      "default": "./dist/icon.js"
+      "types": "./dist/icon.d.mts",
+      "import": "./dist/icon.mjs",
+      "default": "./dist/icon.mjs"
     },
     "./vite": {
-      "types": "./dist/vite/plugin.d.ts",
-      "import": "./dist/vite/plugin.js",
-      "default": "./dist/vite/plugin.js"
+      "types": "./dist/vite/plugin.d.mts",
+      "import": "./dist/vite/plugin.mjs",
+      "default": "./dist/vite/plugin.mjs"
+    },
+    "./webpack": {
+      "types": "./dist/webpack/plugin.d.mts",
+      "import": "./dist/webpack/plugin.mjs",
+      "default": "./dist/webpack/plugin.mjs"
+    },
+    "./webpack/loader": {
+      "types": "./dist/webpack/loader.d.mts",
+      "import": "./dist/webpack/loader.mjs",
+      "default": "./dist/webpack/loader.mjs"
+    },
+    "./turbopack": {
+      "types": "./dist/turbopack/plugin.d.mts",
+      "import": "./dist/turbopack/plugin.mjs",
+      "default": "./dist/turbopack/plugin.mjs"
     }
   },
   "publishConfig": {
@@ -49,24 +64,28 @@
     "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.5",
     "@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.3",
+    "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.16.3",
+    "typescript": "5.9.3",
+    "vite": "7.2.2",
+    "webpack": "5.102.1"
   },
   "keywords": [
     "vite",
     "vite-plugin",
+    "webpack",
+    "webpack-plugin",
     "rollup",
     "rolldown",
     "react-icons",

package/dist/icon.d.ts

@@ -1,13 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import React from "react";
-
-//#region src/icon.d.ts
-type IconProps = React.SVGProps<SVGSVGElement> & {
-  iconId: string;
-};
-declare const ReactIconsSpriteIcon: ({
-  iconId,
-  ...rest
-}: IconProps) => react_jsx_runtime0.JSX.Element;
-//#endregion
-export { IconProps, ReactIconsSpriteIcon };