react-icons-sprite 1.0.1 → 1.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © 2025 Jure Rotar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE

package/README.md

@@ -0,0 +1,325 @@
+# react-icons-sprite
+
+`react-icons-sprite` is a lightweight plugin for Vite and Webpack that turns React icon components into a single SVG
+spritesheet and rewrites your code to reference those symbols via `<use>`.
+
+It supports multiple React icon packages that export icons as individual React components. 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.
+
+## 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` |
+
+> [!NOTE]
+> `react-icons-sprite` does not bundle these libraries. You must install whichever icon packages you intend to use in
+> your project.
+
+## Motivation
+
+By default, when you use an icon library like `react-icons`, each icon is a React component. For example:
+
+```tsx
+import { LuWheat } from "react-icons/lu";
+
+export function Example() {
+  return <LuWheat />;
+}
+```
+
+looks harmless, but at build time this compiles to something like:
+
+```javascript
+import { b as e } from './iconBase-BU3rGdXB.js'
+
+function t(t) {
+  return e({
+    tag: `svg`, attr: { viewBox: `0 0 640 512` }, child: [{
+      tag: `path`, attr: {
+        d: `M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z`
+      }, child: []
+    }]
+  })(t)
+}
+
+function n(t) {
+  return e({
+    tag: `svg`, attr: { viewBox: `0 0 496 512` }, child: [{
+      tag: `path`, attr: {
+        d: `M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z`
+      }, child: []
+    }]
+  })(t)
+}
+
+// ... potentially dozens more child components.
+
+export { t, n };
+```
+
+That means:
+
+- Every icon adds hundreds of characters of JSX to your bundle.
+- At runtime, React must create and diff dozens of DOM nodes for every icon render.
+- If you render 100 icons, React is reconciling potentially thousands of <path> elements.
+
+Now compare that to output when using a spritesheet with `<use>`:
+
+```tsx
+import { LuWheat } from "react-icons/lu";
+
+export function Example() {
+  return <LuWheat />;
+}
+```
+
+```javascript
+import { b as n } from './icon-FONPSuqX.js';
+
+var r = e(t());
+const i = () => (0, r.jsx)(n, { iconId: `ri-react-icons-lu-LuWheat` });
+export { i as IconWheat };
+```
+
+`icon-FONPSuqX.js` in this case is our simple icon wrapper, which looks like this:
+
+```javascript
+var n = e(t());
+const r = ({ iconId: e, ...t }) => {
+  let r = `assets/react-icons-sprite-C-JClopV.svg#${e}`;
+  return (0, n.jsxs)(`svg`, {
+    height: `1em`,
+    width: `1em`,
+    preserveAspectRatio: `xMidYMid meet`,
+    viewBox: `0 0 24 24`, ...t,
+    children: [(0, n.jsx)(`title`, { children: e }), (0, n.jsx)(`use`, { href: r })]
+  })
+};
+export { r as b };
+```
+
+Runtime difference:
+
+- React only reconciles two DOM nodes (`<svg>` + `<use>`).
+- All heavy path data lives in the static spritesheet once, not duplicated across components.
+- Updating 100 icons is as cheap as updating 100 `<use>` tags.
+
+This is a big win when you’re rendering icons in lists, tables, or maps where dozens or hundreds of them appear at once.
+
+### 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.
+
+| icon (pack)             | react-icons icon render mean time | react-icons-sprite icon render mean time | Relative difference |
+|-------------------------|----------------------------------:|-----------------------------------------:|--------------------:|
+| **FiCpu** (fi)          |                          0.188 ms |                                 0.048 ms |     74.6% reduction |
+| **MdBuild** (md)        |                          0.198 ms |                                 0.048 ms |     76.0% reduction |
+| **FaCamera** (fa)       |                          0.162 ms |                                 0.015 ms |     90.7% reduction |
+| **IoAperture** (io5)    |                          0.029 ms |                                 0.015 ms |     49.7% reduction |
+| **BiBell** (bi)         |                          0.023 ms |                                 0.014 ms |     38.5% reduction |
+| **AiOutlineAlert** (ai) |                          0.023 ms |                                 0.014 ms |     38.3% reduction |
+| **BsAlarm** (bs)        |                          0.027 ms |                                 0.014 ms |     47.4% reduction |
+| **RiAnchor** (ri)       |                          0.023 ms |                                 0.014 ms |     38.6% reduction |
+| **CgArrows** (cg)       |                          0.029 ms |                                 0.014 ms |     52.0% reduction |
+| **HiAcademicCap** (hi)  |                          0.023 ms |                                 0.014 ms |     38.6% reduction |
+| **SiTypescript** (si)   |                          0.023 ms |                                 0.014 ms |     39.7% reduction |
+| **TiThLarge** (ti)      |                          0.023 ms |                                 0.014 ms |     40.0% reduction |
+
+* **Test details / machine:** **Lenovo Legion 5 Pro 16ACH6H** (Ryzen 7 5800H — 8 cores / 16 threads, base ≈ 3.2 GHz,
+  turbo ≈ 4.4 GHz, DDR4-3200 memory); Node.js v24.10.0.
+* Differences will vary based on icons used in your application, but they will generally be the range of 50-75%
+  reduction in render time. Larger icons will generate a larger difference.
+
+## Installation
+
+Install the plugin via npm or yarn:
+
+```bash
+npm install --save-dev react-icons-sprite
+```
+
+### 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';
+
+export default defineConfig({
+  plugins: [reactIconsSprite()],
+});
+```
+
+### Webpack
+
+Add the loader to transform modules that import 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. swc-loader or ts-loader)
+        ],
+      },
+    ],
+  },
+  plugins: [
+    reactIconsSprite({
+      // optional: fileName: 'icons.svg'
+    }),
+  ],
+};
+```
+
+### Rsbuild
+
+```ts
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { ReactIconsSpriteWebpackPlugin } from 'react-icons-sprite/webpack';
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  tools: {
+    rspack: (config, { env }) => {
+      if (env === 'production') {
+        config.plugins?.push(new ReactIconsSpriteWebpackPlugin());
+        config.module?.rules?.push({
+          test: /\.(ts|tsx|js|jsx)$/,
+          use: [
+            {
+              loader: 'react-icons-sprite/webpack/loader',
+            },
+          ],
+        });
+      }
+    },
+  },
+});
+```
+
+## How it works
+
+In **development mode**, the plugin does nothing special. Icons are rendered as they normally would from your icon
+library. This keeps hot module replacement (HMR) snappy — there’s no extra parsing of the codebase or regenerating of
+the sprite on every save. If the plugin were to build the sprite during dev, it would need to constantly scan for icon
+imports and rebuild the sheet, which is expensive and slows down iteration. So, in dev, you get the normal component
+behavior.
+
+In **build mode**, the plugin transforms your code. It parses each module, looks for imports from supported React icon
+packages, and rewrites the JSX. Instead of rendering full inline `<svg>` trees, it replaces them with
+`<ReactIconsSpriteIcon iconId="..." />`. While doing this, it collects every unique icon used across the project. After
+the bundling step, the plugin renders all those icons once to static markup and generates a single SVG file containing
+`<symbol>` definitions for each one. Finally, it rewrites your bundle to point every `<ReactIconsSpriteIcon>` at that
+spritesheet using a `<use>` tag.
+
+The result: during development you keep fast feedback loops, and in production you ship a single optimized sprite file
+with lightweight `<use>` references.
+
+### Usage with react-router framework mode
+
+`react-router`'s framework mode allows you to pre-render pages. In order for `react-icons-sprite` to work with
+pre-rendered pages, include the bellow `buildEnd` hook.
+
+```ts
+// react-router.config.ts
+import type { Config } from '@react-router/dev/config';
+import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from 'react-icons-sprite';
+
+export const replaceReactIconsSpritePlaceholdersOnPreRenderedPages: NonNullable<
+  Config['buildEnd']
+> = async ({ reactRouterConfig }) => {
+  const clientDir = resolve('build/client');
+
+  const [svgSpriteFile] = await Array.fromAsync(
+    glob('./build/client/react-icons-sprite-*.svg'),
+  );
+
+  const svgSpriteName = svgSpriteFile.replace(/build[/\\]client[/\\]?/, '/');
+
+  const preRenderedFileUrls =
+    (reactRouterConfig.prerender!.paths as string[]).map((path) => {
+      return resolve(clientDir, `.${path}`, 'index.html');
+    });
+
+  await Promise.all(
+    preRenderedFileUrls.map(async (filePath) => {
+      const content = await readFile(filePath, 'utf8');
+
+      if (!content.includes(REACT_ICONS_SPRITE_URL_PLACEHOLDER)) {
+        return;
+      }
+
+      const updatedContent = content.replaceAll(
+        REACT_ICONS_SPRITE_URL_PLACEHOLDER,
+        svgSpriteName,
+      );
+
+      await writeFile(filePath, updatedContent, 'utf8');
+    }),
+  );
+};
+
+const reactRouterConfig: Config = {
+  prerender: {
+    paths: [
+      // Your list of pages to pre-render
+    ],
+  },
+  buildEnd: async (args) => {
+    await replaceReactIconsSpritePlaceholdersOnPreRenderedPages(args);
+  },
+};
+
+export default reactRouterConfig;
+```
+
+## Contributing
+
+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.md) file for details.

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

@@ -1,4 +1,4 @@
-import { i as resolveIconImport, t as computeIconId } from "./compute-icon-id-CVIo3z9m.mjs";
+import { i as resolveIconImport, t as computeIconId } from "./compute-icon-id-Xx4G3fva.mjs";
 import { existsSync, readFileSync } from "node:fs";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
@@ -9,7 +9,7 @@ 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 = new Set([
+const OMITTED_SVG_ATTRIBUTES = /* @__PURE__ */ new Set([
 	"xmlns",
 	"viewBox",
 	"width",
@@ -74,7 +74,10 @@ const resolveFromBaseDir = (specifier, baseDir) => {
 	if (!packageRoot) return null;
 	const packageJson = JSON.parse(readFileSync(path.join(packageRoot, "package.json"), "utf8"));
 	const exportTarget = resolveExportTarget(packageJson.exports, parsed.subpath);
-	if (exportTarget) return resolveFileCandidate(path.join(packageRoot, exportTarget)) ?? null;
+	if (exportTarget) {
+		const resolved = resolveFileCandidate(path.join(packageRoot, exportTarget));
+		if (resolved) return resolved;
+	}
 	if (parsed.subpath === ".") {
 		const entry = packageJson.module ?? packageJson.main;
 		if (entry) return resolveFileCandidate(path.join(packageRoot, entry));
@@ -100,6 +103,11 @@ const pickExport = (moduleExports, exportName) => {
 	if (exportName === "default") return moduleExports.default;
 	return moduleExports[exportName] ?? moduleExports.default;
 };
+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;
@@ -111,6 +119,13 @@ const isFontAwesomeIconDefinition = (value) => {
 	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 {
@@ -119,9 +134,36 @@ const renderFontAwesomeIconDefinition = (iconDefinition) => {
 		symbolAttributes: ""
 	};
 };
+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 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 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 renderIcon = async (pack, exportName, options = {}) => {
-	const iconComponent = pickExport(await import(resolveImportSpecifier(resolveIconImport(pack, exportName), options)), exportName);
+	const importPath = resolveIconImport(pack, exportName);
+	const imported = await import(resolveImportSpecifier(importPath, options));
+	const iconComponent = unwrapNestedDefaultExport(pickExport(imported, 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];

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

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

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

@@ -41,9 +41,16 @@ const DEFAULT_ICON_SOURCES = [
 	/^@remixicon\/react$/,
 	/^devicons-react$/,
 	/^@mui\/icons-material(?:\/.*)?$/,
-	/^@carbon\/icons-react$/
+	/^@carbon\/icons-react$/,
+	/^@ant-design\/icons(?:\/.*)?$/,
+	/^@fluentui\/react-icons(?:\/svg\/[\w-]+)?$/,
+	/^@primer\/octicons-react$/,
+	/^@hugeicons\/core-free-icons(?:\/.*)?$/
 ];
 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 exactResolvers = {
 	"lucide-react": (pack, name) => `${pack}/dist/esm/icons/${kebabCase(name)}.mjs`,
 	"@radix-ui/react-icons": (pack) => `${pack}/dist/react-icons.esm.js`,
@@ -54,12 +61,20 @@ const exactResolvers = {
 	"react-feather": (pack, name) => `${pack}/dist/icons/${kebabCase(name)}.js`,
 	"grommet-icons": (pack, name) => `${pack}/icons/${name}.js`,
 	"devicons-react": (pack, name) => `${pack}/icons/${name}`,
-	"@carbon/icons-react": (pack, name) => `${pack}/es/${name}.js`
+	"@carbon/icons-react": (pack, name) => `${pack}/es/${name}.js`,
+	"@ant-design/icons": (pack, name) => `${pack}/lib/icons/${name}.js`,
+	"@fluentui/react-icons": (pack, name) => `${pack}/lib-cjs/atoms/svg/${fluentIconPathName(name)}.js`,
+	"@primer/octicons-react": (pack) => pack,
+	"@hugeicons/core-free-icons": (pack, name) => `${pack}/${name}`
 };
 const resolveIconImport = (pack, exportName) => {
 	const exactResolver = exactResolvers[pack];
 	if (exactResolver) return exactResolver(pack, exportName);
 	if (/^@mui\/icons-material(?:\/.*)?$/.test(pack)) return pack.split("/").length > 2 ? pack : `${pack}/${exportName}`;
+	if (/^@ant-design\/icons\/.+$/.test(pack)) return `@ant-design/icons/lib/icons/${exportName === "default" ? pack.split("/").at(-1) : exportName}.js`;
+	const fluentSubpath = /^@fluentui\/react-icons\/svg\/(.+)$/.exec(pack);
+	if (fluentSubpath) return `@fluentui/react-icons/lib-cjs/atoms/svg/${fluentSubpath[1]}.js`;
+	if (/^@hugeicons\/core-free-icons\/.+$/.test(pack)) return pack;
 	if (/^@heroicons\/react\/(?:\d{2})\/(?:outline|solid)$/.test(pack)) return `${pack}/${exportName}`;
 	if (/^@fortawesome\/[\w-]+-svg-icons$/.test(pack)) return `${pack}/${exportName}`;
 	return pack;

package/dist/icon.d.mts

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

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import { ReactIconsSpriteIcon } from "./icon.mjs";
-
 //#region src/index.d.ts
 declare const REACT_ICONS_SPRITE_URL_PLACEHOLDER = "__SPRITE_URL_PLACEHOLDER__";
 //#endregion

package/dist/{transform-module-CIpNj5Na.mjs → transform-module-1am5uV8-.mjs}

@@ -1,4 +1,4 @@
-import { n as normalizePackAlias, r as DEFAULT_ICON_SOURCES } from "./compute-icon-id-CVIo3z9m.mjs";
+import { n as normalizePackAlias, r as DEFAULT_ICON_SOURCES } from "./compute-icon-id-Xx4G3fva.mjs";
 import MagicString from "magic-string";
 //#region src/transform/edit-applier.ts
 const applyEdits = (code, edits) => {
@@ -52,9 +52,13 @@ const fastFilter = (code) => {
 const ICON_SOURCE = "react-icons-sprite";
 const ICON_COMPONENT_NAME = "ReactIconsSpriteIcon";
 const FONTAWESOME_REACT_PACK = "@fortawesome/react-fontawesome";
+const HUGEICONS_REACT_PACK = "@hugeicons/react";
 const isFontAwesomeIconPack = (pack) => {
 	return /^@fortawesome\/[\w-]+-svg-icons$/.test(pack);
 };
+const isHugeiconsIconPack = (pack) => {
+	return /^@hugeicons\/core-free-icons(?:\/.*)?$/.test(pack);
+};
 const sourceMatches = (source, pack) => {
 	source.lastIndex = 0;
 	return source.test(pack);
@@ -74,7 +78,8 @@ const parseNamedSpecifiers = (specifier, specifierOffset, imports) => {
 	let segmentStart = start + 1;
 	for (let index = start + 1; index <= end; index += 1) {
 		if (index !== end && specifier[index] !== ",") continue;
-		const range = trimRange(specifier.slice(segmentStart, index), specifierOffset + segmentStart);
+		const segment = specifier.slice(segmentStart, index);
+		const range = trimRange(segment, specifierOffset + segmentStart);
 		segmentStart = index + 1;
 		if (!range) continue;
 		const text = specifier.slice(range[0] - specifierOffset, range[1] - specifierOffset);
@@ -111,7 +116,8 @@ const scanImportsDetailed = (code, sources) => {
 		const specifierOffset = matchStart + statement.indexOf(specifier);
 		const specifiers = [];
 		const braceStart = specifier.indexOf("{");
-		const defaultRange = trimRange((braceStart === -1 ? specifier : specifier.slice(0, braceStart)).replace(/,$/, ""), specifierOffset);
+		const defaultText = (braceStart === -1 ? specifier : specifier.slice(0, braceStart)).replace(/,$/, "");
+		const defaultRange = trimRange(defaultText, specifierOffset);
 		if (defaultRange && !specifier.slice(defaultRange[0] - specifierOffset, defaultRange[1] - specifierOffset).startsWith("type ")) {
 			const local = specifier.slice(defaultRange[0] - specifierOffset, defaultRange[1] - specifierOffset);
 			if (local && /^[A-Za-z_$][\w$]*$/.test(local)) specifiers.push({
@@ -307,6 +313,47 @@ const scanFontAwesomeUsages = (code, symbols, componentLocals) => {
 	}
 	return usages;
 };
+const scanHugeiconsComponents = (code) => {
+	const locals = /* @__PURE__ */ new Set();
+	IMPORT_RE.lastIndex = 0;
+	for (const match of code.matchAll(IMPORT_RE)) {
+		const [, specifier, , source] = match;
+		if (source !== HUGEICONS_REACT_PACK) continue;
+		const specifiers = [];
+		parseNamedSpecifiers(specifier, match.index + match[0].indexOf(specifier), specifiers);
+		for (const item of specifiers) if (item.exportName === "HugeiconsIcon") locals.add(item.local);
+	}
+	return locals;
+};
+const scanHugeiconsUsages = (code, symbols, componentLocals) => {
+	if (!componentLocals.size) return [];
+	const names = [...componentLocals].map(escapeRegExp).join("|");
+	const tagRe = new RegExp(`<\\s*(${names})\\b`, "g");
+	const usages = [];
+	for (const match of code.matchAll(tagRe)) {
+		const componentLocal = match[1];
+		const componentStart = match.index + match[0].lastIndexOf(componentLocal);
+		const tagEnd = findJsxOpeningTagEnd(code, componentStart + componentLocal.length);
+		if (tagEnd === -1) continue;
+		const attributes = code.slice(componentStart + componentLocal.length, tagEnd);
+		const iconMatch = /\sicon\s*=\s*\{\s*([A-Za-z_$][\w$]*)\s*\}/.exec(attributes);
+		if (!iconMatch || iconMatch.index === void 0) continue;
+		const symbol = symbols.items[iconMatch[1]];
+		if (!symbol || !isHugeiconsIconPack(symbol.pack)) continue;
+		const attributeStart = componentStart + componentLocal.length + iconMatch.index;
+		usages.push({
+			componentLocal,
+			componentRange: [componentStart, componentStart + componentLocal.length],
+			iconAttributeRange: [attributeStart, attributeStart + iconMatch[0].length],
+			iconLocal: iconMatch[1],
+			pack: symbol.pack,
+			exportName: symbol.exportName,
+			iconId: symbol.iconId,
+			hasIconId: /\biconId\s*=/.test(attributes)
+		});
+	}
+	return usages;
+};
 const cleanupScannedImports = (code, imports, usedLocals) => {
 	const edits = [];
 	for (const item of imports) {
@@ -360,6 +407,35 @@ const cleanupScannedFontAwesomeComponentImports = (code, usedLocals) => {
 	}
 	return edits;
 };
+const cleanupScannedHugeiconsComponentImports = (code, usedLocals) => {
+	const edits = [];
+	IMPORT_RE.lastIndex = 0;
+	for (const match of code.matchAll(IMPORT_RE)) {
+		const [statement, specifier, , source] = match;
+		if (source !== HUGEICONS_REACT_PACK) continue;
+		const specifiers = [];
+		parseNamedSpecifiers(specifier, match.index + statement.indexOf(specifier), specifiers);
+		const removableSpecifiers = specifiers.filter((item) => item.exportName === "HugeiconsIcon" && usedLocals.has(item.local));
+		if (!removableSpecifiers.length) continue;
+		if (removableSpecifiers.length === specifiers.length) {
+			edits.push({
+				type: "remove",
+				from: match.index,
+				to: extendToLineEnd(code, match.index + statement.length)
+			});
+			continue;
+		}
+		for (const specifier of removableSpecifiers) {
+			const [from, to] = specifierRemovalRange(code, specifier.range);
+			edits.push({
+				type: "remove",
+				from,
+				to
+			});
+		}
+	}
+	return edits;
+};
 const extendToLineEnd = (code, end) => {
 	let to = end;
 	while (to < code.length) {
@@ -404,6 +480,7 @@ const transformModule = (code, id, register, sources = DEFAULT_ICON_SOURCES, opt
 		anyReplacements: false
 	};
 	const hasPotentialFontAwesomeUsage = code.includes(FONTAWESOME_REACT_PACK) && scannedImports.some((item) => isFontAwesomeIconPack(item.pack));
+	const hasPotentialHugeiconsUsage = code.includes(HUGEICONS_REACT_PACK) && scannedImports.some((item) => isHugeiconsIconPack(item.pack));
 	const table = buildScannedSymbolTable(scannedImports);
 	if (!table.size) return {
 		code,
@@ -416,9 +493,11 @@ const transformModule = (code, id, register, sources = DEFAULT_ICON_SOURCES, opt
 	};
 	const used = /* @__PURE__ */ new Set();
 	const usedFontAwesomeComponents = /* @__PURE__ */ new Set();
+	const usedHugeiconsComponents = /* @__PURE__ */ new Set();
 	const jsxScan = scanJsxIconEdits(code, table, spriteIconImport.localName, used, register, code.includes("iconId"));
 	const fontAwesomeUsages = hasPotentialFontAwesomeUsage ? scanFontAwesomeUsages(code, table, scanFontAwesomeComponents(code)) : [];
-	if (jsxScan.count === 0 && !fontAwesomeUsages.length) return {
+	const hugeiconsUsages = hasPotentialHugeiconsUsage ? scanHugeiconsUsages(code, table, scanHugeiconsComponents(code)) : [];
+	if (jsxScan.count === 0 && !fontAwesomeUsages.length && !hugeiconsUsages.length) return {
 		code,
 		map: null,
 		anyReplacements: false
@@ -450,13 +529,41 @@ const transformModule = (code, id, register, sources = DEFAULT_ICON_SOURCES, opt
 			register(usage.pack, usage.exportName);
 		}
 	}
+	const registeredHugeiconsIcons = /* @__PURE__ */ new Set();
+	for (const usage of hugeiconsUsages) {
+		edits.push({
+			type: "replace",
+			from: usage.componentRange[0],
+			to: usage.componentRange[1],
+			value: spriteIconImport.localName
+		});
+		if (!usage.hasIconId) edits.push({
+			type: "insert",
+			pos: usage.componentRange[1],
+			value: ` iconId="${usage.iconId}"`
+		});
+		edits.push({
+			type: "remove",
+			from: usage.iconAttributeRange[0],
+			to: consumeTrailingWhitespace(code, usage.iconAttributeRange[1])
+		});
+		used.add(usage.iconLocal);
+		usedHugeiconsComponents.add(usage.componentLocal);
+		const key = `${usage.pack}:${usage.exportName}`;
+		if (!registeredHugeiconsIcons.has(key)) {
+			registeredHugeiconsIcons.add(key);
+			register(usage.pack, usage.exportName);
+		}
+	}
 	const cleanupEdits = cleanupScannedImports(code, scannedImports, used);
 	const cleanupFontAwesomeEdits = usedFontAwesomeComponents.size ? cleanupScannedFontAwesomeComponentImports(code, usedFontAwesomeComponents) : [];
-	const canUsePresortedEdits = cleanupFontAwesomeEdits.length === 0;
+	const cleanupHugeiconsEdits = usedHugeiconsComponents.size ? cleanupScannedHugeiconsComponentImports(code, usedHugeiconsComponents) : [];
+	const canUsePresortedEdits = cleanupFontAwesomeEdits.length === 0 && cleanupHugeiconsEdits.length === 0;
 	const allEdits = canUsePresortedEdits ? [...cleanupEdits, ...edits] : [
 		...edits,
 		...cleanupEdits,
-		...cleanupFontAwesomeEdits
+		...cleanupFontAwesomeEdits,
+		...cleanupHugeiconsEdits
 	];
 	const importPrefix = `import { ${ICON_COMPONENT_NAME} } from "${ICON_SOURCE}";\n`;
 	if (!sourceMap) return {

package/dist/vite/plugin.d.mts

@@ -1,5 +1,4 @@
 import { Plugin } from "vite";
-
 //#region src/vite/plugin.d.ts
 type ReactIconsSpriteVitePluginOptions = {
   /**

package/dist/vite/plugin.mjs

@@ -1,7 +1,7 @@
 import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from "../index.mjs";
-import { a as createCollector, r as DEFAULT_ICON_SOURCES } from "../compute-icon-id-CVIo3z9m.mjs";
-import { t as buildSprite } from "../build-sprite-DgeWMz2D.mjs";
-import { t as transformModule } from "../transform-module-CIpNj5Na.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-1am5uV8-.mjs";
 import { createHash } from "node:crypto";
 //#region src/vite/plugin.ts
 const reactIconsSprite = (options = {}) => {

package/dist/webpack/loader.d.mts

@@ -1,5 +1,4 @@
 import { LoaderDefinitionFunction } from "webpack";
-
 //#region src/webpack/loader.d.ts
 declare const reactIconsSpriteLoader: LoaderDefinitionFunction;
 //#endregion

package/dist/webpack/loader.mjs

@@ -1,5 +1,5 @@
-import { t as transformModule } from "../transform-module-CIpNj5Na.mjs";
-import { t as collector } from "../collector-DxE_zcTH.mjs";
+import { t as transformModule } from "../transform-module-1am5uV8-.mjs";
+import { t as collector } from "../collector-CBRz9R_h.mjs";
 //#region src/webpack/loader.ts
 const reactIconsSpriteLoader = async function(source) {
 	if (this.mode === "development") return source;

package/dist/webpack/plugin.d.mts

@@ -1,5 +1,4 @@
 import { Compiler } from "webpack";
-
 //#region src/webpack/plugin.d.ts
 type ReactIconsSpriteWebpackPluginOptions = {
   /**

package/dist/webpack/plugin.mjs

@@ -1,6 +1,6 @@
 import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from "../index.mjs";
-import { t as buildSprite } from "../build-sprite-DgeWMz2D.mjs";
-import { t as collector } from "../collector-DxE_zcTH.mjs";
+import { t as buildSprite } from "../build-sprite-CxqvU2LE.mjs";
+import { t as collector } from "../collector-CBRz9R_h.mjs";
 import { createHash } from "node:crypto";
 //#region src/webpack/plugin.ts
 var ReactIconsSpriteWebpackPlugin = class {

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "react-icons-sprite",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "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>",
@@ -46,7 +46,9 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md",
+    "LICENSE.md"
   ],
   "scripts": {
     "build": "tsdown",
@@ -55,12 +57,33 @@
     "format:check": "biome format --no-errors-on-unmatched",
     "lint": "biome lint --write  --no-errors-on-unmatched",
     "lint:check": "biome lint  --no-errors-on-unmatched",
-    "type-check": "tsgo",
+    "type-check": "tsc",
     "test": "vitest",
     "prepublishOnly": "npm run build",
     "release": "npm publish --access public"
   },
   "peerDependencies": {
+    "@ant-design/icons": ">=6",
+    "@carbon/icons-react": ">=11",
+    "@fluentui/react-icons": ">=2",
+    "@fortawesome/free-solid-svg-icons": ">=7",
+    "@fortawesome/react-fontawesome": ">=3",
+    "@heroicons/react": ">=2",
+    "@hugeicons/core-free-icons": ">=4",
+    "@hugeicons/react": ">=1",
+    "@mui/icons-material": ">=9",
+    "@phosphor-icons/react": ">=2",
+    "@primer/octicons-react": ">=19",
+    "@radix-ui/react-icons": ">=1",
+    "@remixicon/react": ">=4",
+    "@tabler/icons-react": ">=3",
+    "devicons-react": ">=1",
+    "grommet-icons": ">=4",
+    "lucide-react": ">=1",
+    "phosphor-react": ">=1",
+    "react-bootstrap-icons": ">=1",
+    "react-feather": ">=2",
+    "react-icons": ">=5",
     "react": ">= 16",
     "react-dom": ">= 16"
   },
@@ -68,17 +91,15 @@
     "magic-string": "0.30.21"
   },
   "devDependencies": {
-    "@carbon/icons-react": "11.81.0",
-    "@types/node": "25.9.1",
+    "@types/node": "26.1.1",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260522.1",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
-    "tsdown": "0.22.0",
-    "typescript": "6.0.3",
-    "vite": "8.0.14",
-    "vitest": "4.1.7",
-    "webpack": "5.107.1"
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "tsdown": "0.22.7",
+    "typescript": "7.0.2",
+    "vite": "8.1.4",
+    "vitest": "4.1.10",
+    "webpack": "5.108.4"
   },
   "keywords": [
     "vite",
@@ -106,11 +127,81 @@
     "@fortawesome/free-solid-svg-icons",
     "@mui/icons-material",
     "@carbon/icons-react",
+    "@ant-design/icons",
+    "@fluentui/react-icons",
+    "@primer/octicons-react",
+    "@hugeicons/react",
+    "@hugeicons/core-free-icons",
     "react",
     "icons",
     "svg",
     "svg-sprite",
     "spritesheet",
     "icon-sprite"
-  ]
+  ],
+  "peerDependenciesMeta": {
+    "@ant-design/icons": {
+      "optional": true
+    },
+    "@carbon/icons-react": {
+      "optional": true
+    },
+    "@fluentui/react-icons": {
+      "optional": true
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "optional": true
+    },
+    "@fortawesome/react-fontawesome": {
+      "optional": true
+    },
+    "@heroicons/react": {
+      "optional": true
+    },
+    "@hugeicons/core-free-icons": {
+      "optional": true
+    },
+    "@hugeicons/react": {
+      "optional": true
+    },
+    "@mui/icons-material": {
+      "optional": true
+    },
+    "@phosphor-icons/react": {
+      "optional": true
+    },
+    "@primer/octicons-react": {
+      "optional": true
+    },
+    "@radix-ui/react-icons": {
+      "optional": true
+    },
+    "@remixicon/react": {
+      "optional": true
+    },
+    "@tabler/icons-react": {
+      "optional": true
+    },
+    "devicons-react": {
+      "optional": true
+    },
+    "grommet-icons": {
+      "optional": true
+    },
+    "lucide-react": {
+      "optional": true
+    },
+    "phosphor-react": {
+      "optional": true
+    },
+    "react-bootstrap-icons": {
+      "optional": true
+    },
+    "react-feather": {
+      "optional": true
+    },
+    "react-icons": {
+      "optional": true
+    }
+  }
 }