@octane-xplat/icons 0.0.1 → 0.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Alec Larson
+
+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,4 +1,171 @@
 # @octane-xplat/icons
 
-This is a placeholder stub published to reserve the package name ahead of the
-first automated release. It has no supported API.
+Render bundled Iconify icons on web, iOS, Android, and experimental AppKit macOS. Apps choose their sets;
+this package ships no icon data, default collection, or Iconify API client.
+
+## Install and register
+
+In an Octane-xplat app with `@octane-xplat/ui` already configured:
+
+```sh
+pnpm add @octane-xplat/icons @iconify-json/heroicons
+```
+
+Register bundled JSON before mounting the app, then use `prefix:name`:
+
+```tsx
+import { icons as heroicons } from '@iconify-json/heroicons'
+import { addCollection, Icon } from '@octane-xplat/icons'
+
+addCollection(heroicons)
+
+export function NextAction() {
+	return <Icon name="heroicons:arrow-right" size={24} color="#2563eb" label="Next" />
+}
+```
+
+Heroicons is the Astryx-parity choice: Astryx's Icon is heroicons-based.
+It is an example, not a default. Register any number of `@iconify-json/*`
+collections the same way. A collection's `prefix` determines its namespace;
+there is no automatic package discovery, fetching, or fallback set.
+
+```ts
+// heroicons and addCollection are imported above.
+addCollection(heroicons)
+console.log(heroicons.prefix) // The prefix is used before the colon in name.
+```
+
+Importing a whole collection bundles that collection. To keep a small bundle,
+provide equivalent Iconify JSON containing only the icons you use:
+
+```ts
+addCollection({
+	prefix: 'app',
+	width: 24,
+	height: 24,
+	icons: {
+		next: {
+			body: '<path fill="none" d="M4 12h16m-6-6 6 6-6 6" stroke="currentColor" stroke-width="2"/>',
+		},
+	},
+})
+```
+
+Keep collection dimensions and any parent icons needed by aliases when pruning
+an existing set. Use only trusted bundled SVG data; conversion does not sanitize
+SVG bodies. Treat registered JSON as immutable.
+
+## Rendering and updates
+
+Import `Icon` from **this package**. It owns a collection registry separate from
+UI's glyph registry: `addCollection` does not populate UI's `registerIcons` seam.
+That seam has no change subscription and shares stored definition IDs across
+instances. This component subscribes to registration changes and makes SVG IDs
+unique for each instance. Re-registering a prefix replaces its whole collection
+and updates mounted icons, including a previously missing icon.
+
+```tsx
+import { addCollection, Icon } from '@octane-xplat/icons'
+
+addCollection({ prefix: 'trip', icons: { next: { body: '<path d="M0 0h16v16H0z" />' } } })
+export function TripIcon() {
+	return <Icon name="trip:next" />
+}
+// Replacing this collection notifies already-mounted TripIcon components.
+addCollection({ prefix: 'trip', icons: { next: { body: '<circle cx="8" cy="8" r="8" />' } } })
+```
+
+`resolveIcon('prefix:name')` returns normalized Iconify data, including collection
+dimensions and alias transforms, or `undefined` for a missing/invalid name.
+`Icon` renders nothing in that case. Alias cycles and missing parents also resolve
+to nothing. No network request is made.
+
+```ts
+import { resolveIcon } from '@octane-xplat/icons'
+
+const icon = resolveIcon('heroicons:arrow-right')
+if (!icon) console.log('Register this icon collection before rendering')
+```
+
+| Prop              | Behavior                                                                                         |
+| ----------------- | ------------------------------------------------------------------------------------------------ |
+| `name`            | Required `prefix:name`                                                                           |
+| `size`            | Positive finite height in logical pixels, default 24; width follows the transformed aspect ratio |
+| `color`           | Replaces `currentColor` and supplies default fill; explicit multicolor fills remain intact       |
+| `rotate`          | Quarter turns; applied after the icon's own transforms                                           |
+| `hFlip`, `vFlip`  | Additional horizontal/vertical flips                                                             |
+| `id`, `className` | Passed to the rendered host                                                                      |
+| `label`           | Accessible description; omit for decorative icons                                                |
+
+Web uses inline `<svg>` and inherits `currentColor` when `color` is omitted.
+Native defaults to black; pass a concrete color to match app/theme text. It sends
+DOM-free SVG markup through UI's `Image` SVG path to the vendored ui-svg SVGView
+(SVGKit on iOS, androidsvg on Android). No extra native plugin setup is needed
+beyond UI's setup. All leaves have the same props and exports. The package uses
+style objects and ships no CSS pipeline. Native compatibility follows those SVG
+engines; browser-only SVG features such as filters/animation are not guaranteed.
+
+```tsx
+// Icon is imported from this package above.
+export function Direction() {
+	return <Icon name="heroicons:arrow-right" color="#2563eb" rotate={1} hFlip label="Continue" />
+}
+```
+
+AppKit uses UI's macOS `Image` to encode inline SVG with Foundation and load it
+into `NSImageView` through public `NSImage` APIs. This path was runtime-tested
+on macOS 27.0.1; SVG decoding on the app deployment minimum macOS 13.5 remains
+unverified. An OS that cannot decode the SVG produces an empty image; there is
+no fallback renderer. macOS forwards `id`/`className`, but the image host does
+not apply class-based styling. Labels map to the native accessibility label;
+unlabeled images are marked decorative. Pixel fidelity and OS accessibility
+traversal remain unverified. See [AppKit SVG notes](../../docs/notes/icon-svg-notes.md).
+
+```tsx
+// Direction.macos.tsx
+import { Icon } from '@octane-xplat/icons'
+
+export function Direction() {
+	return <Icon id="next" name="heroicons:arrow-right" size={24} label="Next" />
+}
+```
+
+`iconToSvg(icon, options?)` exposes the shared DOM-free conversion. It returns
+`body`, `viewBox`, numeric `width`/`height`, and complete `markup`. It resolves
+transforms and rewrites definition references. For native markup, supply a
+concrete `color`; the helper otherwise retains `currentColor`.
+
+```ts
+import { iconToSvg, resolveIcon } from '@octane-xplat/icons'
+
+const icon = resolveIcon('heroicons:arrow-right')
+if (icon) {
+	const svg = iconToSvg(icon, { color: '#2563eb' })
+	console.log(svg.viewBox, svg.width, svg.height, svg.markup)
+}
+```
+
+## Licenses
+
+This package and Iconify's utilities are MIT. Icon sets retain their own licenses;
+Iconify JSON does not grant a common license across sets. Heroicons is MIT.
+Check each set's `info.json`, license files, and upstream license, and retain
+required attribution/notices when bundling or pruning its data. Apps own that
+license handling; this leaf distributes no set data.
+
+## Verification and example
+
+The maintained [icon probe](../../examples/probes/icons.tsrx) exercises multiple
+sets, sizing, aliases, missing names, and mounted registration/prop updates:
+
+```sh
+pnpm probe doctor
+pnpm probe run examples/probes/icons.macos.tsrx --target macos --deps @octane-xplat/icons
+pnpm probe run examples/probes/icons.tsrx --target web --deps @octane-xplat/icons
+pnpm probe run examples/probes/icons.tsrx --target ios --device SIMULATOR_UDID --deps @octane-xplat/icons
+```
+
+For package checks, run `pnpm --filter @octane-xplat/icons build`, `typecheck`,
+`test`, and `pack:check`. Runtime evidence is recorded separately from builds;
+The probe proves host/source updates, not pixel parity or OS accessibility
+traversal. Run it on each target you ship. This package owns the maintained probe.

package/dist/macos/Icon.macos.js

@@ -0,0 +1,71 @@
+import { registry, resolveIcon } from "./registry.js";
+import { iconToSvg } from "./svg.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useMemo, withSlot } from "@nativescript-community/octane";
+import { Image, useStore } from "@octane-xplat/ui";
+//#region src/Icon.macos.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("macos", {
+	"kind": "slot",
+	"slot": 0
+});
+var Icon = defineUniversalComponent("macos", function Icon(props) {
+	withSlot(_h$0, useStore, registry);
+	const icon = resolveIcon(props.name);
+	const image = useMemo(() => {
+		if (!icon) return void 0;
+		const svg = iconToSvg(icon, {
+			size: props.size,
+			color: props.color ?? "#000000",
+			rotate: props.rotate,
+			hFlip: props.hFlip,
+			vFlip: props.vFlip
+		});
+		return {
+			src: svg.markup,
+			width: svg.width,
+			height: svg.height
+		};
+	}, [
+		icon,
+		props.size,
+		props.color,
+		props.rotate,
+		props.hFlip,
+		props.vFlip
+	], _h$1);
+	if (!image) return null;
+	return universalValue(__octaneUniversalPlan0, [universalComponent("macos", Image, universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			props.className
+		],
+		[
+			"set",
+			"src",
+			image.src
+		],
+		[
+			"set",
+			"alt",
+			props.label ?? ""
+		],
+		[
+			"set",
+			"style",
+			{
+				width: image.width,
+				height: image.height
+			}
+		]
+	]))]);
+}, { "module": "@octane-xplat/macos-renderer" });
+//#endregion
+export { Icon };

package/dist/macos/index.js

@@ -0,0 +1,4 @@
+import { addCollection, resolveIcon } from "./registry.js";
+import { iconToSvg } from "./svg.js";
+import { Icon } from "./Icon.macos.js";
+export { Icon, addCollection, iconToSvg, resolveIcon };

package/dist/macos/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "c4bfdd89-aba2-4700-a0cb-03dc4a95d97b",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/macos/registry.js

@@ -0,0 +1,45 @@
+import { getIconData } from "@iconify/utils/lib/icon-set/get-icon";
+//#region src/registry.ts
+var collections = /* @__PURE__ */ new Map();
+var cache = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var revision = 0;
+var identifier = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+var registry = {
+	get: () => revision,
+	subscribe(notify) {
+		listeners.add(notify);
+		return () => {
+			listeners.delete(notify);
+		};
+	}
+};
+/**
+* Register trusted, bundled Iconify JSON. Replaces the collection with the same
+* prefix and updates mounted Icons. No fetching or default set is provided.
+* Treat the supplied JSON as immutable after registration.
+* @throws TypeError if the prefix or icons dictionary is missing/invalid.
+*/
+function addCollection(collection) {
+	if (!collection || typeof collection.prefix !== "string" || !identifier.test(collection.prefix) || !collection.icons || typeof collection.icons !== "object" || Array.isArray(collection.icons)) throw new TypeError("Expected Iconify JSON with a non-empty prefix and icons dictionary");
+	collections.set(collection.prefix, {
+		...collection,
+		icons: Object.assign(Object.create(null), collection.icons),
+		aliases: Object.assign(Object.create(null), collection.aliases)
+	});
+	cache.clear();
+	revision++;
+	for (const notify of [...listeners]) notify();
+}
+/** Resolve `prefix:name`, including aliases and collection dimensions; missing/invalid names return undefined. */
+function resolveIcon(name) {
+	if (cache.has(name)) return cache.get(name);
+	const parts = name.split(":");
+	if (parts.length !== 2 || !parts.every((part) => identifier.test(part))) return;
+	const collection = collections.get(parts[0]);
+	const icon = collection ? getIconData(collection, parts[1]) ?? void 0 : void 0;
+	cache.set(name, icon);
+	return icon;
+}
+//#endregion
+export { addCollection, registry, resolveIcon };

package/dist/macos/svg.js

@@ -0,0 +1,37 @@
+import { iconToSVG } from "@iconify/utils/lib/svg/build";
+import { replaceIDs } from "@iconify/utils/lib/svg/id";
+//#region src/svg.ts
+function escapeAttribute(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+/**
+* Convert trusted icon data to SVG without DOM APIs. Applies transforms, keeps
+* multicolor fills, and gives definitions unique IDs on every invocation.
+* Without a color, markup uses currentColor; native callers should supply a
+* concrete tint. This is a converter, not an SVG sanitizer.
+* @throws RangeError if size is not finite and positive.
+*/
+function iconToSvg(icon, options = {}) {
+	const size = options.size ?? 24;
+	if (!Number.isFinite(size) || size <= 0) throw new RangeError("Icon size must be finite and positive");
+	const result = iconToSVG(icon, {
+		height: size,
+		rotate: options.rotate ?? 0,
+		hFlip: options.hFlip ?? false,
+		vFlip: options.vFlip ?? false
+	});
+	const color = escapeAttribute(options.color ?? "currentColor");
+	const body = replaceIDs(result.body).replace(/currentColor/g, () => color);
+	const viewBox = result.attributes.viewBox;
+	const width = Number(result.attributes.width);
+	const height = Number(result.attributes.height);
+	return {
+		body,
+		viewBox,
+		width,
+		height,
+		markup: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${viewBox}" width="${width}" height="${height}" color="${color}" fill="${color}">${body}</svg>`
+	};
+}
+//#endregion
+export { iconToSvg };

package/dist/native/Icon.js

@@ -0,0 +1,79 @@
+import { registry, resolveIcon } from "./registry.js";
+import { iconToSvg } from "./svg.js";
+import { defineUniversalComponent, hookSlots, universalComponent, universalPlan, universalProps, universalValue, useMemo, withSlot } from "@nativescript-community/octane";
+import { Image, useStore } from "@octane-xplat/ui";
+//#region src/Icon.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "slot",
+	"slot": 0
+});
+var Icon = defineUniversalComponent("nativescript", function Icon(props) {
+	withSlot(_h$0, useStore, registry);
+	const icon = resolveIcon(props.name);
+	const svg = useMemo(() => icon ? iconToSvg(icon, {
+		size: props.size,
+		color: props.color ?? "#000000",
+		rotate: props.rotate,
+		hFlip: props.hFlip,
+		vFlip: props.vFlip
+	}) : void 0, [
+		icon,
+		props.size,
+		props.color,
+		props.rotate,
+		props.hFlip,
+		props.vFlip
+	], _h$1);
+	if (!svg) return null;
+	return universalValue(__octaneUniversalPlan0, [universalComponent("nativescript", Image, universalProps([
+		[
+			"set",
+			"id",
+			props.id
+		],
+		[
+			"set",
+			"className",
+			props.className
+		],
+		[
+			"set",
+			"src",
+			svg.markup
+		],
+		[
+			"set",
+			"alt",
+			props.label
+		],
+		[
+			"set",
+			"ios",
+			{
+				accessible: !!props.label,
+				accessibilityRole: "image"
+			}
+		],
+		[
+			"set",
+			"android",
+			{
+				accessible: !!props.label,
+				accessibilityRole: "image"
+			}
+		],
+		[
+			"set",
+			"style",
+			{
+				width: svg.width,
+				height: svg.height
+			}
+		]
+	]))]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { Icon };

package/dist/native/index.js

@@ -0,0 +1,4 @@
+import { addCollection, resolveIcon } from "./registry.js";
+import { iconToSvg } from "./svg.js";
+import { Icon } from "./Icon.js";
+export { Icon, addCollection, iconToSvg, resolveIcon };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "32b529c5-58bd-4ae2-9bc8-42cf21e6fbdc",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/native/registry.js

@@ -0,0 +1,45 @@
+import { getIconData } from "@iconify/utils/lib/icon-set/get-icon";
+//#region src/registry.ts
+var collections = /* @__PURE__ */ new Map();
+var cache = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var revision = 0;
+var identifier = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+var registry = {
+	get: () => revision,
+	subscribe(notify) {
+		listeners.add(notify);
+		return () => {
+			listeners.delete(notify);
+		};
+	}
+};
+/**
+* Register trusted, bundled Iconify JSON. Replaces the collection with the same
+* prefix and updates mounted Icons. No fetching or default set is provided.
+* Treat the supplied JSON as immutable after registration.
+* @throws TypeError if the prefix or icons dictionary is missing/invalid.
+*/
+function addCollection(collection) {
+	if (!collection || typeof collection.prefix !== "string" || !identifier.test(collection.prefix) || !collection.icons || typeof collection.icons !== "object" || Array.isArray(collection.icons)) throw new TypeError("Expected Iconify JSON with a non-empty prefix and icons dictionary");
+	collections.set(collection.prefix, {
+		...collection,
+		icons: Object.assign(Object.create(null), collection.icons),
+		aliases: Object.assign(Object.create(null), collection.aliases)
+	});
+	cache.clear();
+	revision++;
+	for (const notify of [...listeners]) notify();
+}
+/** Resolve `prefix:name`, including aliases and collection dimensions; missing/invalid names return undefined. */
+function resolveIcon(name) {
+	if (cache.has(name)) return cache.get(name);
+	const parts = name.split(":");
+	if (parts.length !== 2 || !parts.every((part) => identifier.test(part))) return;
+	const collection = collections.get(parts[0]);
+	const icon = collection ? getIconData(collection, parts[1]) ?? void 0 : void 0;
+	cache.set(name, icon);
+	return icon;
+}
+//#endregion
+export { addCollection, registry, resolveIcon };

package/dist/native/svg.js

@@ -0,0 +1,37 @@
+import { iconToSVG } from "@iconify/utils/lib/svg/build";
+import { replaceIDs } from "@iconify/utils/lib/svg/id";
+//#region src/svg.ts
+function escapeAttribute(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+/**
+* Convert trusted icon data to SVG without DOM APIs. Applies transforms, keeps
+* multicolor fills, and gives definitions unique IDs on every invocation.
+* Without a color, markup uses currentColor; native callers should supply a
+* concrete tint. This is a converter, not an SVG sanitizer.
+* @throws RangeError if size is not finite and positive.
+*/
+function iconToSvg(icon, options = {}) {
+	const size = options.size ?? 24;
+	if (!Number.isFinite(size) || size <= 0) throw new RangeError("Icon size must be finite and positive");
+	const result = iconToSVG(icon, {
+		height: size,
+		rotate: options.rotate ?? 0,
+		hFlip: options.hFlip ?? false,
+		vFlip: options.vFlip ?? false
+	});
+	const color = escapeAttribute(options.color ?? "currentColor");
+	const body = replaceIDs(result.body).replace(/currentColor/g, () => color);
+	const viewBox = result.attributes.viewBox;
+	const width = Number(result.attributes.width);
+	const height = Number(result.attributes.height);
+	return {
+		body,
+		viewBox,
+		width,
+		height,
+		markup: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${viewBox}" width="${width}" height="${height}" color="${color}" fill="${color}">${body}</svg>`
+	};
+}
+//#endregion
+export { iconToSvg };

package/dist/web/Icon.web.js

@@ -0,0 +1,75 @@
+import { registry, resolveIcon } from "./registry.js";
+import { iconToSvg } from "./svg.js";
+import { bag12, clone, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setStyleProperty, template, withSlot } from "octane";
+import { bindSignalAttribute, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoEqual, hookMemoPublish, replaceRef, setPlainAttribute } from "octane/internal/client";
+import { useStore } from "@octane-xplat/ui";
+//#region src/Icon.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<svg style=\"display: inline-block; flex-shrink: 0;\"></svg>", 1);
+var _hs$ = /* @__PURE__ */ hookSlots(2);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _rm$1 = [
+	"r",
+	"l",
+	"b"
+];
+function __then$0(__props, __s, __extra) {
+	const props = __extra[0];
+	const svg = __extra[1];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m11;
+		const _root = clone(_t$0, void 0, "||");
+		_m1 = _root;
+		queueRefAttach(__s, _m11 = (element) => {
+			if (element) element.innerHTML = svg.body;
+		}, _m1);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.l, _b.b));
+		_b = bag12(__s, _root, void 0, _m1, void 0, void 0, void 0, void 0, void 0, __s, void 0, void 0, void 0, _m11);
+		__s.refFields = _rm$1;
+	} else {
+		const _r = (element) => {
+			if (element) element.innerHTML = svg.body;
+		};
+		if (_r !== _b.l) _b.l = replaceRef(__s, _b.l, _r, _b.b);
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.id, "b:5e515cc8", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.className, "b:55ac2a96", "class");
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "viewBox", svg.viewBox, "b:056826c3", setPlainAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "width", svg.width, "b:73d5f188", setPlainAttribute);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.b, "height", svg.height, "b:3b5779f4", setPlainAttribute);
+	_b.g = bindSignalAttribute(__s, _b.g, _b.b, "fill", props.color ?? "currentColor", "b:13d0b8b1", setPlainAttribute);
+	{
+		const _v = props.color;
+		if (_b.h !== _v) {
+			setStyleProperty(_b.b, "color", _v, "display: inline-block; flex-shrink: 0;", _b.h);
+			_b.h = _v;
+		}
+	}
+	_b.i = bindSignalAttribute(__s, _b.i, _b.b, "role", props.label ? "img" : void 0, "b:23c7db75", setPlainAttribute);
+	_b.j = bindSignalAttribute(__s, _b.j, _b.b, "aria-label", props.label, "b:359cbba3", setAriaAttribute);
+	_b.k = bindSignalAttribute(__s, _b.k, _b.b, "aria-hidden", props.label ? void 0 : "true", "b:7db4983a", setAriaAttribute);
+}
+var Icon = function Icon(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(8);
+	let __hkd0, __hkd1, __hkd2, __hkd3, __hkd4, __hkd5;
+	withSlot(_h$0, useStore, registry);
+	const icon = resolveIcon(props.name);
+	const svg = (__hkd0 = icon, __hkd1 = props.size, __hkd2 = props.color, __hkd3 = props.rotate, __hkd4 = props.hFlip, __hkd5 = props.vFlip, __hk[0] !== true || !hookMemoEqual(__hk[1], __hkd0) || !hookMemoEqual(__hk[2], __hkd1) || !hookMemoEqual(__hk[3], __hkd2) || !hookMemoEqual(__hk[4], __hkd3) || !hookMemoEqual(__hk[5], __hkd4) || !hookMemoEqual(__hk[6], __hkd5) ? hookMemoPublish(__hk, 0, icon ? iconToSvg(icon, {
+		size: props.size,
+		color: props.color,
+		rotate: props.rotate,
+		hFlip: props.hFlip,
+		vFlip: props.vFlip
+	}) : void 0, __hkd0, __hkd1, __hkd2, __hkd3, __hkd4, __hkd5) : __hk[7]);
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition = !!svg;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props, svg] : void 0);
+	}
+};
+//#endregion
+export { Icon };

package/dist/web/index.js

@@ -0,0 +1,4 @@
+import { addCollection, resolveIcon } from "./registry.js";
+import { iconToSvg } from "./svg.js";
+import { Icon } from "./Icon.web.js";
+export { Icon, addCollection, iconToSvg, resolveIcon };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "2a59e429-04fb-4cd7-9912-0d22f2f8329a",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/registry.js

@@ -0,0 +1,45 @@
+import { getIconData } from "@iconify/utils/lib/icon-set/get-icon";
+//#region src/registry.ts
+var collections = /* @__PURE__ */ new Map();
+var cache = /* @__PURE__ */ new Map();
+var listeners = /* @__PURE__ */ new Set();
+var revision = 0;
+var identifier = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+var registry = {
+	get: () => revision,
+	subscribe(notify) {
+		listeners.add(notify);
+		return () => {
+			listeners.delete(notify);
+		};
+	}
+};
+/**
+* Register trusted, bundled Iconify JSON. Replaces the collection with the same
+* prefix and updates mounted Icons. No fetching or default set is provided.
+* Treat the supplied JSON as immutable after registration.
+* @throws TypeError if the prefix or icons dictionary is missing/invalid.
+*/
+function addCollection(collection) {
+	if (!collection || typeof collection.prefix !== "string" || !identifier.test(collection.prefix) || !collection.icons || typeof collection.icons !== "object" || Array.isArray(collection.icons)) throw new TypeError("Expected Iconify JSON with a non-empty prefix and icons dictionary");
+	collections.set(collection.prefix, {
+		...collection,
+		icons: Object.assign(Object.create(null), collection.icons),
+		aliases: Object.assign(Object.create(null), collection.aliases)
+	});
+	cache.clear();
+	revision++;
+	for (const notify of [...listeners]) notify();
+}
+/** Resolve `prefix:name`, including aliases and collection dimensions; missing/invalid names return undefined. */
+function resolveIcon(name) {
+	if (cache.has(name)) return cache.get(name);
+	const parts = name.split(":");
+	if (parts.length !== 2 || !parts.every((part) => identifier.test(part))) return;
+	const collection = collections.get(parts[0]);
+	const icon = collection ? getIconData(collection, parts[1]) ?? void 0 : void 0;
+	cache.set(name, icon);
+	return icon;
+}
+//#endregion
+export { addCollection, registry, resolveIcon };

package/dist/web/svg.js

@@ -0,0 +1,37 @@
+import { iconToSVG } from "@iconify/utils/lib/svg/build";
+import { replaceIDs } from "@iconify/utils/lib/svg/id";
+//#region src/svg.ts
+function escapeAttribute(value) {
+	return value.replaceAll("&", "&amp;").replaceAll("\"", "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+/**
+* Convert trusted icon data to SVG without DOM APIs. Applies transforms, keeps
+* multicolor fills, and gives definitions unique IDs on every invocation.
+* Without a color, markup uses currentColor; native callers should supply a
+* concrete tint. This is a converter, not an SVG sanitizer.
+* @throws RangeError if size is not finite and positive.
+*/
+function iconToSvg(icon, options = {}) {
+	const size = options.size ?? 24;
+	if (!Number.isFinite(size) || size <= 0) throw new RangeError("Icon size must be finite and positive");
+	const result = iconToSVG(icon, {
+		height: size,
+		rotate: options.rotate ?? 0,
+		hFlip: options.hFlip ?? false,
+		vFlip: options.vFlip ?? false
+	});
+	const color = escapeAttribute(options.color ?? "currentColor");
+	const body = replaceIDs(result.body).replace(/currentColor/g, () => color);
+	const viewBox = result.attributes.viewBox;
+	const width = Number(result.attributes.width);
+	const height = Number(result.attributes.height);
+	return {
+		body,
+		viewBox,
+		width,
+		height,
+		markup: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${viewBox}" width="${width}" height="${height}" color="${color}" fill="${color}">${body}</svg>`
+	};
+}
+//#endregion
+export { iconToSvg };

package/package.json

@@ -1,11 +1,91 @@
 {
   "name": "@octane-xplat/icons",
-  "version": "0.0.1",
-  "description": "Placeholder stub for @octane-xplat/icons — no supported API yet.",
+  "version": "0.10.0",
+  "description": "Bundled, set-agnostic Iconify icons for Octane web and NativeScript",
+  "keywords": [
+    "cross-platform",
+    "iconify",
+    "icons",
+    "nativescript",
+    "octane"
+  ],
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/icons",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/icons"
+  },
+  "files": [
+    "dist",
+    "types/generated"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/generated/index.macos.d.ts",
+        "default": "./dist/macos/index.js"
+      },
+      "web": {
+        "types": "./types/generated/index.web.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "native": {
+        "types": "./types/generated/index.d.ts",
+        "default": "./dist/native/index.js"
+      },
+      "types": "./types/generated/index.d.ts",
+      "default": "./dist/native/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@iconify/types": "2.0.0",
+    "@iconify/utils": "3.1.7",
+    "@octane-xplat/ui": "0.10.0"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octane-xplat/macos-renderer": "0.10.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tsrx/typescript-plugin": "0.4.11",
+    "octane": "0.6.3",
+    "tsrx-typegen": "0.2.2",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "9.1.0",
+      "ios": "9.1.0"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && vite build --mode macos && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "typegen": "tsrx-typegen --target icons",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.web.json && tsrx-tsc --noEmit -p tsconfig.native.json && tsrx-tsc --noEmit -p tsconfig.macos.json",
+    "test": "pnpm build && node --test tests/*.test.mjs",
+    "pack:check": "tsrx-typegen --pack-check",
+    "test:packed": "node tests/packed-consumer.mjs"
   }
-}
+}

package/types/generated/.tsrx-typegen-manifest.json

@@ -0,0 +1,14 @@
+{
+  "version": 1,
+  "files": [
+    "Icon.d.ts",
+    "Icon.macos.d.ts",
+    "Icon.web.d.ts",
+    "index.d.ts",
+    "index.macos.d.ts",
+    "index.web.d.ts",
+    "props.d.ts",
+    "registry.d.ts",
+    "svg.d.ts"
+  ]
+}

package/types/generated/Icon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from './props.js';
+/**  Render a bundled icon through ui's vendored SVGView; missing names render nothing. */
+export declare function Icon(props: IconProps): unknown;

package/types/generated/Icon.macos.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from './props.js';
+/**  AppKit's renderer aliases the universal renderer entry and decodes SVG with NSImage. */
+export declare function Icon(props: IconProps): unknown;

package/types/generated/Icon.web.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from './props.js';
+/**  Render a bundled icon as inline SVG; missing names render nothing. */
+export declare function Icon(props: IconProps): unknown;

package/types/generated/index.d.ts

@@ -0,0 +1,5 @@
+export { Icon } from './Icon.js';
+export { addCollection, resolveIcon } from './registry.js';
+export { iconToSvg } from './svg.js';
+export type { IconProps, IconOptions, IconSvg } from './props.js';
+export type { IconifyIcon, IconifyJSON } from '@iconify/types';

package/types/generated/index.macos.d.ts

@@ -0,0 +1,5 @@
+export { Icon } from './Icon.macos.js';
+export { addCollection, resolveIcon } from './registry.js';
+export { iconToSvg } from './svg.js';
+export type { IconProps, IconOptions, IconSvg } from './props.js';
+export type { IconifyIcon, IconifyJSON } from '@iconify/types';

package/types/generated/index.web.d.ts

@@ -0,0 +1,5 @@
+export { Icon } from './Icon.web.js';
+export { addCollection, resolveIcon } from './registry.js';
+export { iconToSvg } from './svg.js';
+export type { IconProps, IconOptions, IconSvg } from './props.js';
+export type { IconifyIcon, IconifyJSON } from '@iconify/types';

package/types/generated/props.d.ts

@@ -0,0 +1,25 @@
+import type { IconifyTransformations } from '@iconify/types';
+/** SVG sizing, tint, and transforms shared by every target. */
+export interface IconOptions extends IconifyTransformations {
+    /** Height in logical pixels; width follows the transformed aspect ratio. Default: 24. */
+    size?: number;
+    /** Monochrome tint. Explicit fills in multicolor icons remain intact. */
+    color?: string;
+}
+/** Props for a bundled Iconify icon. */
+export interface IconProps extends IconOptions {
+    /** Registered collection prefix and icon name, such as `heroicons:arrow-right`. */
+    name: string;
+    id?: string;
+    className?: string;
+    /** Accessible description. Omit for a decorative icon. */
+    label?: string;
+}
+/** DOM-free SVG output, ready for an inline SVG or native SVGView. */
+export interface IconSvg {
+    body: string;
+    viewBox: string;
+    width: number;
+    height: number;
+    markup: string;
+}

package/types/generated/registry.d.ts

@@ -0,0 +1,14 @@
+import type { IconifyIcon, IconifyJSON } from '@iconify/types';
+export declare const registry: {
+    get: () => number;
+    subscribe(notify: () => void): () => void;
+};
+/**
+ * Register trusted, bundled Iconify JSON. Replaces the collection with the same
+ * prefix and updates mounted Icons. No fetching or default set is provided.
+ * Treat the supplied JSON as immutable after registration.
+ * @throws TypeError if the prefix or icons dictionary is missing/invalid.
+ */
+export declare function addCollection(collection: IconifyJSON): void;
+/** Resolve `prefix:name`, including aliases and collection dimensions; missing/invalid names return undefined. */
+export declare function resolveIcon(name: string): IconifyIcon | undefined;

package/types/generated/svg.d.ts

@@ -0,0 +1,10 @@
+import type { IconifyIcon } from '@iconify/types';
+import type { IconOptions, IconSvg } from './props.js';
+/**
+ * Convert trusted icon data to SVG without DOM APIs. Applies transforms, keeps
+ * multicolor fills, and gives definitions unique IDs on every invocation.
+ * Without a color, markup uses currentColor; native callers should supply a
+ * concrete tint. This is a converter, not an SVG sanitizer.
+ * @throws RangeError if size is not finite and positive.
+ */
+export declare function iconToSvg(icon: IconifyIcon, options?: IconOptions): IconSvg;