react-icons-sprite 1.3.1 → 1.4.0-rc1

package/README.md

@@ -9,36 +9,37 @@ reconcile large, nested SVG trees.
 
 ## Supported icon libraries
 
-Out of the box, imports from the following libraries are detected and transformed. These are the versions currently
-used by the demo apps and validation suite:
-
-| Library | Validated version |
-|---|---:|
-| `react-icons/*` packs (e.g. `react-icons/bi`, `react-icons/fa`, ...) | `5.6.0` |
-| `lucide-react` | `1.16.0` |
-| `@radix-ui/react-icons` | `1.3.2` |
-| `@heroicons/react` (v1 and v2 subpaths) | `2.2.0` |
-| `@tabler/icons-react` | `3.44.0` |
-| `phosphor-react` | `1.4.1` |
-| `@phosphor-icons/react` | `2.1.10` |
-| `react-feather` | `2.0.10` |
-| `react-bootstrap-icons` | `1.11.6` |
-| `grommet-icons` | `4.14.0` |
-| `@remixicon/react` | `4.9.0` |
-| `devicons-react` | `1.5.0` |
-| `@fortawesome/free-solid-svg-icons` (and other Font Awesome icon packs) | `7.2.0` |
-| `@fortawesome/react-fontawesome` | `3.3.1` |
-| `@mui/icons-material` | `9.0.1` |
-| `@carbon/icons-react` | `11.81.0` |
-| `@ant-design/icons` | `6.2.5` |
-| `@fluentui/react-icons` | `2.0.330` |
-| `@primer/octicons-react` | `19.28.1` |
-| `@hugeicons/react` with `@hugeicons/core-free-icons` | `1.1.6` / `4.2.0` |
+Out of the box, imports from the following icon sets are detected and transformed:
+
+- `react-icons/*` packs (e.g. `react-icons/bi`, `react-icons/fa`, ...)
+- `lucide-react`
+- `@radix-ui/react-icons`
+- `@heroicons/react` (including subpaths)
+- `@tabler/icons-react`
+- `phosphor-react`
+- `@phosphor-icons/react`
+- `react-feather`
+- `react-bootstrap-icons`
+- `grommet-icons`
+- `@remixicon/react`
+- `devicons-react`
+- `@fortawesome/free-solid-svg-icons` and other Font Awesome icon packs, used with `@fortawesome/react-fontawesome`
+- `@mui/icons-material`
+- `@carbon/icons-react`
+- `@ant-design/icons`
+- `@fluentui/react-icons`
+- `@primer/octicons-react`
+- `@hugeicons/core-free-icons`, used with `@hugeicons/react`
+- `@pillage-first/graphics`
 
 > [!NOTE]
 > `react-icons-sprite` does not bundle these libraries. You must install whichever icon packages you intend to use in
 > your project.
 
+Icon resolvers select the first matching version range using the icon package installed in the importing project.
+This also applies to subpath imports such as `@fluentui/react-icons/svg/add` and `@mui/icons-material/Alarm`.
+Additional layout changes can be supported by adding a `{ range, resolve }` entry in `src/packs/icon-resolvers.ts`.
+
 ## Motivation
 
 By default, when you use an icon library like `react-icons`, each icon is a React component. For example:
@@ -132,8 +133,15 @@ This is a big win when you’re rendering icons in lists, tables, or maps where
 
 ### Performance comparison
 
-The build-time transform is also intentionally small. The current Vitest benchmark transforms a component with 240 icon
-usages at **32,805.97 ops/sec** (mean **0.0305 ms** per transform) on the machine listed below.
+Build-time transforms use Oxc parsing and targeted scope analysis to preserve comments, strings, and shadowed
+bindings. Raw AST transfer is enabled when Oxc reports runtime support; otherwise standard parsing is used.
+The raw-transfer API is experimental, so the Oxc version is pinned. From the repository root, run
+`npm exec --workspace react-icons-sprite -- vitest bench --run` to benchmark direct icon usages, component references,
+mixed usages, repeated usages with the real icon collector, and pass-through modules without supported icon imports.
+Each transformed icon is registered once per module, including when it is imported under multiple aliases.
+Import sources are checked once per declaration, aliases share icon metadata, and replacement strings are built
+only for icons that are used. The benchmarks include 1, 12, 60, and 240 usages, plus a large import with one usage;
+transforms per second depend heavily on module size, so compare the same fixture when measuring changes.
 
 | icon (pack)             | react-icons icon render mean time | react-icons-sprite icon render mean time | Relative difference |
 |-------------------------|----------------------------------:|-----------------------------------------:|--------------------:|
@@ -202,6 +210,7 @@ module.exports = {
         use: [
           {
             loader: require.resolve('react-icons-sprite/webpack/loader'),
+            // optional: options: { exclude: /^@pillage-first\/graphics$/ },
           },
           // put your ts/tsx loader after ours (e.g. swc-loader or ts-loader)
         ],
@@ -218,9 +227,13 @@ module.exports = {
 
 ### Options
 
-All options are optional:
+All options are optional. In Vite, pass them to `reactIconsSprite()`. In Webpack and Rsbuild,
+pass `outputDir` to the plugin and `exclude` to the loader options:
 
 - `outputDir`: directory inside the bundler output where the sprite asset is emitted.
+- `exclude`: a `RegExp` or list of regular expressions for icon import sources
+  that must remain inline. Use this for icons whose CSS targets child SVG
+  elements; those selectors cannot cross a sprite `<use>` reference.
 
 ### Rsbuild
 

package/dist/build-sprite-DEOFEWm0.mjs

@@ -0,0 +1,472 @@
+import { r as kebabCase, t as computeIconId } from "./compute-icon-id-C42PyoDX.mjs";
+import { existsSync, readFileSync, statSync } from "node:fs";
+import path from "node:path";
+import { pathToFileURL } from "node:url";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import satisfies from "semver/functions/satisfies.js";
+//#region src/packs/icon-resolvers.ts
+const phosphorIconPathName = (name) => name.endsWith("Icon") ? name.slice(0, -4) : name;
+const fluentIconPathName = (name) => {
+	const unsizedName = name.replace(/(?:12|16|20|24|28|32|48)?(?:Regular|Filled|Light|Resizable|Color)$/, "");
+	return kebabCase(unsizedName);
+};
+const lucideIconPathName = (name) => kebabCase(name.replace(/^Lucide/, "").replace(/Icon$/, "")).replace(/([a-z])(\d)/g, "$1-$2");
+const exactResolvers = {
+	"lucide-react": [
+		{
+			range: ">=1.9.0 || >=0.262.0 <=0.263.1",
+			resolve: (pack, name) => `${pack}/dist/esm/icons/${lucideIconPathName(name)}.mjs`
+		},
+		{
+			range: ">=0.104.0",
+			resolve: (pack, name) => `${pack}/dist/esm/icons/${lucideIconPathName(name)}.js`
+		},
+		{
+			range: ">=0.0.0",
+			resolve: (pack) => `${pack}/dist/cjs/lucide-react.js`
+		}
+	],
+	"@radix-ui/react-icons": [{
+		range: ">=2.0.0-0",
+		resolve: (pack, name) => `${pack}/dist/${name}.js`
+	}, {
+		range: ">=1.0.0",
+		resolve: (pack) => `${pack}/dist/react-icons.esm.js`
+	}],
+	"@tabler/icons-react": [
+		{
+			range: ">=3.0.0-beta.2",
+			resolve: (pack, name) => `${pack}/dist/esm/icons/${name}.mjs`
+		},
+		{
+			range: ">=2.1.0",
+			resolve: (pack, name) => `${pack}/dist/esm/icons/${name}.js`
+		},
+		{
+			range: ">=2.0.0-0",
+			resolve: (pack, name) => `${pack}/dist/esm/icons/${kebabCase(name.replace(/^Icon/, ""))}.js`
+		}
+	],
+	"@phosphor-icons/react": [
+		{
+			range: "2.1.8-rc.0",
+			resolve: (pack) => `${pack}/dist/index.cjs.js`
+		},
+		{
+			range: ">=2.1.8-rc.0",
+			resolve: (pack, name) => `${pack}/dist/ssr/${phosphorIconPathName(name)}.es.js`
+		},
+		{
+			range: "2.0.12",
+			resolve: (pack, name) => `${pack}/dist/csr/${phosphorIconPathName(name)}.mjs`
+		},
+		{
+			range: ">=2.1.3 || >=2.0.11 <2.1.0",
+			resolve: (pack, name) => `${pack}/dist/ssr/${phosphorIconPathName(name)}.mjs`
+		},
+		{
+			range: ">=2.1.0",
+			resolve: (pack, name) => `${pack}/dist/icons/${phosphorIconPathName(name)}.mjs`
+		},
+		{
+			range: ">=2.0.3",
+			resolve: (pack, name) => `${pack}/dist/icons/${phosphorIconPathName(name)}.es.js`
+		}
+	],
+	"phosphor-react": [{
+		range: ">=1.0.1",
+		resolve: (pack, name) => `${pack}/dist/icons/${name}.esm.js`
+	}, {
+		range: ">=0.1.0",
+		resolve: (pack) => `${pack}/dist/index.js`
+	}],
+	"react-bootstrap-icons": [{
+		range: ">=1.0.0-0",
+		resolve: (pack, name) => `${pack}/dist/icons/${kebabCase(name)}.js`
+	}],
+	"react-feather": [{
+		range: ">=1.0.2 <1.0.9 || >=1.1.0",
+		resolve: (pack, name) => `${pack}/dist/icons/${kebabCase(name)}.js`
+	}],
+	"grommet-icons": [{
+		range: ">=0.1.0",
+		resolve: (pack, name) => `${pack}/icons/${name}.js`
+	}],
+	"devicons-react": [
+		{
+			range: "1.2.3-canary-0.0.1 || 1.2.3-canary-0.0.2 || >=1.2.3-canary-0.0.5 <1.2.3 || >=1.2.4",
+			resolve: (pack, name) => `${pack}/lib/icons/${name}.js`
+		},
+		{
+			range: ">=1.1.2 <1.1.5 || >=1.1.7 <1.2.4",
+			resolve: (pack, name) => `${pack}/icons/${name}.js`
+		},
+		{
+			range: "1.0.7 || >=1.0.9 <1.1.2",
+			resolve: (pack) => `${pack}/index.js`
+		},
+		{
+			range: ">=0.1.0 <1.0.7 || 1.0.8",
+			resolve: (pack) => `${pack}/dist/index.js`
+		}
+	],
+	"@carbon/icons-react": [{
+		range: ">=11.0.0",
+		resolve: (pack, name) => `${pack}/lib/${name}.js`
+	}, {
+		range: ">=10.4.0",
+		resolve: (pack) => `${pack}/lib/index.js`
+	}],
+	"@ant-design/icons": [{
+		range: ">=4.0.0",
+		resolve: (pack, name) => `@ant-design/icons/lib/icons/${name === "default" ? pack.split("/").at(-1) : name}.js`
+	}],
+	"@fluentui/react-icons": [
+		{
+			range: ">=2.0.336",
+			resolve: (pack, name) => `@fluentui/react-icons/lib-cjs/atoms/svg/${pack.split("/svg/")[1] ?? fluentIconPathName(name)}.cjs`
+		},
+		{
+			range: ">=2.0.314",
+			resolve: (pack, name) => `@fluentui/react-icons/lib-cjs/atoms/svg/${pack.split("/svg/")[1] ?? fluentIconPathName(name)}.js`
+		},
+		{
+			range: ">=2.0.0",
+			resolve: () => "@fluentui/react-icons/lib-cjs/index.js"
+		},
+		{
+			range: ">=1.1.110",
+			resolve: (pack, name) => `${pack}/lib/esm/components/${name}.js`
+		},
+		{
+			range: ">=0.1.1 <1.0.0",
+			resolve: (pack, name) => `${pack}/lib-commonjs/components/${name}.js`
+		}
+	],
+	"@primer/octicons-react": [{
+		range: ">=19.30.0",
+		resolve: (pack, name) => `${pack}/dist/icons/${name}.mjs`
+	}, {
+		range: ">=10.0.0",
+		resolve: (pack) => `${pack}/dist/index.umd.js`
+	}],
+	"@hugeicons/core-free-icons": [
+		{
+			range: ">=1.2.0",
+			resolve: (pack, name) => pack === "@hugeicons/core-free-icons" ? `${pack}/${name}` : pack
+		},
+		{
+			range: ">=1.0.4",
+			resolve: () => "@hugeicons/core-free-icons/dist/esm/index.js"
+		},
+		{
+			range: ">=1.0.0",
+			resolve: (pack, name) => `@hugeicons/core-free-icons/dist/${name === "default" ? pack.split("/").at(-1) : name}.mjs`
+		}
+	],
+	"@mui/icons-material": [{
+		range: ">=5.0.0-0",
+		resolve: (pack, name) => pack === "@mui/icons-material" ? `${pack}/${name}` : pack
+	}],
+	"@heroicons/react": [{
+		range: ">=2.0.0-0",
+		resolve: (pack, name) => /^@heroicons\/react\/\d{2}\/(?:outline|solid)$/.test(pack) ? `${pack}/${name}` : pack
+	}, {
+		range: ">=0.1.0",
+		resolve: (pack, name) => /^@heroicons\/react\/(?:outline|solid)$/.test(pack) ? `${pack}/${name}.js` : pack
+	}],
+	"@remixicon/react": [{
+		range: ">=0.0.3 <4.1.0 || >=4.1.1",
+		resolve: (pack) => `${pack}/index.js`
+	}, {
+		range: "0.0.2",
+		resolve: (pack, name) => `${pack}/cjs/${name}.cjs`
+	}],
+	"@pillage-first/graphics": [{
+		range: ">=0.0.10",
+		resolve: (pack) => `${pack}/dist/index.mjs`
+	}, {
+		range: ">=0.0.0",
+		resolve: (pack) => `${pack}/dist/index.js`
+	}],
+	"react-icons": [{
+		range: ">=5.0.0",
+		resolve: (pack) => pack
+	}, {
+		range: ">=3.0.0",
+		resolve: (pack) => `${pack}/index.js`
+	}]
+};
+const fontAwesomeResolvers = [{
+	range: ">=5.1.0-0",
+	resolve: (pack, name) => `${pack}/${name}.js`
+}];
+const resolversFor = (pack) => {
+	const packageName = pack.split("/").slice(0, pack.startsWith("@") ? 2 : 1).join("/");
+	return /^@fortawesome\/[\w-]+-svg-icons$/.test(packageName) ? fontAwesomeResolvers : Object.hasOwn(exactResolvers, packageName) ? exactResolvers[packageName] : void 0;
+};
+const hasVersionedIconResolver = (pack) => resolversFor(pack) !== void 0;
+const selectIconImportResolver = (pack, version) => {
+	return (version ? resolversFor(pack)?.find(({ range }) => satisfies(version, range, { includePrerelease: true })) : void 0)?.resolve ?? ((source) => source);
+};
+//#endregion
+//#region src/sprite/render-icon.ts
+const SVG_INNER_RE = /<svg\b[^>]*>([\s\S]*?)<\/svg>/i;
+const VIEWBOX_RE = /viewBox=["']([^"']+)["']/i;
+const SVG_OPEN_RE = /<svg\b([^>]*)>/i;
+const SVG_ATTR_RE = /([:\w-]+)=("[^"]*"|'[^']*')/g;
+const OMITTED_SVG_ATTRIBUTES = /* @__PURE__ */ new Set([
+	"xmlns",
+	"viewBox",
+	"width",
+	"height",
+	"id"
+]);
+const readPackageInfo = (packageRoot, packageName, cache) => {
+	let info = cache.packages.get(packageRoot);
+	if (!info) {
+		const manifest = JSON.parse(readFileSync(path.join(packageRoot, "package.json"), "utf8"));
+		info = {
+			manifest,
+			resolveImport: selectIconImportResolver(packageName, manifest.version)
+		};
+		cache.packages.set(packageRoot, info);
+	}
+	return info;
+};
+const parsePackageSpecifier = (specifier) => {
+	if (specifier.startsWith(".") || path.isAbsolute(specifier)) return null;
+	const parts = specifier.split("/");
+	const packageName = specifier.startsWith("@") ? `${parts[0]}/${parts[1]}` : parts[0];
+	const rest = parts.slice(specifier.startsWith("@") ? 2 : 1).join("/");
+	return {
+		packageName,
+		subpath: rest ? `./${rest}` : "."
+	};
+};
+const findPackageRoot = (packageName, baseDir, cache) => {
+	let current = path.resolve(baseDir);
+	const key = JSON.stringify([packageName, current]);
+	const cachedRoot = cache.roots.get(key);
+	if (cachedRoot !== void 0) return cachedRoot;
+	while (true) {
+		const candidate = path.join(current, "node_modules", packageName);
+		if (existsSync(path.join(candidate, "package.json"))) {
+			cache.roots.set(key, candidate);
+			return candidate;
+		}
+		const parent = path.dirname(current);
+		if (parent === current) {
+			cache.roots.set(key, null);
+			return null;
+		}
+		current = parent;
+	}
+};
+const pickExportTarget = (value) => {
+	if (typeof value === "string") return value;
+	if (!value || typeof value !== "object") return null;
+	const record = value;
+	return pickExportTarget(record.import) ?? pickExportTarget(record.default) ?? pickExportTarget(record.module) ?? pickExportTarget(record.require);
+};
+const resolveExportTarget = (exportsField, subpath) => {
+	if (typeof exportsField === "string" || Array.isArray(exportsField)) return subpath === "." ? pickExportTarget(exportsField) : null;
+	if (!exportsField || typeof exportsField !== "object") return null;
+	const exportsRecord = exportsField;
+	const exact = pickExportTarget(exportsRecord[subpath]);
+	if (exact) return exact;
+	for (const [key, value] of Object.entries(exportsRecord)) {
+		if (!key.includes("*")) continue;
+		const [prefix, suffix] = key.split("*");
+		if (!subpath.startsWith(prefix) || !subpath.endsWith(suffix)) continue;
+		const matched = subpath.slice(prefix.length, subpath.length - suffix.length);
+		const target = pickExportTarget(value);
+		if (target) return target.replaceAll("*", matched);
+	}
+	return null;
+};
+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.cjs"),
+		path.join(filePath, "index.jsx"),
+		path.join(filePath, "index.ts"),
+		path.join(filePath, "index.tsx")
+	].find(fileExists) ?? null;
+};
+const resolveFromPackageRoot = (packageRoot, subpath, packageJson) => {
+	const exportTarget = resolveExportTarget(packageJson.exports, subpath);
+	if (exportTarget) {
+		const resolved = resolveFileCandidate(path.join(packageRoot, exportTarget));
+		if (resolved) return resolved;
+	}
+	if (subpath === ".") {
+		const entry = packageJson.module ?? packageJson.main;
+		if (entry) return resolveFileCandidate(path.join(packageRoot, entry));
+	}
+	return resolveFileCandidate(path.join(packageRoot, subpath));
+};
+const resolveFromBaseDir = (specifier, baseDir, cache) => {
+	const parsed = parsePackageSpecifier(specifier);
+	if (!parsed) return null;
+	const packageRoot = findPackageRoot(parsed.packageName, baseDir, cache);
+	return packageRoot ? resolveFromPackageRoot(packageRoot, parsed.subpath, readPackageInfo(packageRoot, parsed.packageName, cache).manifest) : null;
+};
+const resolveImportSpecifier = (specifier, options, cache) => {
+	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, cache);
+	return resolved ? pathToFileURL(resolved).href : specifier;
+};
+const extractSymbolAttributes = (svgMarkup) => {
+	const openingAttributes = SVG_OPEN_RE.exec(svgMarkup)?.[1];
+	if (!openingAttributes) return "";
+	const attributes = [];
+	for (const [, name, value] of openingAttributes.matchAll(SVG_ATTR_RE)) {
+		if (OMITTED_SVG_ATTRIBUTES.has(name)) continue;
+		attributes.push(`${name}=${value}`);
+	}
+	return attributes.join(" ");
+};
+const pickExport = (moduleExports, exportName) => {
+	if (exportName === "default") return moduleExports.default;
+	const defaultExport = moduleExports.default;
+	const nestedExport = defaultExport && typeof defaultExport === "object" ? defaultExport[exportName] : void 0;
+	return moduleExports[exportName] ?? nestedExport ?? defaultExport;
+};
+const unwrapNestedDefaultExport = (value) => {
+	if (!value || typeof value !== "object" || !("default" in value)) return value;
+	if ("$$typeof" in value) return value;
+	return value.default;
+};
+const isRenderableComponent = (value) => {
+	if (typeof value === "function") return true;
+	if (!value || typeof value !== "object") return false;
+	return "$$typeof" in value;
+};
+const isFontAwesomeIconDefinition = (value) => {
+	if (!value || typeof value !== "object") return false;
+	const icon = value.icon;
+	if (!Array.isArray(icon) || icon.length < 5) return false;
+	return typeof icon[0] === "number" && typeof icon[1] === "number";
+};
+const isHugeiconsIconDefinition = (value) => {
+	if (!Array.isArray(value)) return false;
+	return value.every((item) => {
+		if (!Array.isArray(item) || item.length < 2) return false;
+		return typeof item[0] === "string" && typeof item[1] === "object";
+	});
+};
+const renderFontAwesomeIconDefinition = (iconDefinition) => {
+	const [width, height, , , svgPathData] = iconDefinition.icon;
+	return {
+		symbolBody: (Array.isArray(svgPathData) ? svgPathData : [svgPathData]).map((d) => `<path d="${d}"/>`).join(""),
+		viewBox: `0 0 ${width} ${height}`,
+		symbolAttributes: ""
+	};
+};
+const renderHugeiconsIconDefinition = (iconDefinition) => {
+	const children = [...iconDefinition].sort(([, a], [, b]) => {
+		const hasOpacityA = a.opacity !== void 0;
+		return b.opacity !== void 0 ? 1 : hasOpacityA ? -1 : 0;
+	}).map(([tag, attributes]) => {
+		const { key, ...rest } = attributes;
+		return createElement(tag, {
+			...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 {
+		symbolBody: svgInner,
+		viewBox: "0 0 24 24",
+		symbolAttributes: extractSymbolAttributes(svgMarkup)
+	};
+};
+const renderIconWithCache = async (pack, exportName, options, cache) => {
+	let packageRoot = null;
+	let packageInfo;
+	const packageName = parsePackageSpecifier(pack)?.packageName ?? pack;
+	if (!options.importPath && hasVersionedIconResolver(pack)) {
+		const baseDir = options.baseDir ?? process.cwd();
+		const importerDir = options.importer ? path.dirname(options.importer.split("?", 1)[0]) : baseDir;
+		packageRoot = findPackageRoot(packageName, importerDir, cache) ?? findPackageRoot(packageName, baseDir, cache);
+		if (packageRoot) packageInfo = readPackageInfo(packageRoot, packageName, cache);
+	}
+	const importPath = options.importPath ?? packageInfo?.resolveImport(pack, exportName) ?? pack;
+	let specifier = importPath;
+	if (packageRoot && packageInfo) {
+		const subpath = parsePackageSpecifier(importPath)?.subpath ?? ".";
+		specifier = resolveFromPackageRoot(packageRoot, subpath, packageInfo.manifest) ?? path.join(packageRoot, subpath === "." ? "index.js" : subpath);
+	}
+	if (pack === "lucide-react" && packageRoot && importPath.startsWith(`${pack}/`) && !fileExists(specifier)) specifier = path.join(packageRoot, `dist/esm/lucide-react${path.extname(specifier)}`);
+	const imported = await import(resolveImportSpecifier(specifier, options, cache));
+	const iconComponent = unwrapNestedDefaultExport(pickExport(imported, exportName === "default" && imported.default === void 0 && packageRoot && importPath !== pack && pack !== packageName ? pack.split("/").at(-1) ?? exportName : exportName));
+	if (isFontAwesomeIconDefinition(iconComponent)) return renderFontAwesomeIconDefinition(iconComponent);
+	if (isHugeiconsIconDefinition(iconComponent)) return renderHugeiconsIconDefinition(iconComponent);
+	if (!isRenderableComponent(iconComponent)) throw new Error(`[react-icons-sprite] Unable to render icon "${exportName}" from "${pack}". Expected a React component export.`);
+	const svgMarkup = renderToStaticMarkup(createElement(iconComponent));
+	const svgInner = SVG_INNER_RE.exec(svgMarkup)?.[1];
+	if (!svgInner) throw new Error(`[react-icons-sprite] Unable to extract SVG content for "${exportName}" from "${pack}".`);
+	return {
+		symbolBody: svgInner,
+		viewBox: VIEWBOX_RE.exec(svgMarkup)?.[1] ?? "0 0 24 24",
+		symbolAttributes: extractSymbolAttributes(svgMarkup)
+	};
+};
+const createIconRenderer = () => {
+	const cache = {
+		roots: /* @__PURE__ */ new Map(),
+		packages: /* @__PURE__ */ new Map()
+	};
+	return (pack, exportName, options = {}) => renderIconWithCache(pack, exportName, options, cache);
+};
+//#endregion
+//#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>";
+	const renderIcon = createIconRenderer();
+	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>`;
+	}))).join("")}</svg>`;
+};
+//#endregion
+export { buildSprite as t };

package/dist/{collector-dvzR3TG1.mjs → collector-1bZHiz4N.mjs}

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

package/dist/compute-icon-id-C42PyoDX.mjs

@@ -0,0 +1,84 @@
+//#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 Map();
+	return {
+		add(pack, exportName, options = {}) {
+			const item = {
+				pack,
+				exportName,
+				...options
+			};
+			collected.set(createCollectedIconKey(item), item);
+		},
+		toList() {
+			return [...collected.values()];
+		},
+		clear() {
+			collected.clear();
+		}
+	};
+};
+//#endregion
+//#region src/packs/icon-sources.ts
+const DEFAULT_ICON_SOURCES = [
+	/^react-icons\/[\w-]+$/,
+	/^@fortawesome\/[\w-]+-svg-icons$/,
+	/^lucide-react$/,
+	/^@heroicons\/react(?:\/.*)?$/,
+	/^@tabler\/icons-react$/,
+	/^@radix-ui\/react-icons$/,
+	/^phosphor-react$/,
+	/^@phosphor-icons\/react$/,
+	/^react-feather$/,
+	/^react-bootstrap-icons$/,
+	/^grommet-icons$/,
+	/^@remixicon\/react$/,
+	/^devicons-react$/,
+	/^@mui\/icons-material(?:\/.*)?$/,
+	/^@carbon\/icons-react$/,
+	/^@ant-design\/icons(?:\/.*)?$/,
+	/^@fluentui\/react-icons(?:\/svg\/[\w-]+)?$/,
+	/^@primer\/octicons-react$/,
+	/^@hugeicons\/core-free-icons(?:\/.*)?$/,
+	/^@pillage-first\/graphics$/
+];
+//#endregion
+//#region src/plugin-options.ts
+const normalizeOutputPathSegment = (value) => {
+	return value.replace(/\\/g, "/").replace(/^\/+/, "").replace(/\/+$/, "");
+};
+const createIconSources = () => {
+	return DEFAULT_ICON_SOURCES;
+};
+const createExcludedIconSources = (exclude) => {
+	if (!exclude) return [];
+	return exclude instanceof RegExp ? [exclude] : exclude;
+};
+const createSpriteAssetName = (fileName, outputDir) => {
+	const normalizedOutputDir = outputDir ? normalizeOutputPathSegment(outputDir) : "";
+	const normalizedFileName = normalizeOutputPathSegment(fileName);
+	return normalizedOutputDir ? `${normalizedOutputDir}/${normalizedFileName}` : normalizedFileName;
+};
+//#endregion
+//#region src/utils/kebab-case.ts
+const kebabCase = (value) => {
+	return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-z0-9]+/gi, "-").replace(/-{2,}/g, "-").replace(/^-|-$/g, "").toLowerCase();
+};
+//#endregion
+//#region src/utils/compute-icon-id.ts
+const normalizePackAlias = (pack) => {
+	return kebabCase(pack.replace(/^@/, ""));
+};
+const computeIconId = (pack, iconName) => {
+	return `ri-${normalizePackAlias(pack)}-${iconName}`;
+};
+//#endregion
+export { createIconSources as a, createCollector as c, createExcludedIconSources as i, normalizePackAlias as n, createSpriteAssetName as o, kebabCase as r, DEFAULT_ICON_SOURCES as s, computeIconId as t };

package/dist/icon.d.mts

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