@icones/vue 0.0.1

package/README.md

@@ -0,0 +1,33 @@
+# @icones/vue
+
+Vue 3.5+ 图标组件，支持原生 SVG 属性/事件、响应式配置、异步数据、SSR 和 Vite 静态提取。
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import { Icon, IconConfig } from "@icones/vue"
+const selected = ref(false)
+</script>
+
+<template>
+  <IconConfig default-size="lg">
+    <Icon
+      name="tabler:star"
+      alt-name="tabler:heart"
+      :show-alt="selected"
+      aria-label="收藏"
+      @click="selected = !selected"
+    >
+      <template #fallback>加载中</template>
+    </Icon>
+  </IconConfig>
+</template>
+```
+
+未配置 `api` 时，明确的 `set:name` 会从 `https://<set>.icones.go-slim.dev/data/<name>.json` 加载。Vite 静态收集和本地 `sources` 优先；使用 `:api="false"` 可关闭网络回退，也可通过 `api` 覆盖为自建数据或 symbol 服务。
+
+`IconConfig`（别名 `IconProvider`）可嵌套，支持 `sources`、`api`、`store`、尺寸与线宽配置。只覆盖外观的子配置共享父缓存。`Icon` 也可传入 `scope={createIconScope(...)}`；`useIconScope()` 返回当前配置的只读 ref。备用内容可用 `fallback` 字符串或具名 slot，未提供时显示空 SVG 和 `data-state`。
+
+SSR 不会在渲染期间自动请求网络。使用内联数据、symbol 引用、Vite 静态收集，或每请求创建 store 并预加载；客户端使用相同数据进行 hydration。
+
+开发：`bun run --cwd packages/vue play`。测试：`bun run --cwd packages/vue test`（需 Chrome）。完整 API 见[项目文档](../../README.md)。

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import { SVGAttributes, ShallowRef } from "vue";
+import { IconOptions, IconScope, IconScopeOptions } from "@icones/core";
+export * from "@icones/core";
+//#region src/icon.d.ts
+type IconProps = IconOptions & Omit<SVGAttributes, keyof IconOptions | "innerHTML"> & {
+  scope?: IconScope;
+  fallback?: string;
+};
+declare const Icon: import("vue").DefineSetupFnComponent<IconProps, {}, {}, IconProps & {}, import("vue").PublicProps>;
+declare const IconConfig: import("vue").DefineSetupFnComponent<IconScopeOptions, {}, {}, import("@icones/core").IconAppearance & Pick<import("@icones/core").IconStoreOptions, "sources" | "api"> & {
+  store?: import("@icones/core").IconStore;
+} & {}, import("vue").PublicProps>;
+declare function useIconScope(): Readonly<ShallowRef<IconScope>>;
+//#endregion
+export { Icon, IconConfig, IconConfig as IconProvider, type IconProps, useIconScope };

package/dist/index.js

@@ -0,0 +1,82 @@
+import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, shallowRef, useId, watchEffect } from "vue";
+import { createIconController, createIconScopeResolver, defaultIconScope, iconOptionKeys, renderIcon } from "@icones/core";
+export * from "@icones/core";
+//#region src/icon.ts
+const scopeKey = Symbol("icones.scope");
+const booleanProp = {
+	type: Boolean,
+	default: void 0
+};
+const iconProps = {
+	...Object.fromEntries(iconOptionKeys.filter((key) => !key.startsWith("aria-")).map((key) => [key, null])),
+	hFlip: booleanProp,
+	vFlip: booleanProp,
+	showAlt: booleanProp,
+	absoluteStrokeWidth: booleanProp,
+	scope: null,
+	fallback: String
+};
+const Icon = defineComponent((props, { attrs, slots }) => {
+	const parent = inject(scopeKey, shallowRef(defaultIconScope()));
+	const controller = createIconController(props, props.scope ?? parent.value);
+	const state = shallowRef(controller.getState());
+	const id = useId();
+	let unsubscribe;
+	watchEffect(() => {
+		controller.update({ ...props }, props.scope ?? parent.value);
+		state.value = controller.getState();
+	});
+	onMounted(() => {
+		unsubscribe = controller.subscribe(() => {
+			state.value = controller.getState();
+		});
+		state.value = controller.getState();
+	});
+	onBeforeUnmount(() => {
+		unsubscribe?.();
+		controller.destroy();
+	});
+	return () => {
+		const result = renderIcon(state.value, {
+			...props,
+			...attrs
+		}, (props.scope ?? parent.value).appearance, id);
+		if (!result.available && (slots.fallback || props.fallback !== void 0)) return slots.fallback?.() ?? props.fallback;
+		return h("svg", {
+			...attrs,
+			...result.attributes,
+			style: [result.style, attrs.style],
+			innerHTML: result.body
+		});
+	};
+}, {
+	name: "Icon",
+	inheritAttrs: false,
+	props: iconProps
+});
+const IconConfig = defineComponent((props, { slots }) => {
+	const parent = inject(scopeKey, shallowRef(defaultIconScope()));
+	const resolveScope = createIconScopeResolver();
+	const scope = computed(() => resolveScope({ ...props }, parent.value));
+	provide(scopeKey, scope);
+	return () => slots.default?.();
+}, {
+	name: "IconConfig",
+	props: {
+		sizeValues: null,
+		defaultSize: null,
+		strokeWidth: null,
+		absoluteStrokeWidth: {
+			type: [Boolean, Object],
+			default: void 0
+		},
+		sources: null,
+		api: null,
+		store: null
+	}
+});
+function useIconScope() {
+	return inject(scopeKey, shallowRef(defaultIconScope()));
+}
+//#endregion
+export { Icon, IconConfig, IconConfig as IconProvider, useIconScope };

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@icones/vue",
+  "version": "0.0.1",
+  "type": "module",
+  "sideEffects": false,
+  "homepage": "https://icones.go-slim.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tint/icones.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/tint/icones/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@icones/core": "^0.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}