react-icons-sprite 0.7.0 → 0.7.1

package/README.md

@@ -18,13 +18,14 @@ Out of the box, imports from the following libraries are detected and transforme
 - `react-feather`
 - `react-bootstrap-icons`
 - `grommet-icons`
-- `remixicon-react`
 - `@remixicon/react`
 - `devicons-react`
 - `@fortawesome/free-solid-svg-icons` (and other Font Awesome icon packs)
 - `@fortawesome/react-fontawesome`
 - `@mui/icons-material`
-- `@iconscout/react-unicons`
+
+> [!NOTE]
+> `react-icons-sprite` does not bundle these libraries. You must install whichever icon packages you intend to use in your project.
 
 ## Motivation
 

package/dist/collector-BCsSIe1N.mjs

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

package/dist/{core-TIimc90M.mjs → core-Di2t0EYk.mjs}

@@ -21,12 +21,11 @@ const DEFAULT_ICON_SOURCES = [
 	/^react-feather$/,
 	/^react-bootstrap-icons$/,
 	/^grommet-icons$/,
-	/^remixicon-react$/,
 	/^@remixicon\/react$/,
 	/^devicons-react$/,
 	/^@fortawesome\/react-fontawesome$/,
 	/^@fortawesome\/[\w-]+-svg-icons$/,
-	/^@mui\/icons-material$/,
+	/^@mui\/icons-material(?:\/.*)?$/,
 	/^@iconscout\/react-unicons$/
 ];
 const sourceMatchesSupported = (source, sources = DEFAULT_ICON_SOURCES) => sources.some((re) => re.test(source));
@@ -56,6 +55,15 @@ const collectIconImports = (ast, sources = DEFAULT_ICON_SOURCES) => {
 				decl: node,
 				spec
 			});
+		} else if (t.isImportDefaultSpecifier(spec) && t.isIdentifier(spec.local)) {
+			const exportName = "default";
+			const localName = spec.local.name;
+			map.set(localName, {
+				pack,
+				exportName,
+				decl: node,
+				spec
+			});
 		}
 	}
 	return map;
@@ -88,14 +96,31 @@ const replaceJsxWithSprite = (ast, localNameToImport, iconLocalName, register) =
 			const meta = localNameToImport.get(local);
 			if (!meta) return;
 			if (isAlreadyIcon(name)) return;
+			let iconPack = meta.pack;
+			let iconExport = meta.exportName;
+			let usedLocal = local;
+			if (meta.pack === "@fortawesome/react-fontawesome" && meta.exportName === "FontAwesomeIcon") {
+				const iconAttr = path.node.attributes.find((a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "icon" }));
+				if (iconAttr && t.isJSXExpressionContainer(iconAttr.value) && t.isIdentifier(iconAttr.value.expression)) {
+					const iconLocalName = iconAttr.value.expression.name;
+					const iconMeta = localNameToImport.get(iconLocalName);
+					if (iconMeta) {
+						iconPack = iconMeta.pack;
+						iconExport = iconMeta.exportName;
+						usedLocal = iconLocalName;
+						path.node.attributes = path.node.attributes.filter((a) => a !== iconAttr);
+					}
+				}
+			}
 			path.node.name = t.jSXIdentifier(iconLocalName);
 			if (!path.node.attributes.some((a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "iconId" }))) {
-				const idValue = computeIconId(meta.pack, meta.exportName);
+				const idValue = computeIconId(iconPack, iconExport);
 				path.node.attributes.unshift(t.jSXAttribute(t.jSXIdentifier("iconId"), t.stringLiteral(idValue)));
 			}
 			usedLocalNames.add(local);
+			if (usedLocal !== local) usedLocalNames.add(usedLocal);
 			anyReplacements = true;
-			register(meta.pack, meta.exportName);
+			register(iconPack, iconExport);
 		},
 		JSXClosingElement(path) {
 			const name = path.node.name;
@@ -118,8 +143,8 @@ const insertIconImport = (ast, iconLocalName = ICON_COMPONENT_NAME) => {
 };
 const pruneUsedSpecifiers = (ast, localNameToImport, usedLocalNames) => {
 	for (const { decl } of new Set([...localNameToImport.values()])) decl.specifiers = decl.specifiers.filter((s) => {
-		if (!t.isImportSpecifier(s) || !t.isIdentifier(s.local)) return true;
-		return !usedLocalNames.has(s.local.name);
+		if ((t.isImportSpecifier(s) || t.isImportDefaultSpecifier(s)) && t.isIdentifier(s.local)) return !usedLocalNames.has(s.local.name);
+		return true;
 	});
 	ast.program.body = ast.program.body.filter((n) => !t.isImportDeclaration(n) || n.specifiers.length > 0);
 };
@@ -173,14 +198,56 @@ const PRESENTATION_ATTRS = new Set([
 	"vector-effect"
 ]);
 const ATTR_RE = /([a-zA-Z_:.-]+)\s*=\s*"([^"]*)"/g;
+const toKebab = (s) => s.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+const resolveSpecificImportPath = (pack, exportName) => {
+	if (/^@mui\/icons-material(?:\/.*)?$/.test(pack)) {
+		if (pack.split("/").length > 2) return pack;
+		return `${pack}/${exportName}`;
+	}
+	if (/^@radix-ui\/react-icons$/.test(pack)) return `${pack}/${exportName}`;
+	if (/^@heroicons\/react\/(?:\d{2})\/(?:outline|solid)$/.test(pack)) return `${pack}/${exportName}`;
+	if (/^@fortawesome\/[\w-]+-svg-icons$/.test(pack)) return `${pack}/${exportName}`;
+	if (/^lucide-react$/.test(pack)) return `${pack}/icons/${toKebab(exportName)}`;
+	if (/^@phosphor-icons\/react$/.test(pack)) return `${pack}/dist/ssr/${exportName}.es.js`;
+	if (/^phosphor-react$/.test(pack)) return `${pack}/dist/icons/${exportName}.esm.js`;
+	if (/^@tabler\/icons-react$/.test(pack)) return `${pack}/dist/esm/icons/${exportName}.mjs`;
+	if (/^react-feather$/.test(pack)) return `${pack}/dist/icons/${toKebab(exportName)}`;
+	if (/^react-bootstrap-icons$/.test(pack)) return `${pack}/dist/icons/${toKebab(exportName)}`;
+	return null;
+};
 const renderOneIcon = async (pack, exportName) => {
-	const Comp = (await import(
+	let mod;
+	const specificPath = resolveSpecificImportPath(pack, exportName);
+	if (specificPath) try {
+		mod = await import(
+			/* @vite-ignore */
+			specificPath
+);
+		if (mod && "default" in mod && Object.keys(mod).length === 1) mod[exportName] = mod.default;
+	} catch {
+		mod = await import(
+			/* @vite-ignore */
+			pack
+);
+	}
+	else mod = await import(
 		/* @vite-ignore */
 		pack
-))[exportName];
+);
+	let Comp = mod[exportName] ?? mod.default;
+	if (pack.includes("fortawesome") && Comp && typeof Comp === "object" && "icon" in Comp && Array.isArray(Comp.icon)) {
+		const [width, height, , , pathData] = Comp.icon;
+		const viewBox = `0 0 ${width} ${height}`;
+		const id = computeIconId(pack, exportName);
+		return {
+			id,
+			symbol: `<symbol id="${id}" viewBox="${viewBox}">${(Array.isArray(pathData) ? pathData : [pathData]).map((d) => `<path d="${d}" />`).join("")}</symbol>`
+		};
+	}
+	if (Comp && typeof Comp === "object" && "default" in Comp && !("$$typeof" in Comp)) Comp = Comp.default;
 	if (!Comp) throw new Error(`Icon export not found: ${pack} -> ${exportName}`);
 	const id = computeIconId(pack, exportName);
-	const html = renderToStaticMarkup(createElement(Comp));
+	const html = renderToStaticMarkup(createElement(Comp, {}));
 	const viewBox = html.match(/viewBox="([^"]+)"/i)?.[1] ?? "0 0 24 24";
 	const svgAttrsRaw = html.match(/^<svg\b([^>]*)>/i)?.[1] ?? "";
 	const attrs = [];
@@ -188,7 +255,7 @@ const renderOneIcon = async (pack, exportName) => {
 		const key = k.toLowerCase();
 		if (PRESENTATION_ATTRS.has(key)) attrs.push(`${key}="${v}"`);
 	}
-	const inner = html.replace(/^<svg[^>]*>/i, "").replace(/<\/svg>\s*$/i, "");
+	const inner = html.replace(/^<svg[^>]*>/i, "").replace(/<\/svg>\s*$/i, "").replace(/<svg[^>]*>/gi, "").replace(/<\/svg>/gi, "");
 	return {
 		id,
 		symbol: `<symbol id="${id}" viewBox="${viewBox}"${attrs.length ? ` ${attrs.join(" ")}` : ""}>${inner}</symbol>`

package/dist/icon.mjs

@@ -1,3 +1,17 @@
-import { t as ReactIconsSpriteIcon } from "./icon-DB53krat.mjs";
+import { jsx } from "react/jsx-runtime";
 
+//#region src/icon.tsx
+const ReactIconsSpriteIcon = ({ iconId, ...rest }) => {
+	const iconHref = `__SPRITE_URL_PLACEHOLDER__#${iconId}`;
+	return /* @__PURE__ */ jsx("svg", {
+		height: "1em",
+		width: "1em",
+		preserveAspectRatio: "xMidYMid meet",
+		viewBox: "0 0 24 24",
+		...rest,
+		children: /* @__PURE__ */ jsx("use", { href: iconHref })
+	});
+};
+
+//#endregion
 export { ReactIconsSpriteIcon };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { t as ReactIconsSpriteIcon } from "./icon-DB53krat.mjs";
+import { ReactIconsSpriteIcon } from "./icon.mjs";
 
 //#region src/index.ts
 const REACT_ICONS_SPRITE_URL_PLACEHOLDER = "__SPRITE_URL_PLACEHOLDER__";

package/dist/vite/plugin.mjs

@@ -1,5 +1,5 @@
 import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from "../index.mjs";
-import { i as transformModule, n as buildSprite, r as createCollector, t as DEFAULT_ICON_SOURCES } from "../core-TIimc90M.mjs";
+import { i as transformModule, n as buildSprite, r as createCollector, t as DEFAULT_ICON_SOURCES } from "../core-Di2t0EYk.mjs";
 import { createHash } from "node:crypto";
 
 //#region src/vite/plugin.ts

package/dist/webpack/loader.mjs

@@ -1,5 +1,5 @@
-import { i as transformModule } from "../core-TIimc90M.mjs";
-import { t as collector } from "../collector-BbjpnJS-.mjs";
+import { i as transformModule } from "../core-Di2t0EYk.mjs";
+import { t as collector } from "../collector-BCsSIe1N.mjs";
 
 //#region src/webpack/loader.ts
 const reactIconsSpriteLoader = async function(source) {
@@ -16,7 +16,6 @@ const reactIconsSpriteLoader = async function(source) {
 		return source;
 	}
 };
-var loader_default = reactIconsSpriteLoader;
 
 //#endregion
-export { loader_default as default };
+export { reactIconsSpriteLoader as default };

package/dist/webpack/plugin.d.mts

@@ -1,4 +1,4 @@
-import { Compiler, WebpackPluginInstance } from "webpack";
+import { Compiler } from "webpack";
 
 //#region src/webpack/plugin.d.ts
 type ReactIconsSpriteWebpackPluginOptions = {
@@ -9,7 +9,7 @@ type ReactIconsSpriteWebpackPluginOptions = {
    */
   fileName?: string;
 };
-declare class ReactIconsSpriteWebpackPlugin implements WebpackPluginInstance {
+declare class ReactIconsSpriteWebpackPlugin {
   private readonly fileName?;
   constructor(options?: ReactIconsSpriteWebpackPluginOptions);
   apply(compiler: Compiler): void;

package/dist/webpack/plugin.mjs

@@ -1,6 +1,6 @@
 import { REACT_ICONS_SPRITE_URL_PLACEHOLDER } from "../index.mjs";
-import { n as buildSprite } from "../core-TIimc90M.mjs";
-import { t as collector } from "../collector-BbjpnJS-.mjs";
+import { n as buildSprite } from "../core-Di2t0EYk.mjs";
+import { t as collector } from "../collector-BCsSIe1N.mjs";
 import { createHash } from "node:crypto";
 
 //#region src/webpack/plugin.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-icons-sprite",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "type": "module",
   "license": "MIT",
   "description": "",
@@ -47,10 +47,10 @@
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "format": "biome format --no-errors-on-unmatched",
-    "format:fix": "biome format --write --no-errors-on-unmatched",
-    "lint": "biome lint  --no-errors-on-unmatched",
-    "lint:fix": "biome lint --write  --no-errors-on-unmatched",
+    "format:check": "biome format --no-errors-on-unmatched",
+    "format": "biome format --write --no-errors-on-unmatched",
+    "lint:check": "biome lint  --no-errors-on-unmatched",
+    "lint": "biome lint --write  --no-errors-on-unmatched",
     "type-check": "tsgo",
     "test": "vitest run",
     "prepublishOnly": "npm run build",
@@ -58,28 +58,46 @@
   },
   "peerDependencies": {
     "react": ">= 16",
-    "react-dom": ">= 16",
-    "react-icons": ">= 5"
+    "react-dom": ">= 16"
+  },
+  "dependencies": {
+    "@babel/generator": "7.29.1",
+    "@babel/parser": "7.29.0",
+    "@babel/traverse": "7.29.0",
+    "@babel/types": "7.29.0"
   },
   "devDependencies": {
-    "@babel/generator": "7.28.6",
-    "@babel/parser": "7.28.6",
-    "@babel/traverse": "7.28.6",
-    "@babel/types": "7.28.6",
-    "@biomejs/biome": "2.3.13",
+    "@biomejs/biome": "2.3.14",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@fortawesome/free-solid-svg-icons": "7.2.0",
+    "@fortawesome/react-fontawesome": "3.2.0",
+    "@heroicons/react": "2.2.0",
+    "@iconscout/react-unicons": "2.2.5",
+    "@mui/icons-material": "7.3.7",
+    "@phosphor-icons/react": "2.1.10",
+    "@radix-ui/react-icons": "1.3.2",
+    "@remixicon/react": "4.9.0",
+    "@tabler/icons-react": "3.36.1",
     "@types/babel__generator": "7.27.0",
     "@types/babel__traverse": "7.28.0",
-    "@types/node": "25.0.10",
+    "@types/node": "25.2.3",
     "@types/react-dom": "19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260127.1",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
+    "@typescript/native-preview": "7.0.0-dev.20260211.1",
+    "devicons-react": "1.5.0",
+    "grommet-icons": "4.14.0",
+    "lucide-react": "0.563.0",
+    "phosphor-react": "1.4.1",
+    "react": "19.2.4",
+    "react-bootstrap-icons": "1.11.6",
+    "react-dom": "19.2.4",
+    "react-feather": "2.0.10",
     "react-icons": "5.5.0",
-    "tsdown": "0.20.1",
+    "tsdown": "0.20.3",
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vitest": "4.0.18",
-    "webpack": "5.104.1"
+    "webpack": "5.105.1"
   },
   "keywords": [
     "vite",

package/dist/collector-BbjpnJS-.mjs

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

package/dist/icon-DB53krat.mjs

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-
-//#region src/icon.tsx
-const ReactIconsSpriteIcon = ({ iconId, ...rest }) => {
-	const iconHref = `__SPRITE_URL_PLACEHOLDER__#${iconId}`;
-	return /* @__PURE__ */ jsx("svg", {
-		height: "1em",
-		width: "1em",
-		preserveAspectRatio: "xMidYMid meet",
-		viewBox: "0 0 24 24",
-		...rest,
-		children: /* @__PURE__ */ jsx("use", { href: iconHref })
-	});
-};
-
-//#endregion
-export { ReactIconsSpriteIcon as t };