@cssints/icons 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexei Accio
+
+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

@@ -1,3 +1,25 @@
-# Temporary Holding Version
+# @cssints/icons
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Icons for [cssints](../../README.md): a scope() style with a mask kernel and one class per icon, from an iconify JSON collection
+(`@iconify-json/*`) or a folder of SVG files. No runtime. The API is in [docs/API.md](../../docs/API.md#icons-cssintsicons-decided-2026-10-02-cssints-1x1o).
+
+```ts
+import { icons } from "@cssints/icons" with { type: "cssints" };
+
+export const mdi = icons<typeof import("@iconify-json/mdi/icons.json")>({
+  provider: "iconify-json",
+  collection: "mdi",
+});
+// in a component: cn(mdi("home"), color("crimson"))
+```
+
+```bash
+cd packages/icons && bun run test   # fixtures through the engine, and the type test
+```
+
+## Credits
+
+Icons come from [Iconify](https://iconify.design) data: `@iconify/utils` (MIT, Vjacheslav Trushkin) does the parsing.
+The collections (`@iconify-json/*`) are your dependency and are not shipped with this package. Each collection has its
+own license (in its package, `info.license`: Material Design Icons is Apache-2.0, Phosphor is MIT), and the CSS that
+`icons()` prints holds the icons you use: keep the notice that your collection asks for.

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import { Style } from "cssints/plugin";
+//#region src/index.d.ts
+/** An iconify JSON collection as TypeScript sees it: `typeof import("@iconify-json/mdi/icons.json")`. */
+export interface Collection {
+  icons: Record<string, unknown>;
+  aliases?: Record<string, unknown>;
+}
+/** The names of a collection: its icons and its aliases. `string` when the collection is not given. */
+export type IconName<C extends Collection> = (keyof C["icons"] | keyof NonNullable<C["aliases"]>) & string;
+/** `icons(...)` gives this: call it with a name where the style is used (`cn(mdi("home"), ...)`). */
+export type Icons<N extends string> = (name: N) => Style;
+/** Where the icons come from: the `@iconify-json/<collection>` package, or the `.svg` files of a directory. */
+export type Options = {
+  provider: "iconify-json";
+  collection: string;
+} | {
+  provider: "fs";
+  dir: string;
+};
+/**
+ * Icons from the `@iconify-json/<collection>` package installed in the project (read from `node_modules` when the
+ * module runs; the project is the working directory), or from the `.svg` files of a directory (relative to the working
+ * directory, named without the extension). Say which collection in the type argument to have the names checked as you
+ * type: `icons<typeof import("@iconify-json/mdi/icons.json")>({ provider: "iconify-json", collection: "mdi" })`. A name
+ * that does not exist is a build error that suggests the nearest one.
+ *
+ * One scope, "icons", whatever the collection: its kernels are the same, and `build` is the same code, which the engine
+ * takes as one definition however many times `icons()` runs.
+ *
+ * @param {Options} options where the icons come from
+ * @returns {Icons<IconName<C>>} a function of the icon name: a style for `cn()`
+ */
+export declare const icons: <C extends Collection = Collection>(options: Options) => Icons<IconName<C>>;
+//#endregion

package/dist/index.mjs

@@ -0,0 +1,118 @@
+import { createRequire } from "node:module";
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { convertParsedSVG, getIconData, iconToHTML, iconToSVG, parseSVGContent, svgToURL } from "@iconify/utils";
+import { arg, dependsOn, scope } from "cssints/plugin";
+//#region src/index.ts
+const box = "display:inline-block;width:1em;height:1em";
+const mask = { css: `&{${box};background-color:currentColor;mask:var(--_svg) no-repeat center/100% 100%}` };
+const image = { css: `&{${box};background:var(--_svg) no-repeat center/100% 100%}` };
+const distance = (a, b) => {
+	let row = Array.from({ length: b.length + 1 }, (_, j) => j);
+	for (let i = 1; i <= a.length; i++) {
+		const next = [i];
+		for (let j = 1; j <= b.length; j++) next[j] = Math.min(row[j] + 1, next[j - 1] + 1, row[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+		row = next;
+	}
+	return row[b.length];
+};
+const nearest = (name, names) => {
+	const near = Math.max(2, name.length >> 1);
+	let best;
+	let least = near + 1;
+	for (const n of names) {
+		const d = distance(name, n);
+		if (d < least) [best, least] = [n, d];
+	}
+	return best;
+};
+const g = globalThis;
+const iconify = (collection) => {
+	const pkg = `@iconify-json/${collection}/icons.json`;
+	let json;
+	try {
+		const file = createRequire(join(process.cwd(), "_")).resolve(pkg);
+		const mtime = statSync(file).mtimeMs;
+		const cache = g.__cssintsIcons ??= /* @__PURE__ */ new Map();
+		const hit = cache.get(file);
+		json = hit?.mtime === mtime ? hit.json : JSON.parse(readFileSync(file, "utf8"));
+		cache.set(file, {
+			mtime,
+			json
+		});
+	} catch (e) {
+		throw new Error(`cssints: icons: cannot read ${pkg} from ${process.cwd()}: install @iconify-json/${collection}`, { cause: e });
+	}
+	return {
+		label: `iconify-json ${collection}`,
+		get: (name) => getIconData(json, name) ?? void 0,
+		names: () => [...Object.keys(json.icons), ...Object.keys(json.aliases ?? {})]
+	};
+};
+const files = (dir) => {
+	const abs = resolve(dir);
+	const list = () => {
+		try {
+			return readdirSync(abs).filter((f) => f.endsWith(".svg"));
+		} catch (e) {
+			throw new Error(`cssints: icons: cannot read the directory ${abs}`, { cause: e });
+		}
+	};
+	list();
+	return {
+		label: dir,
+		names: () => list().map((f) => f.slice(0, -4)),
+		get: (name) => {
+			if (!list().includes(`${name}.svg`)) return void 0;
+			const file = join(abs, `${name}.svg`);
+			dependsOn(file);
+			const svg = parseSVGContent(readFileSync(file, "utf8"));
+			const icon = svg && convertParsedSVG(svg);
+			if (!icon) throw new Error(`cssints: icons: ${name}.svg is not an SVG with a viewBox`);
+			return icon;
+		}
+	};
+};
+const urlOf = (icon) => {
+	const { body, viewBox } = iconToSVG(icon);
+	const [x, y, w, h] = viewBox;
+	const side = Math.max(w, h);
+	return svgToURL(iconToHTML(body.replace(/currentColor/g, "black"), {
+		viewBox: `${x - (side - w) / 2} ${y - (side - h) / 2} ${side} ${side}`,
+		width: `${side}`,
+		height: `${side}`
+	}));
+};
+/**
+* Icons from the `@iconify-json/<collection>` package installed in the project (read from `node_modules` when the
+* module runs; the project is the working directory), or from the `.svg` files of a directory (relative to the working
+* directory, named without the extension). Say which collection in the type argument to have the names checked as you
+* type: `icons<typeof import("@iconify-json/mdi/icons.json")>({ provider: "iconify-json", collection: "mdi" })`. A name
+* that does not exist is a build error that suggests the nearest one.
+*
+* One scope, "icons", whatever the collection: its kernels are the same, and `build` is the same code, which the engine
+* takes as one definition however many times `icons()` runs.
+*
+* @param {Options} options where the icons come from
+* @returns {Icons<IconName<C>>} a function of the icon name: a style for `cn()`
+*/
+const icons = (options) => {
+	const source = options.provider === "fs" ? files(options.dir) : iconify(options.collection);
+	return scope("icons", {
+		mask,
+		image,
+		icon: { args: arg() }
+	}).build({ icon: (name) => {
+		const icon = source.get(name);
+		if (!icon) {
+			const near = nearest(name, source.names());
+			throw new Error(`cssints: icons: no icon ${JSON.stringify(name)} in ${source.label}${near ? `, did you mean ${near}?` : ""}`);
+		}
+		return {
+			decls: [["--_svg", urlOf(icon)]],
+			uses: [icon.body.includes("currentColor") ? "mask" : "image"]
+		};
+	} }).export().icon;
+};
+//#endregion
+export { icons };

package/package.json

@@ -1,6 +1,35 @@
 {
   "name": "@cssints/icons",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Icons for cssints: iconify JSON collections and SVG folders as a mask style, no runtime",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alexeiaccio/css-in-ts-compiler.git",
+    "directory": "packages/icons"
+  },
+  "homepage": "https://cssints.dev",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "@iconify/utils": "^3.0.0"
+  },
+  "peerDependencies": {
+    "cssints": "^0.2.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}