react-icons-sprite 1.3.0 → 1.4.0-rc1

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "react-icons-sprite",
-  "version": "1.3.0",
+  "version": "1.4.0-rc1",
   "type": "module",
   "description": "A lightweight Vite, Rsbuild and Webpack plugin for popular icon libraries that builds a single SVG sprite and rewrites icons to <use>, reducing bundle size and runtime overhead.",
   "author": "Jure Rotar <hello@jurerotar.com>",
@@ -22,6 +22,9 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.mts",
   "sideEffects": false,
+  "engines": {
+    "node": ">=22.12.0"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
@@ -63,43 +66,53 @@
     "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",
+    "@ant-design/icons": ">=4",
+    "@carbon/icons-react": ">=10.4",
+    "@fluentui/react-icons": ">=0.1.1",
+    "@fortawesome/free-solid-svg-icons": ">=5.1.0-0",
+    "@fortawesome/react-fontawesome": ">=0.1",
+    "@heroicons/react": ">=0.1 || >=2.0.0-0",
+    "@hugeicons/core-free-icons": ">=1",
     "@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",
+    "@mui/icons-material": ">=5.0.0-0",
+    "@phosphor-icons/react": ">=2.0.3 || >=2.1.8-rc.0",
+    "@primer/octicons-react": ">=10",
+    "@radix-ui/react-icons": ">=1 || >=2.0.0-0",
+    "@remixicon/react": ">=0.0.2",
+    "@tabler/icons-react": ">=2.0.0-0 || >=3.0.0-beta.2",
+    "devicons-react": ">=0.1 || >=1.2.3-canary-0.0.1",
+    "grommet-icons": ">=0.1",
+    "lucide-react": ">=0.0.0-0",
+    "phosphor-react": ">=0.1",
     "react": ">= 16",
-    "react-dom": ">= 16"
+    "react-bootstrap-icons": ">=1.0.0-0",
+    "react-dom": ">= 16",
+    "react-feather": ">=1.0.2 <1.0.9 || >=1.1.0",
+    "react-icons": ">=3"
   },
   "dependencies": {
-    "magic-string": "1.2.2"
+    "magic-string": "1.4.3",
+    "oxc-parser": "0.154.0",
+    "semver": "7.8.5"
   },
   "devDependencies": {
-    "@types/node": "26.2.0",
-    "@types/react-dom": "19.2.4",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "tsdown": "0.22.14",
+    "@ant-design/icons": "6.3.4",
+    "@babel/parser": "8.0.7",
+    "@biomejs/biome": "2.5.15",
+    "@hugeicons/core-free-icons": "4.3.5",
+    "@pillage-first/graphics": "0.4.0-rc8",
+    "@types/node": "26.6.4",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@types/semver": "7.8.0",
+    "lucide-react": "1.53.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "tsdown": "0.23.1",
     "typescript": "7.0.2",
-    "vite": "8.2.2",
-    "vitest": "4.1.11",
-    "webpack": "5.109.2"
+    "vite": "8.3.4",
+    "vitest": "5.0.4",
+    "webpack": "5.111.1"
   },
   "keywords": [
     "vite",

package/dist/build-sprite-Dci5SlWn.mjs

@@ -1,217 +0,0 @@
-import { o as resolveIconImport, t as computeIconId } from "./compute-icon-id-1Gop_fRM.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";
-//#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"
-]);
-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) => {
-	let current = path.resolve(baseDir);
-	while (true) {
-		const candidate = path.join(current, "node_modules", packageName);
-		if (existsSync(path.join(candidate, "package.json"))) return candidate;
-		const parent = path.dirname(current);
-		if (parent === current) 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 resolveFromBaseDir = (specifier, baseDir) => {
-	const parsed = parsePackageSpecifier(specifier);
-	if (!parsed) return null;
-	const packageRoot = findPackageRoot(parsed.packageName, 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) {
-		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));
-	}
-	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;
-};
-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;
-	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;
-	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 renderIcon = async (pack, exportName, options = {}) => {
-	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);
-	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)
-	};
-};
-//#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>";
-	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/compute-icon-id-1Gop_fRM.mjs

@@ -1,113 +0,0 @@
-//#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/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/packs/icon-resolvers.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$/
-];
-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 exactResolvers = {
-	"lucide-react": (pack, name) => `${pack}/dist/esm/icons/${kebabCase(name)}.mjs`,
-	"@radix-ui/react-icons": (pack) => `${pack}/dist/react-icons.esm.js`,
-	"@tabler/icons-react": (pack, name) => `${pack}/dist/esm/icons/${name}.mjs`,
-	"@phosphor-icons/react": (pack, name) => `${pack}/dist/ssr/${phosphorIconPathName(name)}`,
-	"phosphor-react": (pack, name) => `${pack}/dist/icons/${name}.esm.js`,
-	"react-bootstrap-icons": (pack, name) => `${pack}/dist/icons/${kebabCase(name)}.js`,
-	"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`,
-	"@ant-design/icons": (pack, name) => `${pack}/lib/icons/${name}.js`,
-	"@fluentui/react-icons": (pack, name) => `${pack}/lib/atoms/svg/${fluentIconPathName(name)}`,
-	"@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/atoms/svg/${fluentSubpath[1]}`;
-	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;
-};
-//#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(/^@/, ""));
-};
-const computeIconId = (pack, iconName) => {
-	return `ri-${normalizePackAlias(pack)}-${iconName}`;
-};
-//#endregion
-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

@@ -1,9 +0,0 @@
-//#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 };