react-icons-sprite 1.2.0-rc.2 → 1.2.0-rc.3

package/README.md

@@ -173,7 +173,11 @@ import { defineConfig } from 'vite';
 import { reactIconsSprite } from 'react-icons-sprite/vite';
 
 export default defineConfig({
-  plugins: [reactIconsSprite()],
+  plugins: [
+    reactIconsSprite({
+      // optional: outputDir: 'assets/sprites',
+    }),
+  ],
 });
 ```
 
@@ -206,12 +210,18 @@ module.exports = {
   },
   plugins: [
     reactIconsSprite({
-      // optional: fileName: 'icons.svg'
+      // optional: outputDir: 'assets/sprites',
     }),
   ],
 };
 ```
 
+### Options
+
+All options are optional:
+
+- `outputDir`: directory inside the bundler output where the sprite asset is emitted.
+
 ### Rsbuild
 
 ```ts

package/dist/{build-sprite-CxqvU2LE.mjs → build-sprite-DpqABaHa.mjs}

@@ -1,5 +1,5 @@
-import { i as resolveIconImport, t as computeIconId } from "./compute-icon-id-Xx4G3fva.mjs";
-import { existsSync, readFileSync } from "node:fs";
+import { o as resolveIconImport, t as computeIconId } from "./compute-icon-id-CGZBEP3i.mjs";
+import { existsSync, readFileSync, statSync } from "node:fs";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 import { createElement } from "react";
@@ -57,14 +57,28 @@ const resolveExportTarget = (exportsField, subpath) => {
 	}
 	return null;
 };
-const fileExists = (filePath) => existsSync(filePath);
+const fileExists = (filePath) => {
+	try {
+		return statSync(filePath).isFile();
+	} catch {
+		return false;
+	}
+};
 const resolveFileCandidate = (filePath) => {
 	return [
 		filePath,
 		`${filePath}.mjs`,
 		`${filePath}.js`,
+		`${filePath}.cjs`,
+		`${filePath}.jsx`,
+		`${filePath}.ts`,
+		`${filePath}.tsx`,
 		path.join(filePath, "index.mjs"),
-		path.join(filePath, "index.js")
+		path.join(filePath, "index.js"),
+		path.join(filePath, "index.cjs"),
+		path.join(filePath, "index.jsx"),
+		path.join(filePath, "index.ts"),
+		path.join(filePath, "index.tsx")
 	].find(fileExists) ?? null;
 };
 const resolveFromBaseDir = (specifier, baseDir) => {
@@ -85,6 +99,15 @@ const resolveFromBaseDir = (specifier, baseDir) => {
 	return resolveFileCandidate(path.join(packageRoot, parsed.subpath));
 };
 const resolveImportSpecifier = (specifier, options) => {
+	if (path.isAbsolute(specifier)) {
+		const resolved = resolveFileCandidate(specifier);
+		return pathToFileURL(resolved ?? specifier).href;
+	}
+	if (specifier.startsWith(".") && options.importer) {
+		const importerPath = options.importer.split("?", 1)[0];
+		const resolved = resolveFileCandidate(path.resolve(path.dirname(importerPath), specifier));
+		if (resolved) return pathToFileURL(resolved).href;
+	}
 	if (!options.baseDir) return specifier;
 	const resolved = resolveFromBaseDir(specifier, options.baseDir);
 	return resolved ? pathToFileURL(resolved).href : specifier;
@@ -135,12 +158,7 @@ const renderFontAwesomeIconDefinition = (iconDefinition) => {
 	};
 };
 const renderHugeiconsIconDefinition = (iconDefinition) => {
-	const svgMarkup = renderToStaticMarkup(createElement("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		color: "currentColor"
-	}, [...iconDefinition].sort(([, a], [, b]) => {
+	const children = [...iconDefinition].sort(([, a], [, b]) => {
 		const hasOpacityA = a.opacity !== void 0;
 		return b.opacity !== void 0 ? 1 : hasOpacityA ? -1 : 0;
 	}).map(([tag, attributes]) => {
@@ -149,7 +167,13 @@ const renderHugeiconsIconDefinition = (iconDefinition) => {
 			...rest,
 			key
 		});
-	})));
+	});
+	const svgMarkup = renderToStaticMarkup(createElement("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		color: "currentColor"
+	}, children));
 	const svgInner = SVG_INNER_RE.exec(svgMarkup)?.[1];
 	if (!svgInner) throw new Error("[react-icons-sprite] Unable to extract SVG content for Hugeicons icon.");
 	return {
@@ -159,7 +183,7 @@ const renderHugeiconsIconDefinition = (iconDefinition) => {
 	};
 };
 const renderIcon = async (pack, exportName, options = {}) => {
-	const importPath = resolveIconImport(pack, exportName);
+	const importPath = options.importPath ?? resolveIconImport(pack, exportName);
 	const imported = await import(resolveImportSpecifier(importPath, options));
 	const iconComponent = unwrapNestedDefaultExport(pickExport(imported, exportName));
 	if (isFontAwesomeIconDefinition(iconComponent)) return renderFontAwesomeIconDefinition(iconComponent);
@@ -178,8 +202,12 @@ const renderIcon = async (pack, exportName, options = {}) => {
 //#region src/sprite/build-sprite.ts
 const buildSprite = async (icons, options = {}) => {
 	if (!icons.length) return "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\"></svg>";
-	return `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${(await Promise.all(icons.map(async ({ pack, exportName }) => {
-		const rendered = await renderIcon(pack, exportName, { baseDir: options.baseDir });
+	return `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">${(await Promise.all(icons.map(async ({ pack, exportName, importer, importPath }) => {
+		const rendered = await renderIcon(pack, exportName, {
+			baseDir: options.baseDir,
+			importer,
+			importPath
+		});
 		const id = computeIconId(pack, exportName);
 		const symbolAttributes = rendered.symbolAttributes ? ` ${rendered.symbolAttributes}` : "";
 		return `<symbol id="${id}" viewBox="${rendered.viewBox}"${symbolAttributes}>${rendered.symbolBody}</symbol>`;

package/dist/{collector-CBRz9R_h.mjs → collector-D0VUmoK8.mjs}

@@ -1,4 +1,4 @@
-import { a as createCollector } from "./compute-icon-id-Xx4G3fva.mjs";
+import { s as createCollector } from "./compute-icon-id-CGZBEP3i.mjs";
 //#region src/collector.ts
 const collector = createCollector();
 //#endregion

package/dist/{compute-icon-id-Xx4G3fva.mjs → compute-icon-id-CGZBEP3i.mjs}

@@ -1,18 +1,25 @@
 //#region src/collector/create-collector.ts
+const createCollectedIconKey = (icon) => {
+	const resolutionKey = icon.importPath ?? (icon.pack.startsWith(".") ? icon.importer : void 0);
+	return JSON.stringify([
+		icon.pack,
+		icon.exportName,
+		resolutionKey
+	]);
+};
 const createCollector = () => {
-	const collected = /* @__PURE__ */ new Set();
+	const collected = /* @__PURE__ */ new Map();
 	return {
-		add(pack, exportName) {
-			collected.add(`${pack}:${exportName}`);
+		add(pack, exportName, options = {}) {
+			const item = {
+				pack,
+				exportName,
+				...options
+			};
+			collected.set(createCollectedIconKey(item), item);
 		},
 		toList() {
-			return [...collected].map((key) => {
-				const [pack, exportName] = key.split(":");
-				return {
-					pack,
-					exportName
-				};
-			});
+			return [...collected.values()];
 		},
 		clear() {
 			collected.clear();
@@ -49,7 +56,8 @@ const DEFAULT_ICON_SOURCES = [
 ];
 const phosphorIconPathName = (name) => name.endsWith("Icon") ? name.slice(0, -4) : name;
 const fluentIconPathName = (name) => {
-	return kebabCase(name.replace(/(?:12|16|20|24|28|32|48)?(?:Regular|Filled|Light|Resizable|Color)$/, ""));
+	const unsizedName = name.replace(/(?:12|16|20|24|28|32|48)?(?:Regular|Filled|Light|Resizable|Color)$/, "");
+	return kebabCase(unsizedName);
 };
 const exactResolvers = {
 	"lucide-react": (pack, name) => `${pack}/dist/esm/icons/${kebabCase(name)}.mjs`,
@@ -80,6 +88,19 @@ const resolveIconImport = (pack, exportName) => {
 	return pack;
 };
 //#endregion
+//#region src/plugin-options.ts
+const normalizeOutputPathSegment = (value) => {
+	return value.replace(/\\/g, "/").replace(/^\/+/, "").replace(/\/+$/, "");
+};
+const createIconSources = () => {
+	return DEFAULT_ICON_SOURCES;
+};
+const createSpriteAssetName = (fileName, outputDir) => {
+	const normalizedOutputDir = outputDir ? normalizeOutputPathSegment(outputDir) : "";
+	const normalizedFileName = normalizeOutputPathSegment(fileName);
+	return normalizedOutputDir ? `${normalizedOutputDir}/${normalizedFileName}` : normalizedFileName;
+};
+//#endregion
 //#region src/utils/compute-icon-id.ts
 const normalizePackAlias = (pack) => {
 	return kebabCase(pack.replace(/^@/, ""));
@@ -88,4 +109,4 @@ const computeIconId = (pack, iconName) => {
 	return `ri-${normalizePackAlias(pack)}-${iconName}`;
 };
 //#endregion
-export { createCollector as a, resolveIconImport as i, normalizePackAlias as n, DEFAULT_ICON_SOURCES as r, computeIconId as t };
+export { DEFAULT_ICON_SOURCES as a, createSpriteAssetName as i, normalizePackAlias as n, resolveIconImport as o, createIconSources as r, createCollector as s, computeIconId as t };

package/dist/plugin-options-ByGrVpdG.d.mts

@@ -0,0 +1,9 @@
+//#region src/plugin-options.d.ts
+type ReactIconsSpritePluginOptions = {
+  /**
+   * Optional directory inside the bundler output where the sprite asset should be emitted.
+   */
+  outputDir?: string;
+};
+//#endregion
+export { ReactIconsSpritePluginOptions as t };

package/dist/{transform-module-3mbTFhoj.mjs → transform-module-DglDSarv.mjs}

@@ -1,4 +1,4 @@
-import { n as normalizePackAlias, r as DEFAULT_ICON_SOURCES } from "./compute-icon-id-Xx4G3fva.mjs";
+import { a as DEFAULT_ICON_SOURCES, n as normalizePackAlias } from "./compute-icon-id-CGZBEP3i.mjs";
 import MagicString from "magic-string";
 //#region src/transform/edit-applier.ts
 const applyEdits = (code, edits) => {

package/dist/vite/plugin.d.mts

@@ -1,13 +1,7 @@
+import { t as ReactIconsSpritePluginOptions } from "../plugin-options-ByGrVpdG.mjs";
 import { Plugin } from "vite";
 //#region src/vite/plugin.d.ts
-type ReactIconsSpriteVitePluginOptions = {
-  /**
-   * 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.
-   */
-  fileName?: string;
-};
+type ReactIconsSpriteVitePluginOptions = ReactIconsSpritePluginOptions;
 declare const reactIconsSprite: (options?: ReactIconsSpriteVitePluginOptions) => Plugin;
 //#endregion
 export { ReactIconsSpriteVitePluginOptions, reactIconsSprite };

package/dist/vite/plugin.mjs

@@ -1,11 +1,12 @@
 import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from "../index.mjs";
-import { a as createCollector, r as DEFAULT_ICON_SOURCES } from "../compute-icon-id-Xx4G3fva.mjs";
-import { t as buildSprite } from "../build-sprite-CxqvU2LE.mjs";
-import { t as transformModule } from "../transform-module-3mbTFhoj.mjs";
+import { i as createSpriteAssetName, r as createIconSources, s as createCollector } from "../compute-icon-id-CGZBEP3i.mjs";
+import { t as buildSprite } from "../build-sprite-DpqABaHa.mjs";
+import { t as transformModule } from "../transform-module-DglDSarv.mjs";
 import { createHash } from "node:crypto";
 //#region src/vite/plugin.ts
 const reactIconsSprite = (options = {}) => {
-	const { fileName } = options;
+	const { outputDir } = options;
+	const iconSources = createIconSources();
 	const collector = createCollector();
 	let root = process.cwd();
 	return {
@@ -18,13 +19,13 @@ const reactIconsSprite = (options = {}) => {
 		configResolved(config) {
 			root = config.root;
 		},
-		transform(code, id) {
+		async transform(code, id) {
 			const cleanId = id.split("?", 1)[0];
 			if (!/\.(mjs|cjs|js|jsx|ts|tsx)$/.test(cleanId)) return null;
 			try {
 				const { code: next, map, anyReplacements } = transformModule(code, id, (pack, exportName) => {
-					collector.add(pack, exportName);
-				}, DEFAULT_ICON_SOURCES);
+					collector.add(pack, exportName, { importer: cleanId });
+				}, iconSources);
 				if (!anyReplacements) return null;
 				return {
 					code: next,
@@ -41,7 +42,7 @@ const reactIconsSprite = (options = {}) => {
 			const emitFileOptions = {
 				type: "asset",
 				source: spriteXml,
-				fileName: fileName ? fileName : `react-icons-sprite-${generatedHash}.svg`
+				fileName: createSpriteAssetName(`react-icons-sprite-${generatedHash}.svg`, outputDir)
 			};
 			const assetId = this.emitFile(emitFileOptions);
 			const finalUrl = `/${this.getFileName(assetId)}`;

package/dist/webpack/loader.mjs

@@ -1,14 +1,16 @@
-import { t as transformModule } from "../transform-module-3mbTFhoj.mjs";
-import { t as collector } from "../collector-CBRz9R_h.mjs";
+import { r as createIconSources } from "../compute-icon-id-CGZBEP3i.mjs";
+import { t as transformModule } from "../transform-module-DglDSarv.mjs";
+import { t as collector } from "../collector-D0VUmoK8.mjs";
 //#region src/webpack/loader.ts
 const reactIconsSpriteLoader = async function(source) {
 	if (this.mode === "development") return source;
 	const id = this.resourcePath;
 	try {
 		if (!/\.(mjs|cjs|js|jsx|ts|tsx)$/i.test(id)) return source;
+		const iconSources = createIconSources();
 		const { code, anyReplacements } = transformModule(String(source), id, (pack, exportName) => {
-			collector.add(pack, exportName);
-		});
+			collector.add(pack, exportName, { importer: id });
+		}, iconSources);
 		if (!anyReplacements) return source;
 		return code;
 	} catch (err) {

package/dist/webpack/plugin.d.mts

@@ -1,15 +1,9 @@
+import { t as ReactIconsSpritePluginOptions } from "../plugin-options-ByGrVpdG.mjs";
 import { Compiler } 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-[hash].svg`.
-   * This is useful when, for example, multiple sprite sheets are generated during client and server builds.
-   */
-  fileName?: string;
-};
+type ReactIconsSpriteWebpackPluginOptions = ReactIconsSpritePluginOptions;
 declare class ReactIconsSpriteWebpackPlugin {
-  private readonly fileName?;
+  private readonly outputDir?;
   constructor(options?: ReactIconsSpriteWebpackPluginOptions);
   apply(compiler: Compiler): void;
 }

package/dist/webpack/plugin.mjs

@@ -1,12 +1,13 @@
 import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from "../index.mjs";
-import { t as buildSprite } from "../build-sprite-CxqvU2LE.mjs";
-import { t as collector } from "../collector-CBRz9R_h.mjs";
+import { i as createSpriteAssetName } from "../compute-icon-id-CGZBEP3i.mjs";
+import { t as buildSprite } from "../build-sprite-DpqABaHa.mjs";
+import { t as collector } from "../collector-D0VUmoK8.mjs";
 import { createHash } from "node:crypto";
 //#region src/webpack/plugin.ts
 var ReactIconsSpriteWebpackPlugin = class {
-	fileName;
+	outputDir;
 	constructor(options = {}) {
-		this.fileName = options.fileName;
+		this.outputDir = options.outputDir;
 	}
 	apply(compiler) {
 		if (compiler.options.mode === "development") return;
@@ -20,7 +21,7 @@ var ReactIconsSpriteWebpackPlugin = class {
 			}, async () => {
 				const spriteXml = await buildSprite(collector.toList(), { baseDir: compiler.context });
 				const generatedHash = createHash("sha256").update(spriteXml).digest("hex").slice(0, 8);
-				const name = this.fileName ?? `react-icons-sprite-${generatedHash}.svg`;
+				const name = createSpriteAssetName(`react-icons-sprite-${generatedHash}.svg`, this.outputDir);
 				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));

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "react-icons-sprite",
-  "version": "1.2.0-rc.2",
+  "version": "1.2.0-rc.3",
   "type": "module",
   "description": "A lightweight Vite, Rsbuild and Webpack plugin for react-icons that builds a single SVG sprite and rewrites icons to <use>, reducing bundle size and runtime overhead.",
   "author": "Jure Rotar <hello@jurerotar.com>",
@@ -88,18 +88,18 @@
     "react-dom": ">= 16"
   },
   "dependencies": {
-    "magic-string": "0.30.21"
+    "magic-string": "1.1.0"
   },
   "devDependencies": {
-    "@types/node": "26.1.1",
-    "@types/react-dom": "19.2.3",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "tsdown": "0.22.7",
+    "@types/node": "26.2.0",
+    "@types/react-dom": "19.2.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "tsdown": "0.22.14",
     "typescript": "7.0.2",
-    "vite": "8.1.4",
+    "vite": "8.2.1",
     "vitest": "4.1.10",
-    "webpack": "5.108.4"
+    "webpack": "5.109.2"
   },
   "keywords": [
     "vite",