@tamagui/cli 3.0.0-beta.1479.1 → 3.0.0-beta.1537.1

package/dist/cli.cjs

@@ -169,6 +169,37 @@ const COMMAND_MAP = {
 			await installGeneratedPackage(type, path);
 		}
 	},
+	icons: {
+		shorthands: [],
+		description: `Generate themed SVG icon components from Lucide, Heroicons, Phosphor, or a folder of svgs.`,
+		usage: `$ tamagui icons add Search ChevronDown
+$ tamagui icons add Copy --from phosphor --weight bold
+$ tamagui icons add Clipboard --from heroicons --variant solid
+$ tamagui icons add Logo --from ./assets/icons --out src/icons
+$ tamagui icons add Search=magnifying-glass --from phosphor`,
+		flags: {
+			"--help": Boolean,
+			"--from": String,
+			"--weight": String,
+			"--variant": String,
+			"--out": String
+		},
+		async run() {
+			const { _, ...flags2 } = (0, import_arg.default)(this.flags);
+			const [_cmd, subcommand, ...names] = _;
+			if (subcommand !== "add") {
+				throw new Error("usage: tamagui icons add <Name...> [--from] [--out]");
+			}
+			const { addIcons } = require("./icons.cjs");
+			await addIcons({
+				names,
+				from: flags2["--from"],
+				weight: flags2["--weight"],
+				variant: flags2["--variant"],
+				out: flags2["--out"]
+			});
+		}
+	},
 	build: {
 		shorthands: ["b"],
 		description: `Use to pre-build a Tamagui component directory. Use -- to run a command after optimization, then auto-restore files.`,
@@ -321,6 +352,30 @@ $ tamagui migrate --from v1`,
 				output: flags2["--output"]
 			});
 		}
+	},
+	"preview-theme": {
+		shorthands: ["preview"],
+		description: `Preview a theme configuration in the browser on tamagui.dev/theme`,
+		usage: `$ tamagui preview-theme ./theme.json
+$ tamagui preview-theme --theme '{"palettes": ...}'
+$ tamagui preview-theme ./theme.json --print`,
+		flags: {
+			"--help": Boolean,
+			"--theme": String,
+			"--url": String,
+			"--print": Boolean
+		},
+		async run() {
+			const { _, ...flags2 } = (0, import_arg.default)(this.flags);
+			const [_cmd, themeArg] = _;
+			const { previewTheme } = require("./preview-theme.cjs");
+			await previewTheme({
+				theme: flags2["--theme"],
+				themeArg,
+				url: flags2["--url"],
+				print: flags2["--print"]
+			});
+		}
 	}
 };
 const commandEntries = Object.keys(COMMAND_MAP).flatMap((command2) => {

package/dist/icons.cjs

@@ -0,0 +1,263 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var icons_exports = {};
+__export(icons_exports, {
+	HEROICONS_VERSION: () => HEROICONS_VERSION,
+	LUCIDE_VERSION: () => LUCIDE_VERSION,
+	PHOSPHOR_VERSION: () => PHOSPHOR_VERSION,
+	addIcons: () => addIcons,
+	svgToComponent: () => svgToComponent
+});
+module.exports = __toCommonJS(icons_exports);
+var import_node_fs = require("node:fs");
+var import_promises = require("node:fs/promises");
+var import_node_path = __toESM(require("node:path"));
+var import_chalk = __toESM(require("chalk"));
+const LUCIDE_VERSION = "1.49.0";
+const HEROICONS_VERSION = "2.2.0";
+const PHOSPHOR_VERSION = "2.1.1";
+const libraries = [
+	"lucide",
+	"heroicons",
+	"phosphor"
+];
+const phosphorWeights = [
+	"regular",
+	"bold",
+	"duotone",
+	"fill",
+	"light",
+	"thin"
+];
+const heroiconsDirs = {
+	outline: "24/outline",
+	solid: "24/solid",
+	mini: "20/solid",
+	micro: "16/solid"
+};
+async function addIcons(options) {
+	const cwd = options.cwd ?? process.cwd();
+	const from = options.from ?? "lucide";
+	const outDir = import_node_path.default.resolve(cwd, options.out ?? "components/icons");
+	const localDir = libraries.includes(from) ? null : import_node_path.default.resolve(cwd, from);
+	if (localDir && !((0, import_node_fs.existsSync)(localDir) && (0, import_node_fs.statSync)(localDir).isDirectory())) {
+		throw new Error(`--from must be ${libraries.join(", ")}, or a directory of svg files (got "${from}")`);
+	}
+	if (!options.names.length) {
+		throw new Error("give the icons to add, e.g. `tamagui icons add Search ChevronDown`");
+	}
+	if (options.weight && from !== "phosphor") {
+		throw new Error("--weight applies to phosphor only");
+	}
+	if (options.weight && !phosphorWeights.includes(options.weight)) {
+		throw new Error(`--weight is one of ${phosphorWeights.join(", ")}`);
+	}
+	if (options.variant && from !== "heroicons") {
+		throw new Error("--variant applies to heroicons only");
+	}
+	if (options.variant && !heroiconsDirs[options.variant]) {
+		throw new Error(`--variant is one of ${Object.keys(heroiconsDirs).join(", ")}`);
+	}
+	const icons = [...new Set(options.names)].map((arg) => {
+		const [name, source = name] = arg.split("=");
+		const isKebab = (x) => /^[a-z0-9-]+$/.test(x);
+		const isPascal = (x) => /^[A-Z][A-Za-z0-9]*$/.test(x);
+		if (!(isKebab(name) || isPascal(name)) || !(isKebab(source) || isPascal(source)) || source !== name && !isPascal(name)) {
+			throw new Error(`icon names are PascalCase, kebab-case, or Name=source-name, got "${arg}"`);
+		}
+		return {
+			componentName: isKebab(name) ? kebabToPascal(name) : name,
+			file: isKebab(source) ? source : pascalToKebab(stripIconSuffix(source))
+		};
+	});
+	const loaded = await Promise.all(icons.map(async (icon) => {
+		if (localDir) {
+			const file = import_node_path.default.join(localDir, `${icon.file}.svg`);
+			return {
+				...icon,
+				svg: (0, import_node_fs.existsSync)(file) ? await (0, import_promises.readFile)(file, "utf-8") : null
+			};
+		}
+		const url = sourceUrl(from, icon.file, options);
+		const response = await fetch(url);
+		if (response.status === 404) return {
+			...icon,
+			svg: null
+		};
+		if (!response.ok) {
+			throw new Error(`fetching ${url} failed (${response.status})`);
+		}
+		return {
+			...icon,
+			svg: await response.text()
+		};
+	}));
+	const unknown = loaded.filter((icon) => icon.svg === null);
+	if (unknown.length) {
+		throw new Error(`unknown ${from} icon${unknown.length === 1 ? "" : "s"}: ${unknown.map((icon) => `${icon.componentName} (${icon.file}.svg)`).join(", ")}`);
+	}
+	await (0, import_promises.mkdir)(outDir, { recursive: true });
+	for (const icon of loaded) {
+		const file = import_node_path.default.join(outDir, `${icon.componentName}.tsx`);
+		await (0, import_promises.writeFile)(file, svgToComponent(icon.componentName, icon.svg));
+		console.info(`${import_chalk.default.green("wrote")} ${import_node_path.default.relative(cwd, file)}`);
+	}
+	const components = (await (0, import_promises.readdir)(outDir)).filter((file) => file.endsWith(".tsx")).map((file) => file.slice(0, -".tsx".length)).sort();
+	await (0, import_promises.writeFile)(import_node_path.default.join(outDir, "index.ts"), components.map((name) => `export { ${name} } from './${name}'`).join("\n") + "\n");
+	console.info(`${import_chalk.default.green("wrote")} ${import_node_path.default.relative(cwd, import_node_path.default.join(outDir, "index.ts"))} (${components.length} icons)`);
+}
+function sourceUrl(library, file, options) {
+	switch (library) {
+		case "lucide": return `https://unpkg.com/lucide-static@${LUCIDE_VERSION}/icons/${file}.svg`;
+		case "heroicons": return `https://unpkg.com/heroicons@${HEROICONS_VERSION}/${heroiconsDirs[options.variant ?? "outline"]}/${file}.svg`;
+		case "phosphor": {
+			const weight = options.weight ?? "regular";
+			const name = weight === "regular" ? file : `${file}-${weight}`;
+			return `https://unpkg.com/@phosphor-icons/core@${PHOSPHOR_VERSION}/assets/${weight}/${name}.svg`;
+		}
+	}
+}
+function pascalToKebab(name) {
+	return name.replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Za-z])(\d)/g, "$1-$2").toLowerCase();
+}
+function kebabToPascal(name) {
+	return name.split("-").map((part) => part ? part[0].toUpperCase() + part.slice(1) : part).join("");
+}
+function stripIconSuffix(name) {
+	return name.endsWith("Icon") && name.length > 4 ? name.slice(0, -4) : name;
+}
+function parseSvg(svg) {
+	const root = {
+		tag: "",
+		attrs: [],
+		children: []
+	};
+	const stack = [root];
+	const tagPattern = /<(\/?)([A-Za-z][A-Za-z0-9]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)(\/?)>/g;
+	for (const [, closing, tag, attrText, selfClose] of svg.replace(/<!--[\s\S]*?-->/g, "").matchAll(tagPattern)) {
+		if (closing) {
+			if (stack.pop()?.tag !== tag) throw new Error(`mismatched </${tag}> in svg`);
+			continue;
+		}
+		const node = {
+			tag,
+			attrs: [],
+			children: []
+		};
+		for (const [, name, double, single] of attrText.matchAll(/([A-Za-z_:][A-Za-z0-9_.:-]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g)) {
+			node.attrs.push([name, double ?? single]);
+		}
+		stack[stack.length - 1].children.push(node);
+		if (!selfClose) stack.push(node);
+	}
+	const svgNode = root.children.find((node) => node.tag === "svg");
+	if (stack.length !== 1 || !svgNode) throw new Error("svg source has no complete <svg> root");
+	return svgNode;
+}
+const elements = {
+	path: "Path",
+	circle: "Circle",
+	ellipse: "Ellipse",
+	line: "Line",
+	polyline: "Polyline",
+	polygon: "Polygon",
+	rect: "Rect",
+	g: "G",
+	defs: "Defs",
+	clipPath: "ClipPath",
+	linearGradient: "LinearGradient",
+	radialGradient: "RadialGradient",
+	stop: "Stop",
+	use: "Use"
+};
+const restrictedNames = [
+	"Infinity",
+	"NaN",
+	"undefined"
+];
+function svgToComponent(name, svg) {
+	const root = parseSvg(svg);
+	const used = /* @__PURE__ */ new Set();
+	const ref = (element) => element === name ? `_${element}` : element;
+	const jsxAttr = (attrName, value) => {
+		if (attrName === "style") {
+			throw new Error(`${name}: style attributes have no react-native-svg equivalent`);
+		}
+		const prop = attrName === "xlink:href" ? "href" : attrName.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+		return value === "currentColor" ? `${prop}={color}` : `${prop}="${value}"`;
+	};
+	const keepAttr = ([attrName]) => !(attrName === "xmlns" || attrName.startsWith("xmlns:") || attrName === "class" || attrName === "version" || attrName.startsWith("data-") || attrName.startsWith("aria-"));
+	const rootAttrs = root.attrs.filter(keepAttr);
+	const viewBox = rootAttrs.find(([attrName]) => attrName === "viewBox")?.[1];
+	if (!viewBox) throw new Error(`${name}: svg source has no viewBox`);
+	const rootStroke = rootAttrs.some(([attrName, value]) => attrName === "stroke" && value === "currentColor");
+	const strokeWidth = rootAttrs.find(([attrName]) => attrName === "stroke-width")?.[1];
+	const emit = (node, indent) => {
+		const element = elements[node.tag];
+		if (!element) throw new Error(`${name}: unsupported svg element <${node.tag}>`);
+		used.add(element);
+		const attrs = node.attrs.filter(keepAttr).map(([n, v]) => jsxAttr(n, v));
+		if (rootStroke && !node.attrs.some(([n]) => n === "stroke") && node.tag !== "g") {
+			attrs.push("stroke={color}");
+		}
+		const open = `${indent}<${ref(element)}${attrs.map((attr) => ` ${attr}`).join("")}`;
+		if (!node.children.length) return `${open} />`;
+		return `${open}>
+${node.children.map((child) => emit(child, `${indent}  `)).join("\n")}
+${indent}</${ref(element)}>`;
+	};
+	const children = root.children.map((child) => emit(child, "        "));
+	if (!children.length) throw new Error(`${name}: svg source draws nothing`);
+	const svgAttrs = [
+		"width={size}",
+		"height={size}",
+		...rootAttrs.filter(([attrName]) => attrName !== "width" && attrName !== "height").map(([attrName, value]) => jsxAttr(attrName, value)),
+		"{...otherProps}"
+	];
+	const imports = [...used].sort().map((element) => element === name ? `${element} as _${element}` : element);
+	const themedOptions = strokeWidth && strokeWidth !== "2" ? `, { defaultStrokeWidth: ${strokeWidth} }` : "";
+	return `${restrictedNames.includes(name) ? "/* eslint-disable no-shadow-restricted-names */\n" : ""}import { memo, type JSX } from 'react'
+import { Svg, ${imports.join(", ")}, type SvgProps } from 'react-native-svg'
+import { themed, type IconProps } from '@tamagui/helpers-icon'
+
+export const ${name}: (props: IconProps) => JSX.Element = themed(
+  memo(function ${name}(props: IconProps) {
+    const { color = 'black', size = 24, ...otherProps } = props as SvgProps & {
+      color?: string
+      size?: number
+    }
+    return (
+      <Svg
+${svgAttrs.map((attr) => `        ${attr}`).join("\n")}
+      >
+${children.join("\n")}
+      </Svg>
+    )
+  })${themedOptions}
+)
+`;
+}

package/dist/preview-theme.cjs

@@ -0,0 +1,70 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var preview_theme_exports = {};
+__export(preview_theme_exports, { previewTheme: () => previewTheme });
+module.exports = __toCommonJS(preview_theme_exports);
+var import_node_fs = __toESM(require("node:fs"));
+var import_node_path = __toESM(require("node:path"));
+var import_chalk = __toESM(require("chalk"));
+var import_opener = __toESM(require("opener"));
+async function previewTheme(options) {
+	const themeInput = (options.theme || options.themeArg || "").trim();
+	let themeData = null;
+	if (themeInput) {
+		if (themeInput.startsWith("{") || themeInput.startsWith("[")) {
+			try {
+				themeData = JSON.parse(themeInput);
+			} catch (err) {
+				throw new Error(`Invalid JSON provided for --theme: ${err.message}`);
+			}
+		} else {
+			const filePath = import_node_path.default.resolve(process.cwd(), themeInput);
+			if (!import_node_fs.default.existsSync(filePath)) {
+				throw new Error(`Theme file not found at: ${filePath}`);
+			}
+			try {
+				const fileContent = import_node_fs.default.readFileSync(filePath, "utf-8");
+				themeData = JSON.parse(fileContent);
+			} catch (err) {
+				throw new Error(`Failed to read theme file ${filePath}: ${err.message}`);
+			}
+		}
+	}
+	const baseUrl = options.url || "https://tamagui.dev/theme";
+	let targetUrl = baseUrl;
+	if (themeData) {
+		const jsonStr = JSON.stringify(themeData);
+		const base64 = Buffer.from(jsonStr).toString("base64");
+		targetUrl = `${baseUrl}#theme=${encodeURIComponent(base64)}`;
+	}
+	if (options.print) {
+		console.info(targetUrl);
+		return;
+	}
+	console.info(import_chalk.default.green(`Opening theme preview:`), targetUrl);
+	(0, import_opener.default)(targetUrl);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/cli",
-  "version": "3.0.0-beta.1479.1",
+  "version": "3.0.0-beta.1537.1",
   "license": "MIT",
   "bin": {
     "tama": "dist/index.cjs",
@@ -52,12 +52,12 @@
     "test:web": "bun run test"
   },
   "dependencies": {
-    "@tamagui/generate-themes": "3.0.0-beta.1479.1",
-    "@tamagui/metro-plugin": "3.0.0-beta.1479.1",
-    "@tamagui/static": "3.0.0-beta.1479.1",
-    "@tamagui/to-tailwind": "3.0.0-beta.1479.1",
-    "@tamagui/types": "3.0.0-beta.1479.1",
-    "@tamagui/vite-plugin": "3.0.0-beta.1479.1",
+    "@tamagui/generate-themes": "3.0.0-beta.1537.1",
+    "@tamagui/metro-plugin": "3.0.0-beta.1537.1",
+    "@tamagui/static": "3.0.0-beta.1537.1",
+    "@tamagui/to-tailwind": "3.0.0-beta.1537.1",
+    "@tamagui/types": "3.0.0-beta.1537.1",
+    "@tamagui/vite-plugin": "3.0.0-beta.1537.1",
     "arg": "^5.0.2",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
@@ -76,10 +76,10 @@
     "ts-morph": "^28.0.0",
     "typescript": "7.0.2",
     "url": "^0.11.0",
-    "@tamagui/language-service": "3.0.0-beta.1479.1"
+    "@tamagui/language-service": "3.0.0-beta.1537.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.1479.1",
+    "@tamagui/build": "3.0.0-beta.1537.1",
     "@types/chokidar": "^2.1.3",
     "@types/marked": "^5.0.0",
     "vitest": "4.1.0"

package/src/cli.ts

@@ -43,7 +43,7 @@ const COMMAND_MAP = {
         }
       }
       const { checkStyleFiles, formatCheckResults, MissingConfigArtifactError } =
-        require('@tamagui/language-service/check') as typeof import('@tamagui/language-service/check')
+        require('@tamagui/language-service/check') as any
       try {
         const result = checkStyleFiles({
           root: options.paths.root,
@@ -52,7 +52,7 @@ const COMMAND_MAP = {
         })
         console.info(formatCheckResults(result))
         if (result.diagnosticCount > 0) process.exitCode = 1
-      } catch (error) {
+      } catch (error: any) {
         if (error instanceof MissingConfigArtifactError && !flags['--strict']) {
           console.warn(chalk.yellow(`skipping flat value check: ${error.message}`))
           return
@@ -167,6 +167,38 @@ const COMMAND_MAP = {
     },
   },
 
+  icons: {
+    shorthands: [],
+    description: `Generate themed SVG icon components from Lucide, Heroicons, Phosphor, or a folder of svgs.`,
+    usage: `$ tamagui icons add Search ChevronDown
+$ tamagui icons add Copy --from phosphor --weight bold
+$ tamagui icons add Clipboard --from heroicons --variant solid
+$ tamagui icons add Logo --from ./assets/icons --out src/icons
+$ tamagui icons add Search=magnifying-glass --from phosphor`,
+    flags: {
+      '--help': Boolean,
+      '--from': String,
+      '--weight': String,
+      '--variant': String,
+      '--out': String,
+    },
+    async run() {
+      const { _, ...flags } = arg(this.flags)
+      const [_cmd, subcommand, ...names] = _
+      if (subcommand !== 'add') {
+        throw new Error('usage: tamagui icons add <Name...> [--from] [--out]')
+      }
+      const { addIcons } = require('./icons')
+      await addIcons({
+        names,
+        from: flags['--from'],
+        weight: flags['--weight'],
+        variant: flags['--variant'],
+        out: flags['--out'],
+      })
+    },
+  },
+
   build: {
     shorthands: ['b'],
     description: `Use to pre-build a Tamagui component directory. Use -- to run a command after optimization, then auto-restore files.`,
@@ -352,6 +384,31 @@ $ tamagui migrate --from v1`,
       })
     },
   },
+
+  'preview-theme': {
+    shorthands: ['preview'],
+    description: `Preview a theme configuration in the browser on tamagui.dev/theme`,
+    usage: `$ tamagui preview-theme ./theme.json
+$ tamagui preview-theme --theme '{"palettes": ...}'
+$ tamagui preview-theme ./theme.json --print`,
+    flags: {
+      '--help': Boolean,
+      '--theme': String,
+      '--url': String,
+      '--print': Boolean,
+    },
+    async run() {
+      const { _, ...flags } = arg(this.flags)
+      const [_cmd, themeArg] = _
+      const { previewTheme } = require('./preview-theme')
+      await previewTheme({
+        theme: flags['--theme'],
+        themeArg,
+        url: flags['--url'],
+        print: flags['--print'],
+      })
+    },
+  },
 }
 
 type CommandDefinitions = typeof COMMAND_MAP

package/src/icons.ts

@@ -0,0 +1,308 @@
+// `tamagui icons add`: writes one themed react-native-svg component per icon,
+// plus an index of every component in the output dir. sources are pinned
+// upstream releases fetched from unpkg, or a local dir of svg files.
+
+import { existsSync, statSync } from 'node:fs'
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+
+import chalk from 'chalk'
+
+// pinned so a cli release only changes output when these move
+export const LUCIDE_VERSION = '1.49.0'
+export const HEROICONS_VERSION = '2.2.0'
+export const PHOSPHOR_VERSION = '2.1.1'
+
+const libraries = ['lucide', 'heroicons', 'phosphor'] as const
+type Library = (typeof libraries)[number]
+
+const phosphorWeights = ['regular', 'bold', 'duotone', 'fill', 'light', 'thin']
+// heroicons ships outline only at 24px; solid at 24px, mini at 20px, micro at 16px
+const heroiconsDirs: Record<string, string> = {
+  outline: '24/outline',
+  solid: '24/solid',
+  mini: '20/solid',
+  micro: '16/solid',
+}
+
+export type AddIconsOptions = {
+  names: string[]
+  // a library name, or a dir holding <kebab-name>.svg files
+  from?: string
+  weight?: string
+  variant?: string
+  out?: string
+  cwd?: string
+}
+
+export async function addIcons(options: AddIconsOptions) {
+  const cwd = options.cwd ?? process.cwd()
+  const from = options.from ?? 'lucide'
+  const outDir = path.resolve(cwd, options.out ?? 'components/icons')
+  const localDir = libraries.includes(from as Library) ? null : path.resolve(cwd, from)
+
+  if (localDir && !(existsSync(localDir) && statSync(localDir).isDirectory())) {
+    throw new Error(
+      `--from must be ${libraries.join(', ')}, or a directory of svg files (got "${from}")`
+    )
+  }
+  if (!options.names.length) {
+    throw new Error('give the icons to add, e.g. `tamagui icons add Search ChevronDown`')
+  }
+  if (options.weight && from !== 'phosphor') {
+    throw new Error('--weight applies to phosphor only')
+  }
+  if (options.weight && !phosphorWeights.includes(options.weight)) {
+    throw new Error(`--weight is one of ${phosphorWeights.join(', ')}`)
+  }
+  if (options.variant && from !== 'heroicons') {
+    throw new Error('--variant applies to heroicons only')
+  }
+  if (options.variant && !heroiconsDirs[options.variant]) {
+    throw new Error(`--variant is one of ${Object.keys(heroiconsDirs).join(', ')}`)
+  }
+
+  // `Search=magnifying-glass` keeps the component name while drawing another
+  // source icon, so a set can switch libraries without touching its imports
+  const icons = [...new Set(options.names)].map((arg) => {
+    const [name, source = name] = arg.split('=')
+    const isKebab = (x: string) => /^[a-z0-9-]+$/.test(x)
+    const isPascal = (x: string) => /^[A-Z][A-Za-z0-9]*$/.test(x)
+    if (
+      !(isKebab(name) || isPascal(name)) ||
+      !(isKebab(source) || isPascal(source)) ||
+      (source !== name && !isPascal(name))
+    ) {
+      throw new Error(
+        `icon names are PascalCase, kebab-case, or Name=source-name, got "${arg}"`
+      )
+    }
+    return {
+      componentName: isKebab(name) ? kebabToPascal(name) : name,
+      file: isKebab(source) ? source : pascalToKebab(stripIconSuffix(source)),
+    }
+  })
+
+  const loaded = await Promise.all(
+    icons.map(async (icon) => {
+      if (localDir) {
+        const file = path.join(localDir, `${icon.file}.svg`)
+        return { ...icon, svg: existsSync(file) ? await readFile(file, 'utf-8') : null }
+      }
+      const url = sourceUrl(from as Library, icon.file, options)
+      const response = await fetch(url)
+      if (response.status === 404) return { ...icon, svg: null }
+      if (!response.ok) {
+        throw new Error(`fetching ${url} failed (${response.status})`)
+      }
+      return { ...icon, svg: await response.text() }
+    })
+  )
+
+  const unknown = loaded.filter((icon) => icon.svg === null)
+  if (unknown.length) {
+    throw new Error(
+      `unknown ${from} icon${unknown.length === 1 ? '' : 's'}: ${unknown
+        .map((icon) => `${icon.componentName} (${icon.file}.svg)`)
+        .join(', ')}`
+    )
+  }
+
+  await mkdir(outDir, { recursive: true })
+  for (const icon of loaded) {
+    const file = path.join(outDir, `${icon.componentName}.tsx`)
+    await writeFile(file, svgToComponent(icon.componentName, icon.svg!))
+    console.info(`${chalk.green('wrote')} ${path.relative(cwd, file)}`)
+  }
+
+  // the index lists every component in the dir, so repeated adds accumulate
+  const components = (await readdir(outDir))
+    .filter((file) => file.endsWith('.tsx'))
+    .map((file) => file.slice(0, -'.tsx'.length))
+    .sort()
+  await writeFile(
+    path.join(outDir, 'index.ts'),
+    components.map((name) => `export { ${name} } from './${name}'`).join('\n') + '\n'
+  )
+  console.info(
+    `${chalk.green('wrote')} ${path.relative(cwd, path.join(outDir, 'index.ts'))} (${components.length} icons)`
+  )
+}
+
+function sourceUrl(library: Library, file: string, options: AddIconsOptions) {
+  switch (library) {
+    case 'lucide':
+      return `https://unpkg.com/lucide-static@${LUCIDE_VERSION}/icons/${file}.svg`
+    case 'heroicons':
+      return `https://unpkg.com/heroicons@${HEROICONS_VERSION}/${heroiconsDirs[options.variant ?? 'outline']}/${file}.svg`
+    case 'phosphor': {
+      const weight = options.weight ?? 'regular'
+      const name = weight === 'regular' ? file : `${file}-${weight}`
+      return `https://unpkg.com/@phosphor-icons/core@${PHOSPHOR_VERSION}/assets/${weight}/${name}.svg`
+    }
+  }
+}
+
+function pascalToKebab(name: string) {
+  return name
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Za-z])(\d)/g, '$1-$2')
+    .toLowerCase()
+}
+
+function kebabToPascal(name: string) {
+  return name
+    .split('-')
+    .map((part) => (part ? part[0].toUpperCase() + part.slice(1) : part))
+    .join('')
+}
+
+// one trailing Icon is dropped for the lookup only: HeartIcon finds heart
+function stripIconSuffix(name: string) {
+  return name.endsWith('Icon') && name.length > 4 ? name.slice(0, -4) : name
+}
+
+type SvgNode = {
+  tag: string
+  attrs: [name: string, value: string][]
+  children: SvgNode[]
+}
+
+// upstream icon files are machine-written and shallow; this handles nesting so
+// a grouped source never drops shapes
+function parseSvg(svg: string): SvgNode {
+  const root: SvgNode = { tag: '', attrs: [], children: [] }
+  const stack = [root]
+  const tagPattern = /<(\/?)([A-Za-z][A-Za-z0-9]*)((?:"[^"]*"|'[^']*'|[^>"'])*?)(\/?)>/g
+  for (const [, closing, tag, attrText, selfClose] of svg
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .matchAll(tagPattern)) {
+    if (closing) {
+      if (stack.pop()?.tag !== tag) throw new Error(`mismatched </${tag}> in svg`)
+      continue
+    }
+    const node: SvgNode = { tag, attrs: [], children: [] }
+    for (const [, name, double, single] of attrText.matchAll(
+      /([A-Za-z_:][A-Za-z0-9_.:-]*)\s*=\s*(?:"([^"]*)"|'([^']*)')/g
+    )) {
+      node.attrs.push([name, double ?? single])
+    }
+    stack[stack.length - 1].children.push(node)
+    if (!selfClose) stack.push(node)
+  }
+  const svgNode = root.children.find((node) => node.tag === 'svg')
+  if (stack.length !== 1 || !svgNode)
+    throw new Error('svg source has no complete <svg> root')
+  return svgNode
+}
+
+const elements: Record<string, string> = {
+  path: 'Path',
+  circle: 'Circle',
+  ellipse: 'Ellipse',
+  line: 'Line',
+  polyline: 'Polyline',
+  polygon: 'Polygon',
+  rect: 'Rect',
+  g: 'G',
+  defs: 'Defs',
+  clipPath: 'ClipPath',
+  linearGradient: 'LinearGradient',
+  radialGradient: 'RadialGradient',
+  stop: 'Stop',
+  use: 'Use',
+}
+
+// globals a component name would shadow; oxlint/eslint flag these
+const restrictedNames = ['Infinity', 'NaN', 'undefined']
+
+export function svgToComponent(name: string, svg: string) {
+  const root = parseSvg(svg)
+  const used = new Set<string>()
+  const ref = (element: string) => (element === name ? `_${element}` : element)
+
+  const jsxAttr = (attrName: string, value: string) => {
+    if (attrName === 'style') {
+      throw new Error(`${name}: style attributes have no react-native-svg equivalent`)
+    }
+    const prop =
+      attrName === 'xlink:href'
+        ? 'href'
+        : attrName.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase())
+    return value === 'currentColor' ? `${prop}={color}` : `${prop}="${value}"`
+  }
+  const keepAttr = ([attrName]: [string, string]) =>
+    !(
+      attrName === 'xmlns' ||
+      attrName.startsWith('xmlns:') ||
+      attrName === 'class' ||
+      attrName === 'version' ||
+      attrName.startsWith('data-') ||
+      attrName.startsWith('aria-')
+    )
+
+  const rootAttrs = root.attrs.filter(keepAttr)
+  const viewBox = rootAttrs.find(([attrName]) => attrName === 'viewBox')?.[1]
+  if (!viewBox) throw new Error(`${name}: svg source has no viewBox`)
+  // native draws children with their own stroke, so a currentColor stroke on
+  // the root is repeated on each child that has none
+  const rootStroke = rootAttrs.some(
+    ([attrName, value]) => attrName === 'stroke' && value === 'currentColor'
+  )
+  const strokeWidth = rootAttrs.find(([attrName]) => attrName === 'stroke-width')?.[1]
+
+  const emit = (node: SvgNode, indent: string): string => {
+    const element = elements[node.tag]
+    if (!element) throw new Error(`${name}: unsupported svg element <${node.tag}>`)
+    used.add(element)
+    const attrs = node.attrs.filter(keepAttr).map(([n, v]) => jsxAttr(n, v))
+    if (rootStroke && !node.attrs.some(([n]) => n === 'stroke') && node.tag !== 'g') {
+      attrs.push('stroke={color}')
+    }
+    const open = `${indent}<${ref(element)}${attrs.map((attr) => ` ${attr}`).join('')}`
+    if (!node.children.length) return `${open} />`
+    return `${open}>\n${node.children.map((child) => emit(child, `${indent}  `)).join('\n')}\n${indent}</${ref(element)}>`
+  }
+
+  const children = root.children.map((child) => emit(child, '        '))
+  if (!children.length) throw new Error(`${name}: svg source draws nothing`)
+
+  const svgAttrs = [
+    'width={size}',
+    'height={size}',
+    ...rootAttrs
+      .filter(([attrName]) => attrName !== 'width' && attrName !== 'height')
+      .map(([attrName, value]) => jsxAttr(attrName, value)),
+    '{...otherProps}',
+  ]
+  const imports = [...used]
+    .sort()
+    .map((element) => (element === name ? `${element} as _${element}` : element))
+  const themedOptions =
+    strokeWidth && strokeWidth !== '2' ? `, { defaultStrokeWidth: ${strokeWidth} }` : ''
+
+  // the explicit component type lets isolatedDeclarations builds emit types.
+  // themed resolves theme and token values before the inner component runs, so
+  // it reads plain svg values rather than the app's token-typed IconProps
+  return `${restrictedNames.includes(name) ? '/* eslint-disable no-shadow-restricted-names */\n' : ''}import { memo, type JSX } from 'react'
+import { Svg, ${imports.join(', ')}, type SvgProps } from 'react-native-svg'
+import { themed, type IconProps } from '@tamagui/helpers-icon'
+
+export const ${name}: (props: IconProps) => JSX.Element = themed(
+  memo(function ${name}(props: IconProps) {
+    const { color = 'black', size = 24, ...otherProps } = props as SvgProps & {
+      color?: string
+      size?: number
+    }
+    return (
+      <Svg
+${svgAttrs.map((attr) => `        ${attr}`).join('\n')}
+      >
+${children.join('\n')}
+      </Svg>
+    )
+  })${themedOptions}
+)
+`
+}

package/src/preview-theme.ts

@@ -0,0 +1,54 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import chalk from 'chalk'
+import open from 'opener'
+
+export interface PreviewThemeOptions {
+  theme?: string
+  themeArg?: string
+  url?: string
+  print?: boolean
+}
+
+export async function previewTheme(options: PreviewThemeOptions) {
+  const themeInput = (options.theme || options.themeArg || '').trim()
+  let themeData: any = null
+
+  if (themeInput) {
+    if (themeInput.startsWith('{') || themeInput.startsWith('[')) {
+      try {
+        themeData = JSON.parse(themeInput)
+      } catch (err: any) {
+        throw new Error(`Invalid JSON provided for --theme: ${err.message}`)
+      }
+    } else {
+      const filePath = path.resolve(process.cwd(), themeInput)
+      if (!fs.existsSync(filePath)) {
+        throw new Error(`Theme file not found at: ${filePath}`)
+      }
+      try {
+        const fileContent = fs.readFileSync(filePath, 'utf-8')
+        themeData = JSON.parse(fileContent)
+      } catch (err: any) {
+        throw new Error(`Failed to read theme file ${filePath}: ${err.message}`)
+      }
+    }
+  }
+
+  const baseUrl = options.url || 'https://tamagui.dev/theme'
+  let targetUrl = baseUrl
+
+  if (themeData) {
+    const jsonStr = JSON.stringify(themeData)
+    const base64 = Buffer.from(jsonStr).toString('base64')
+    targetUrl = `${baseUrl}#theme=${encodeURIComponent(base64)}`
+  }
+
+  if (options.print) {
+    console.info(targetUrl)
+    return
+  }
+
+  console.info(chalk.green(`Opening theme preview:`), targetUrl)
+  open(targetUrl)
+}

package/types/icons.d.ts

@@ -0,0 +1,14 @@
+export declare const LUCIDE_VERSION = "1.49.0";
+export declare const HEROICONS_VERSION = "2.2.0";
+export declare const PHOSPHOR_VERSION = "2.1.1";
+export type AddIconsOptions = {
+    names: string[];
+    from?: string;
+    weight?: string;
+    variant?: string;
+    out?: string;
+    cwd?: string;
+};
+export declare function addIcons(options: AddIconsOptions): Promise<void>;
+export declare function svgToComponent(name: string, svg: string): string;
+//# sourceMappingURL=icons.d.ts.map

package/types/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../src/icons.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc,WAAW,CAAA;AACtC,eAAO,MAAM,iBAAiB,UAAU,CAAA;AACxC,eAAO,MAAM,gBAAgB,UAAU,CAAA;AAcvC,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAA;IAEf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,CAAA;AAED,wBAAsB,QAAQ,CAAC,OAAO,EAAE,eAAe,iBA4FtD;AA0FD,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,UAwFvD"}

package/types/preview-theme.d.ts

@@ -0,0 +1,8 @@
+export interface PreviewThemeOptions {
+    theme?: string;
+    themeArg?: string;
+    url?: string;
+    print?: boolean;
+}
+export declare function previewTheme(options: PreviewThemeOptions): Promise<void>;
+//# sourceMappingURL=preview-theme.d.ts.map

package/types/preview-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview-theme.d.ts","sourceRoot":"","sources":["../src/preview-theme.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAsB,YAAY,CAAC,OAAO,EAAE,mBAAmB,iBAyC9D"}