zova-module-a-icon 5.0.0 → 5.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016-present Zova
+
+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/dist/index.js

@@ -0,0 +1,369 @@
+import { BeanBase, BeanControllerBase, BeanInfo, BeanScopeBase, BeanSimple, StateLock, Use, convertToUnit, isHttpUrl, prepareComponentOptions, sys, useController } from "zova";
+import { createVNode, defineComponent, reactive, ref, watchEffect } from "vue";
+import { Controller, Scope, Sys, Tool } from "zova-module-a-bean";
+//#region src/lib/iconGroup.ts
+var IconGroup = class {
+	constructor() {
+		this.svg = void 0;
+		this.loaded = void 0;
+		this.loaded = StateLock.create();
+	}
+};
+//#endregion
+//#region src/bean/sys.icon.ts
+var _dec$3, _dec2$3, _class$3;
+var XMLNS = "http://www.w3.org/2000/svg";
+var XMLNS_LINK = "http://www.w3.org/1999/xlink";
+var SysIcon = (_dec$3 = Sys(), _dec2$3 = BeanInfo({ module: "a-icon" }), _dec$3(_class$3 = _dec2$3(_class$3 = class SysIcon extends BeanBase {
+	constructor(...args) {
+		super(...args);
+		this._iconSymbols = reactive({});
+		this._iconMoudles = {};
+	}
+	parseIconInfoSync(iconName) {
+		const meta = this.parseIconMeta(iconName);
+		if (!meta) return void 0;
+		const iconEmpty = {
+			meta,
+			symbolId: ""
+		};
+		const iconOk = {
+			meta,
+			symbolId: meta.symbolId
+		};
+		if (this._iconSymbols[meta.fullName]) return iconOk;
+		if (process.env.CLIENT) {
+			if (document.getElementById(meta.symbolId)) return iconOk;
+		}
+		if (this._iconSymbols[meta.fullName] === void 0) {
+			this.parseIconInfo(iconName);
+			return iconEmpty;
+		} else if (this._iconSymbols[meta.fullName] === "") return iconEmpty;
+	}
+	async parseIconInfo(iconName) {
+		const meta = this.parseIconMeta(iconName);
+		if (!meta) return void 0;
+		if (this._iconSymbols[meta.fullName]) return {
+			meta,
+			symbolId: this._iconSymbols[meta.fullName]
+		};
+		this._iconSymbols[meta.fullName] = "";
+		if (!await this.parseIconGroup(meta.module, meta.group)) return void 0;
+		this._injectIconClient(meta);
+		return {
+			meta,
+			symbolId: this._iconSymbols[meta.fullName] = meta.symbolId
+		};
+	}
+	async parseIconGroup(moduleName, groupName) {
+		const iconModule = this.getIconModule(moduleName);
+		if (iconModule[groupName]) {
+			await iconModule[groupName].loaded.wait();
+			return iconModule[groupName].svg;
+		}
+		iconModule[groupName] = new IconGroup();
+		const svg = await this._parseIconGroupInner(moduleName, groupName);
+		iconModule[groupName].svg = svg;
+		iconModule[groupName].loaded.touch();
+		return iconModule[groupName].svg;
+	}
+	async _parseIconGroupInner(moduleName, groupName) {
+		const module = await this.sys.meta.module.use(moduleName);
+		if (!module) return;
+		let groupUrl = module.resource.icons[groupName];
+		if (!groupUrl) return;
+		if (groupUrl.startsWith("data:image/svg+xml")) throw new Error("inline svg not supported");
+		let svg;
+		if (process.env.SERVER) {
+			groupUrl = this.sys.util.getPagePathFromAbsoluteUrl(groupUrl);
+			const path = await import("node:path");
+			const fs = await import("node:fs/promises");
+			let filePath;
+			if (process.env.DEV) filePath = path.join(process.cwd(), groupUrl);
+			else {
+				const { fileURLToPath } = await import("node:url");
+				const rootFolder = fileURLToPath(new URL(
+					/* @vite-ignore */
+					".",
+					import.meta.url
+				));
+				filePath = path.join(rootFolder, "client", groupUrl);
+			}
+			svg = await fs.readFile(filePath, { encoding: "utf8" });
+		} else {
+			const res = await fetch(groupUrl);
+			if (!res.ok) return;
+			svg = await res.text();
+		}
+		return svg;
+	}
+	_injectIconClient(meta) {
+		if (process.env.SERVER) return;
+		const iconGroup = this.getIconModule(meta.module)[meta.group];
+		let domContainer = document.getElementById("zova-svg-container");
+		if (!domContainer) {
+			domContainer = document.createElement("div");
+			domContainer.style.position = "absolute";
+			domContainer.style.width = "0";
+			domContainer.style.height = "0";
+			domContainer.style.display = "none";
+			domContainer.id = "zova-svg-container";
+			document.body.appendChild(domContainer);
+		}
+		let domModule = document.getElementById(`zova-svg-module-${meta.module}`);
+		if (!domModule) {
+			domModule = document.createElement("div");
+			domModule.id = `zova-svg-module-${meta.module}`;
+			domContainer.appendChild(domModule);
+		}
+		let domGroup = document.getElementById(`zova-svg-group-${meta.module}-${meta.group}`);
+		if (!domGroup) {
+			domGroup = document.createElementNS(XMLNS, "svg");
+			domGroup.id = `zova-svg-group-${meta.module}-${meta.group}`;
+			domGroup.setAttribute("xmlns", XMLNS);
+			domGroup.setAttribute("xmlns:link", XMLNS_LINK);
+			domModule.appendChild(domGroup);
+		}
+		if (!document.getElementById(meta.symbolId)) {
+			const iconContent = this.extractIconContent(iconGroup.svg, meta.symbolId);
+			if (iconContent) domGroup.insertAdjacentHTML("beforeend", iconContent);
+		}
+	}
+	extractIconContent(svg, symbolId) {
+		if (!svg) return void 0;
+		let pos = svg.indexOf(`'${symbolId}'`);
+		if (pos === -1) pos = svg.indexOf(`"${symbolId}"`);
+		if (pos === -1) return void 0;
+		const posB = svg.indexOf("</symbol>", pos);
+		const posA = svg.lastIndexOf("<symbol", pos);
+		return svg.substring(posA, posB + 9);
+	}
+	getIconModule(moduleName) {
+		if (!this._iconMoudles[moduleName]) this._iconMoudles[moduleName] = {};
+		return this._iconMoudles[moduleName];
+	}
+	parseIconMeta(iconName) {
+		if (!iconName) return;
+		const parts = iconName.split(":");
+		if (parts.length !== 3) return;
+		const module = parts[0] || this.scope.config.defaultModule;
+		const group = parts[1] || "default";
+		const name = parts[2] || "";
+		if (!module.includes("-") || !name) return;
+		return {
+			module,
+			group,
+			name,
+			fullName: this._getFullName(module, group, name),
+			symbolId: this._getSymbolId(module, group, name)
+		};
+	}
+	_getSymbolId(module, group, name) {
+		return `zova-svg-icon-${module}-${group}-${name}`;
+	}
+	_getFullName(module, group, name) {
+		return `${module}:${group}:${name}`;
+	}
+}) || _class$3) || _class$3);
+//#endregion
+//#region src/bean/tool.icon.ts
+var _dec$2, _dec2$2, _dec3$1, _dec4$1, _class$2, _class2$1, _descriptor$1;
+function _initializerDefineProperty$1(e, i, r, l) {
+	r && Object.defineProperty(e, i, {
+		enumerable: r.enumerable,
+		configurable: r.configurable,
+		writable: r.writable,
+		value: r.initializer ? r.initializer.call(l) : void 0
+	});
+}
+function _applyDecoratedDescriptor$1(i, e, r, n, l) {
+	var a = {};
+	return Object.keys(n).forEach(function(i) {
+		a[i] = n[i];
+	}), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function(r, n) {
+		return n(i, e, r) || r;
+	}, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a;
+}
+var ToolIcon = (_dec$2 = Tool(), _dec2$2 = BeanInfo({ module: "a-icon" }), _dec3$1 = Use(), _dec4$1 = Reflect.metadata("design:type", typeof SysIcon === "undefined" ? Object : SysIcon), _dec$2(_class$2 = _dec2$2(_class$2 = (_class2$1 = class ToolIcon extends BeanBase {
+	constructor(...args) {
+		super(...args);
+		this._iconSSR = {};
+		_initializerDefineProperty$1(this, "$$sysIcon", _descriptor$1, this);
+	}
+	async __init__() {
+		if (process.env.SERVER) this.ctx.meta.$ssr.context.onRendered((err) => {
+			if (err) return;
+			this._onRendered();
+		});
+	}
+	async parseIconInfo(iconName) {
+		const iconInfo = await this.$$sysIcon.parseIconInfo(iconName);
+		if (!iconInfo) return iconInfo;
+		this._injectIconSSR(iconInfo.meta);
+		return iconInfo;
+	}
+	_onRendered() {
+		this.ctx.meta.$ssr.context._meta.bodyTags += this._renderSSRContainer();
+	}
+	_renderSSRContainer() {
+		return `<div id="zova-svg-container" style="position: absolute; width: 0px; height: 0px; display: none;">${this._renderSSRModules()}</div>`;
+	}
+	_renderSSRModules() {
+		return Object.keys(this._iconSSR).map((moduleName) => {
+			return `<div id="${`zova-svg-module-${moduleName}`}">${this._renderSSRGroups(this._iconSSR[moduleName], moduleName)}</div>`;
+		}).join("");
+	}
+	_renderSSRGroups(iconSSRGroups, moduleName) {
+		return Object.keys(iconSSRGroups).map((groupName) => {
+			return `<svg id="${`zova-svg-group-${moduleName}-${groupName}`}" xmlns="http://www.w3.org/2000/svg" xmlns:link="http://www.w3.org/1999/xlink">${this._renderSSRIcons(iconSSRGroups[groupName])}</svg>`;
+		}).join("");
+	}
+	_renderSSRIcons(iconSSRIcons) {
+		return Object.keys(iconSSRIcons).map((symbolId) => {
+			return iconSSRIcons[symbolId];
+		}).join("");
+	}
+	_injectIconSSR(meta) {
+		if (process.env.CLIENT) return;
+		const iconGroup = this.$$sysIcon.getIconModule(meta.module)[meta.group];
+		if (!this._iconSSR[meta.module]) this._iconSSR[meta.module] = {};
+		if (!this._iconSSR[meta.module][meta.group]) this._iconSSR[meta.module][meta.group] = {};
+		this._iconSSR[meta.module][meta.group][meta.symbolId] = this.$$sysIcon.extractIconContent(iconGroup.svg, meta.symbolId);
+	}
+}, _descriptor$1 = _applyDecoratedDescriptor$1(_class2$1.prototype, "$$sysIcon", [_dec3$1, _dec4$1], {
+	configurable: true,
+	enumerable: true,
+	writable: true,
+	initializer: null
+}), _class2$1)) || _class$2) || _class$2);
+//#endregion
+//#region src/lib/useZovaIcon.ts
+function $getZovaIcon(iconName) {
+	return sys.meta.$icon.parseIconInfoSync(iconName);
+}
+function $useZovaIcon(iconGetter) {
+	const iconInfo = ref();
+	watchEffect(() => {
+		iconInfo.value = $getZovaIcon(iconGetter());
+	});
+	return { iconInfo };
+}
+//#endregion
+//#region src/component/icon/controller.tsx
+var _dec$1, _dec2$1, _dec3, _dec4, _class$1, _class2, _descriptor, _ControllerIcon;
+function _initializerDefineProperty(e, i, r, l) {
+	r && Object.defineProperty(e, i, {
+		enumerable: r.enumerable,
+		configurable: r.configurable,
+		writable: r.writable,
+		value: r.initializer ? r.initializer.call(l) : void 0
+	});
+}
+function _applyDecoratedDescriptor(i, e, r, n, l) {
+	var a = {};
+	return Object.keys(n).forEach(function(i) {
+		a[i] = n[i];
+	}), a.enumerable = !!a.enumerable, a.configurable = !!a.configurable, ("value" in a || a.initializer) && (a.writable = !0), a = r.slice().reverse().reduce(function(r, n) {
+		return n(i, e, r) || r;
+	}, a), l && void 0 !== a.initializer && (a.value = a.initializer ? a.initializer.call(l) : void 0, a.initializer = void 0), void 0 === a.initializer ? (Object.defineProperty(i, e, a), null) : a;
+}
+var ControllerIcon = (_dec$1 = Controller(), _dec2$1 = BeanInfo({ module: "a-icon" }), _dec3 = Use(), _dec4 = Reflect.metadata("design:type", typeof ToolIcon === "undefined" ? Object : ToolIcon), _dec$1(_class$1 = _dec2$1(_class$1 = (_class2 = (_ControllerIcon = class ControllerIcon extends BeanControllerBase {
+	constructor(...args) {
+		super(...args);
+		_initializerDefineProperty(this, "$$toolIcon", _descriptor, this);
+	}
+	async __init__() {
+		await this._load();
+	}
+	async _load() {
+		const name = this.$props.name;
+		if (name === "none" || !name) return;
+		if (isHttpUrl(name)) return;
+		const promise = this.$$toolIcon.parseIconInfo(name);
+		if (process.env.SSR) await promise;
+	}
+	render() {
+		const defaultSize = this.scope.config.icon.size;
+		const width = this.$props.width ?? this.$props.height ?? defaultSize;
+		const height = this.$props.height ?? this.$props.width ?? defaultSize;
+		const href = this._parseHref();
+		if (isHttpUrl(href) && !href?.endsWith(".svg")) return createVNode("img", {
+			"class": "zova-icon__img",
+			"style": {
+				width: convertToUnit(width),
+				height: convertToUnit(height)
+			},
+			"src": href
+		}, null);
+		return createVNode("svg", {
+			"class": "zova-icon__svg",
+			"xmlns": "http://www.w3.org/2000/svg",
+			"viewBox": "0 0 24 24",
+			"fill": "currentColor",
+			"role": "img",
+			"aria-hidden": "true",
+			"width": width,
+			"height": height,
+			"style": { color: this.$props.color }
+		}, [createVNode("use", { "xlink:href": href }, null)]);
+	}
+	_parseHref() {
+		let href = this.$props.href;
+		const name = this.$props.name;
+		if (href) return href;
+		if (isHttpUrl(name)) return name;
+		href = `#${$getZovaIcon(name)?.symbolId || ""}`;
+		return href;
+	}
+}, _ControllerIcon.$propsDefault = {}, _ControllerIcon), _descriptor = _applyDecoratedDescriptor(_class2.prototype, "$$toolIcon", [_dec3, _dec4], {
+	configurable: true,
+	enumerable: true,
+	writable: true,
+	initializer: null
+}), _class2)) || _class$1) || _class$1);
+//#endregion
+//#region src/.metadata/component/icon.ts
+var ZIcon = defineComponent((_props) => {
+	useController(ControllerIcon, void 0, void 0);
+	return () => {};
+}, prepareComponentOptions());
+//#endregion
+//#region src/config/config.ts
+var config = (_sys) => {
+	return {
+		defaultModule: "home-icon",
+		icon: { size: 24 }
+	};
+};
+//#endregion
+//#region src/monkeySys.ts
+var MonkeySys = class extends BeanSimple {
+	async sysInitialize() {
+		this.sys.meta.$icon = await this.bean._getBean(SysIcon, false);
+	}
+};
+//#endregion
+//#region src/.metadata/index.ts
+/** monkeySys: end */
+/** scope: begin */
+var _dec, _dec2, _class;
+var components = { "icon": ZIcon };
+var ScopeModuleAIcon = (_dec = Scope(), _dec2 = BeanInfo({ module: "a-icon" }), _dec(_class = _dec2(_class = class ScopeModuleAIcon extends BeanScopeBase {}) || _class) || _class);
+/** scope: end */
+//#endregion
+//#region src/lib/utils.ts
+function $icon(name, size, color) {
+	return createVNode(ZIcon, {
+		name,
+		color,
+		width: size,
+		height: size
+	});
+}
+function $iconName(name) {
+	return name;
+}
+//#endregion
+export { $getZovaIcon, $icon, $iconName, $useZovaIcon, ControllerIcon, IconGroup, MonkeySys, ScopeModuleAIcon, SysIcon, ToolIcon, ZIcon, components, config };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BeanControllerBase","convertToUnit","isHttpUrl","Use","Controller","ToolIcon","$getZovaIcon","ControllerIcon","_dec","_dec2","__z_BeanInfo","module","_dec3","_dec4","Reflect","metadata","Object","_class","_class2","_ControllerIcon","constructor","args","_initializerDefineProperty","_descriptor","__init__","_load","name","$props","promise","$$toolIcon","parseIconInfo","process","env","SSR","render","defaultSize","scope","config","icon","size","width","height","href","_parseHref","endsWith","_createVNode","color","iconInfo","symbolId","$propsDefault","_applyDecoratedDescriptor","prototype","configurable","enumerable","writable","initializer"],"sources":["../src/lib/iconGroup.ts","../src/bean/sys.icon.ts","../src/bean/tool.icon.ts","../src/lib/useZovaIcon.ts","../src/component/icon/controller.tsx","../src/.metadata/component/icon.ts","../src/config/config.ts","../src/monkeySys.ts","../src/.metadata/index.ts","../src/lib/utils.ts"],"sourcesContent":["import { StateLock } from 'zova';\n\nexport class IconGroup {\n  public svg: string | undefined;\n  public loaded: StateLock;\n\n  constructor() {\n    this.loaded = StateLock.create();\n  }\n}\n","import { reactive } from 'vue';\nimport { BeanBase } from 'zova';\nimport { Sys } from 'zova-module-a-bean';\n\nimport { IconGroup } from '../lib/iconGroup.js';\nimport { IIconInfo, IIconMeta, TypeIconModules, TypeIconSymbols } from '../types/icon.js';\n\nconst XMLNS = 'http://www.w3.org/2000/svg';\nconst XMLNS_LINK = 'http://www.w3.org/1999/xlink';\n\n@Sys()\nexport class SysIcon extends BeanBase {\n  protected _iconSymbols: TypeIconSymbols = reactive({});\n  protected _iconMoudles: TypeIconModules = {};\n\n  // undefined: ignore\n  // '': empty icon\n  parseIconInfoSync(iconName?: string): IIconInfo | undefined {\n    // parts\n    const meta = this.parseIconMeta(iconName);\n    if (!meta) return undefined;\n    // empty\n    const iconEmpty = { meta, symbolId: '' };\n    // ok\n    const iconOk = { meta, symbolId: meta.symbolId };\n    // check if exists\n    if (this._iconSymbols[meta.fullName]) return iconOk;\n    // check if dom exists\n    if (process.env.CLIENT) {\n      const domIcon = document.getElementById(meta.symbolId) as unknown as SVGElement;\n      if (domIcon) return iconOk;\n    }\n    // check if exists\n    if (this._iconSymbols[meta.fullName] === undefined) {\n      this.parseIconInfo(iconName);\n      return iconEmpty;\n    } else if (this._iconSymbols[meta.fullName] === '') {\n      return iconEmpty;\n    }\n  }\n\n  async parseIconInfo(iconName?: string): Promise<IIconInfo | undefined> {\n    // parts\n    const meta = this.parseIconMeta(iconName);\n    if (!meta) return undefined;\n    // check if exists\n    if (this._iconSymbols[meta.fullName]) {\n      return { meta, symbolId: this._iconSymbols[meta.fullName] };\n    }\n    // pre set\n    this._iconSymbols[meta.fullName] = '';\n    // icon group\n    const iconGroup = await this.parseIconGroup(meta.module, meta.group);\n    if (!iconGroup) return undefined;\n    // icon inject\n    this._injectIconClient(meta);\n    const symbolId = (this._iconSymbols[meta.fullName] = meta.symbolId);\n    // ok\n    return { meta, symbolId };\n  }\n\n  public async parseIconGroup(moduleName: string, groupName: string): Promise<string | undefined> {\n    // check if exists\n    const iconModule = this.getIconModule(moduleName);\n    if (iconModule[groupName]) {\n      await iconModule[groupName].loaded.wait();\n      return iconModule[groupName].svg;\n    }\n    // record\n    iconModule[groupName] = new IconGroup();\n    // parse\n    const svg = await this._parseIconGroupInner(moduleName, groupName);\n    // touch\n    iconModule[groupName].svg = svg;\n    iconModule[groupName].loaded.touch();\n    // ok\n    return iconModule[groupName].svg;\n  }\n\n  private async _parseIconGroupInner(moduleName: string, groupName: string): Promise<string | undefined> {\n    // module\n    const module = await this.sys.meta.module.use(moduleName);\n    if (!module) return;\n    // icons\n    const icons = module.resource.icons;\n    let groupUrl = icons[groupName];\n    if (!groupUrl) return;\n    // inline\n    if (groupUrl.startsWith('data:image/svg+xml')) throw new Error('inline svg not supported');\n    // fetch\n    let svg;\n    if (process.env.SERVER) {\n      // publicPath\n      groupUrl = this.sys.util.getPagePathFromAbsoluteUrl(groupUrl);\n      const path = await import('node:path');\n      const fs = await import('node:fs/promises');\n      let filePath: string;\n      if (process.env.DEV) {\n        filePath = path.join(process.cwd(), groupUrl);\n      } else {\n        const { fileURLToPath } = await import('node:url');\n        const rootFolder = fileURLToPath(new URL(/* @vite-ignore */ '.', import.meta.url));\n        filePath = path.join(rootFolder, 'client', groupUrl);\n      }\n      svg = await fs.readFile(filePath, { encoding: 'utf8' });\n    } else {\n      const res = await fetch(groupUrl);\n      if (!res.ok) return;\n      svg = await res.text();\n    }\n    return svg;\n  }\n\n  private _injectIconClient(meta: IIconMeta) {\n    if (process.env.SERVER) return;\n    // client\n    const iconModule = this.getIconModule(meta.module);\n    const iconGroup = iconModule[meta.group];\n    // inject container\n    let domContainer = document.getElementById('zova-svg-container');\n    if (!domContainer) {\n      domContainer = document.createElement('div');\n      domContainer.style.position = 'absolute';\n      domContainer.style.width = '0';\n      domContainer.style.height = '0';\n      domContainer.style.display = 'none';\n      domContainer.id = 'zova-svg-container';\n      document.body.appendChild(domContainer);\n    }\n    // inject module\n    let domModule = document.getElementById(`zova-svg-module-${meta.module}`);\n    if (!domModule) {\n      domModule = document.createElement('div');\n      domModule.id = `zova-svg-module-${meta.module}`;\n      domContainer.appendChild(domModule);\n    }\n    // inject group\n    let domGroup = document.getElementById(`zova-svg-group-${meta.module}-${meta.group}`) as unknown as SVGSVGElement;\n    if (!domGroup) {\n      domGroup = document.createElementNS(XMLNS, 'svg');\n      domGroup.id = `zova-svg-group-${meta.module}-${meta.group}`;\n      domGroup.setAttribute('xmlns', XMLNS);\n      domGroup.setAttribute('xmlns:link', XMLNS_LINK);\n      domModule.appendChild(domGroup);\n    }\n    // inject icon\n    const domIcon = document.getElementById(meta.symbolId) as unknown as SVGElement;\n    if (!domIcon) {\n      const iconContent = this.extractIconContent(iconGroup.svg, meta.symbolId);\n      if (iconContent) {\n        domGroup.insertAdjacentHTML('beforeend', iconContent);\n      }\n    }\n  }\n\n  extractIconContent(svg: string | undefined, symbolId: string) {\n    if (!svg) return undefined;\n    let pos = svg.indexOf(`'${symbolId}'`);\n    if (pos === -1) pos = svg.indexOf(`\"${symbolId}\"`);\n    if (pos === -1) return undefined;\n    const posB = svg.indexOf('</symbol>', pos);\n    const posA = svg.lastIndexOf('<symbol', pos);\n    return svg.substring(posA, posB + '</symbol>'.length);\n    // const symbolPattern = new RegExp(`<symbol.*?id=['\"]${symbolId}['\"].*?>.*?</symbol>`);\n    // const matched = symbolPattern.exec(svg || '');\n    // return matched && matched[0];\n  }\n\n  getIconModule(moduleName: string) {\n    if (!this._iconMoudles[moduleName]) {\n      this._iconMoudles[moduleName] = {};\n    }\n    return this._iconMoudles[moduleName];\n  }\n\n  parseIconMeta(iconName?: string): IIconMeta | undefined {\n    if (!iconName) return;\n    // split module:group:name\n    const parts = iconName.split(':');\n    if (parts.length !== 3) {\n      return;\n    }\n    const module = parts[0] || this.scope.config.defaultModule;\n    const group = parts[1] || 'default';\n    const name = parts[2] || '';\n    if (!module.includes('-') || !name) {\n      return;\n    }\n    return {\n      module,\n      group,\n      name,\n      fullName: this._getFullName(module, group, name),\n      symbolId: this._getSymbolId(module, group, name),\n    };\n  }\n\n  private _getSymbolId(module: string, group: string, name: string) {\n    return `zova-svg-icon-${module}-${group}-${name}`;\n  }\n\n  private _getFullName(module: string, group: string, name: string) {\n    return `${module}:${group}:${name}`;\n  }\n}\n","import { BeanBase, Use } from 'zova';\nimport { Tool } from 'zova-module-a-bean';\n\nimport { IIconInfo, IIconMeta } from '../types/icon.js';\nimport { SysIcon } from './sys.icon.js';\n\n@Tool()\nexport class ToolIcon extends BeanBase {\n  private _iconSSR: Record<string, Record<string, Record<string, string>>> = {};\n\n  @Use()\n  private $$sysIcon: SysIcon;\n\n  protected async __init__() {\n    if (process.env.SERVER) {\n      this.ctx.meta.$ssr.context.onRendered((err?: Error) => {\n        if (err) return;\n        this._onRendered();\n      });\n    }\n  }\n\n  async parseIconInfo(iconName?: string): Promise<IIconInfo | undefined> {\n    const iconInfo = await this.$$sysIcon.parseIconInfo(iconName);\n    if (!iconInfo) return iconInfo;\n    this._injectIconSSR(iconInfo.meta);\n    return iconInfo;\n  }\n\n  private _onRendered() {\n    this.ctx.meta.$ssr.context._meta.bodyTags += this._renderSSRContainer();\n  }\n\n  private _renderSSRContainer() {\n    const contentModules = this._renderSSRModules();\n    return `<div id=\"zova-svg-container\" style=\"position: absolute; width: 0px; height: 0px; display: none;\">${contentModules}</div>`;\n  }\n\n  private _renderSSRModules() {\n    return Object.keys(this._iconSSR)\n      .map(moduleName => {\n        const moduleId = `zova-svg-module-${moduleName}`;\n        const contentGroups = this._renderSSRGroups(this._iconSSR[moduleName], moduleName);\n        return `<div id=\"${moduleId}\">${contentGroups}</div>`;\n      })\n      .join('');\n  }\n\n  private _renderSSRGroups(iconSSRGroups: Record<string, Record<string, string>>, moduleName: string) {\n    return Object.keys(iconSSRGroups)\n      .map(groupName => {\n        const groupId = `zova-svg-group-${moduleName}-${groupName}`;\n        const contentIcons = this._renderSSRIcons(iconSSRGroups[groupName]);\n        return `<svg id=\"${groupId}\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:link=\"http://www.w3.org/1999/xlink\">${contentIcons}</svg>`;\n      })\n      .join('');\n  }\n\n  private _renderSSRIcons(iconSSRIcons: Record<string, string>) {\n    return Object.keys(iconSSRIcons)\n      .map(symbolId => {\n        return iconSSRIcons[symbolId];\n      })\n      .join('');\n  }\n\n  private _injectIconSSR(meta: IIconMeta) {\n    if (process.env.CLIENT) return;\n    const iconModule = this.$$sysIcon.getIconModule(meta.module);\n    const iconGroup = iconModule[meta.group];\n    if (!this._iconSSR[meta.module]) this._iconSSR[meta.module] = {};\n    if (!this._iconSSR[meta.module][meta.group]) this._iconSSR[meta.module][meta.group] = {};\n    this._iconSSR[meta.module][meta.group][meta.symbolId] = this.$$sysIcon.extractIconContent(iconGroup.svg, meta.symbolId)!;\n  }\n}\n","import { ref, watchEffect } from 'vue';\nimport { sys } from 'zova';\n\nimport type { IIconInfo, IIconRecord } from '../types/icon.js';\n\nexport function $getZovaIcon(iconName?: keyof IIconRecord): IIconInfo | undefined {\n  return sys.meta.$icon.parseIconInfoSync(iconName);\n}\n\nexport function $useZovaIcon(iconGetter: () => keyof IIconRecord | undefined) {\n  const iconInfo = ref<IIconInfo>();\n\n  watchEffect(() => {\n    iconInfo.value = $getZovaIcon(iconGetter());\n  });\n\n  return { iconInfo };\n}\n","import { BeanControllerBase, convertToUnit, isHttpUrl, Use } from 'zova';\nimport { Controller } from 'zova-module-a-bean';\n\nimport { ToolIcon } from '../../bean/tool.icon.js';\nimport { $getZovaIcon } from '../../lib/useZovaIcon.js';\nimport { IIconRecord } from '../../types/icon.js';\n\nexport interface ControllerIconProps {\n  name?: keyof IIconRecord;\n  href?: string;\n  width?: string | number;\n  height?: string | number;\n  color?: string;\n}\n\n@Controller()\nexport class ControllerIcon extends BeanControllerBase {\n  static $propsDefault = {};\n\n  @Use()\n  $$toolIcon: ToolIcon;\n\n  protected async __init__() {\n    await this._load();\n  }\n\n  private async _load() {\n    const name = this.$props.name;\n    if (name === ('none' as any) || !name) {\n      return;\n    }\n    if (isHttpUrl(name)) {\n      return;\n    }\n    const promise = this.$$toolIcon.parseIconInfo(name);\n    if (process.env.SSR) {\n      await promise;\n    }\n  }\n\n  protected render() {\n    // width/height\n    const defaultSize = this.scope.config.icon.size;\n    const width = this.$props.width ?? this.$props.height ?? defaultSize;\n    const height = this.$props.height ?? this.$props.width ?? defaultSize;\n    const href = this._parseHref();\n    if (isHttpUrl(href) && !href?.endsWith('.svg')) {\n      return (\n        <img\n          class=\"zova-icon__img\"\n          style={{\n            width: convertToUnit(width),\n            height: convertToUnit(height),\n          }}\n          src={href}\n        ></img>\n      );\n    }\n    return (\n      <svg\n        class=\"zova-icon__svg\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"currentColor\"\n        role=\"img\"\n        aria-hidden=\"true\"\n        width={width}\n        height={height}\n        style={{ color: this.$props.color }}\n      >\n        <use xlinkHref={href}></use>\n      </svg>\n    );\n  }\n\n  private _parseHref() {\n    let href = this.$props.href;\n    const name = this.$props.name;\n    if (href) return href;\n    if (isHttpUrl(name)) return name;\n    // icon info\n    const iconInfo = $getZovaIcon(name);\n    // href\n    href = `#${iconInfo?.symbolId || ''}`;\n    return href;\n  }\n}\n","import type { TypeControllerInnerProps } from 'zova';\n\nimport { defineComponent } from 'vue';\nimport { prepareComponentOptions, useController } from 'zova';\n\nimport type { ControllerIconProps } from '../../component/icon/controller.jsx';\n\nimport { ControllerIcon } from '../../component/icon/controller.jsx';\nexport type TypeControllerIconPublicProps = {\n  controllerRef?: (ref: ControllerIcon) => void;\n} & ControllerIconProps;\n\ntype ControllerInnerProps = TypeControllerInnerProps<ControllerIconProps, keyof typeof ControllerIcon.$propsDefault>;\ndeclare module 'zova-module-a-icon' {\n  export interface ControllerIcon {\n    $props: ControllerInnerProps;\n  }\n}\n\nexport const ZIcon = defineComponent((_props: TypeControllerIconPublicProps) => {\n  useController(ControllerIcon, undefined, undefined);\n  return () => {};\n}, prepareComponentOptions());\n","import type { IBeanScopeRecord, ZovaSys } from 'zova';\n\nexport const config = (_sys: ZovaSys) => {\n  return {\n    defaultModule: 'home-icon' as keyof IBeanScopeRecord,\n    icon: {\n      size: 24,\n    },\n  };\n};\n","import type { IMonkeySysInitialize } from 'zova';\n\nimport { BeanSimple } from 'zova';\n\nimport { SysIcon } from './bean/sys.icon.js';\n\nexport class MonkeySys extends BeanSimple implements IMonkeySysInitialize {\n  async sysInitialize() {\n    // $icon\n    this.sys.meta.$icon = await this.bean._getBean(SysIcon, false);\n  }\n}\n","// eslint-disable\n/** sys: begin */\nexport * from '../bean/sys.icon.js';\n\nimport 'zova';\ndeclare module 'zova' {\n  \n  \n}\ndeclare module 'zova-module-a-icon' {\n  \n        export interface SysIcon {\n          /** @internal */\n          get scope(): ScopeModuleAIcon;\n        }\n\n        export interface SysIcon {\n          get $beanFullName(): 'a-icon.sys.icon';\n          get $onionName(): 'a-icon:icon';\n          \n        } \n}\n/** sys: end */\n/** sys: begin */\nimport { SysIcon } from '../bean/sys.icon.js';\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanRecordGeneral {\n    'a-icon.sys.icon': SysIcon;\n  }\n}\n/** sys: end */\n/** tool: begin */\nexport * from '../bean/tool.icon.js';\n\nimport 'zova';\ndeclare module 'zova' {\n  \n  \n}\ndeclare module 'zova-module-a-icon' {\n  \n        export interface ToolIcon {\n          /** @internal */\n          get scope(): ScopeModuleAIcon;\n        }\n\n        export interface ToolIcon {\n          get $beanFullName(): 'a-icon.tool.icon';\n          get $onionName(): 'a-icon:icon';\n          \n        } \n}\n/** tool: end */\n/** tool: begin */\nimport { ToolIcon } from '../bean/tool.icon.js';\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanRecordGeneral {\n    'a-icon.tool.icon': ToolIcon;\n  }\n}\n/** tool: end */\n/** controller: begin */\nexport * from '../component/icon/controller.jsx';\n\nimport 'zova';\ndeclare module 'zova' {\n  \n  \n}\ndeclare module 'zova-module-a-icon' {\n  \n        export interface ControllerIcon {\n          /** @internal */\n          get scope(): ScopeModuleAIcon;\n        } \n}\n/** controller: end */\n/** controller: begin */\nimport { ControllerIcon } from '../component/icon/controller.jsx';\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanRecordLocal {\n    'a-icon.controller.icon': ControllerIcon;\n  }\n}\n/** controller: end */\n\n/** components: begin */\nexport * from './component/icon.js';\nimport { ZIcon } from './component/icon.js';\nexport const components = {\n  'icon': ZIcon,\n};\nimport 'zova';\ndeclare module 'zova' {\nexport interface IComponentRecord {\n  'a-icon:icon': ControllerIcon;\n}\nexport interface IZovaComponentRecord {\n  'a-icon:icon': typeof ZIcon;\n}\n}\n/** components: end */\n/** config: begin */\nexport * from '../config/config.js';\nimport { config } from '../config/config.js';\n/** config: end */\n/** monkeySys: begin */\nexport * from '../monkeySys.js';\n/** monkeySys: end */\n/** scope: begin */\nimport { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig } from 'zova';\nimport { Scope } from 'zova-module-a-bean';\n\n@Scope()\nexport class ScopeModuleAIcon extends BeanScopeBase {}\n\nexport interface ScopeModuleAIcon {\n  util: BeanScopeUtil;\nconfig: TypeModuleConfig<typeof config>;\n}\n\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanScopeRecord {\n    'a-icon': ScopeModuleAIcon;\n  }\n  \n  export interface IBeanScopeConfig {\n    'a-icon': ReturnType<typeof config>;\n  }\n\n  \n\n  \n}\n  \n/** scope: end */\n","import type { VNode } from 'vue';\n\nimport { createVNode } from 'vue';\n\nimport type { IIconRecord } from '../types/icon.js';\n\nimport { ZIcon } from '../.metadata/index.js';\n\nexport function $icon<K extends keyof IIconRecord>(name: K, size?: string | number, color?: string): VNode {\n  return createVNode(ZIcon, {\n    name,\n    color,\n    width: size,\n    height: size,\n  });\n}\n\nexport function $iconName<K extends keyof IIconRecord>(name: K): K {\n  return name;\n}\n"],"mappings":"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"}

package/package.json

@@ -1,37 +1,42 @@
 {
   "name": "zova-module-a-icon",
-  "version": "5.0.0",
+  "version": "5.1.0",
+  "description": "",
+  "keywords": [
+    "Zova Module"
+  ],
+  "author": "",
+  "files": [
+    "dist",
+    "mock",
+    "rest",
+    "src",
+    "icons",
+    "assets"
+  ],
   "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
   "exports": {
     ".": {
       "types": [
         "./src/index.ts",
         "./dist/index.d.ts"
       ],
-      "development": "./src/index.ts",
-      "import": "./dist/index.js",
-      "default": "./src/index.ts"
+      "default": "./dist/index.js"
     },
-    "./package.json": "./package.json"
+    "./*": "./*"
   },
-  "description": "",
-  "files": [
-    "dist",
-    "static",
-    "typings"
-  ],
   "scripts": {
-    "build:front": "node ../../../../../scripts/egg-born-bin.js front-build-module",
-    "build:backend": "node ../../../../../scripts/egg-born-bin.js backend-build-module",
-    "build:all": "npm run build:front && npm run build:backend",
-    "preversion": "npm run build:all && git add ."
+    "clean": "rimraf dist tsconfig.build.tsbuildinfo",
+    "tsc:publish": "npm run clean && zova :bin:buildModule --sourcemap",
+    "prepublishOnly": "npm run tsc:publish",
+    "prepack": "clean-package",
+    "postpack": "clean-package restore && npm run clean"
   },
-  "keywords": [
-    "Cabloy Module"
-  ],
-  "author": "zhennann",
-  "dependencies": {}
+  "title": "a-icon",
+  "zovaModule": {
+    "capabilities": {
+      "monkey": true
+    }
+  },
+  "gitHead": "bf1ceb4582381c74ba41ccf11b89d3b9e7b73628"
 }

package/rest/component/icon.ts

@@ -0,0 +1,8 @@
+import type { TypeRenderComponentJsxPropsPublic } from 'zova-jsx';
+
+import type { ControllerIconProps } from '../../src/component/icon/controller.jsx';
+
+type TypeControllerIconPublicProps = TypeRenderComponentJsxPropsPublic & ControllerIconProps;
+export function ZZIcon(_props: TypeControllerIconPublicProps) {
+  return 'a-icon:icon';
+}

package/rest/components.ts

@@ -0,0 +1 @@
+export * from './component/icon.js';

package/rest/index.ts

@@ -0,0 +1 @@
+export * from './components.js';

package/src/.metadata/component/icon.ts

@@ -0,0 +1,23 @@
+import type { TypeControllerInnerProps } from 'zova';
+
+import { defineComponent } from 'vue';
+import { prepareComponentOptions, useController } from 'zova';
+
+import type { ControllerIconProps } from '../../component/icon/controller.jsx';
+
+import { ControllerIcon } from '../../component/icon/controller.jsx';
+export type TypeControllerIconPublicProps = {
+  controllerRef?: (ref: ControllerIcon) => void;
+} & ControllerIconProps;
+
+type ControllerInnerProps = TypeControllerInnerProps<ControllerIconProps, keyof typeof ControllerIcon.$propsDefault>;
+declare module 'zova-module-a-icon' {
+  export interface ControllerIcon {
+    $props: ControllerInnerProps;
+  }
+}
+
+export const ZIcon = defineComponent((_props: TypeControllerIconPublicProps) => {
+  useController(ControllerIcon, undefined, undefined);
+  return () => {};
+}, prepareComponentOptions());

package/src/.metadata/index.ts

@@ -0,0 +1,140 @@
+// eslint-disable
+/** sys: begin */
+export * from '../bean/sys.icon.js';
+
+import 'zova';
+declare module 'zova' {
+  
+  
+}
+declare module 'zova-module-a-icon' {
+  
+        export interface SysIcon {
+          /** @internal */
+          get scope(): ScopeModuleAIcon;
+        }
+
+        export interface SysIcon {
+          get $beanFullName(): 'a-icon.sys.icon';
+          get $onionName(): 'a-icon:icon';
+          
+        } 
+}
+/** sys: end */
+/** sys: begin */
+import { SysIcon } from '../bean/sys.icon.js';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordGeneral {
+    'a-icon.sys.icon': SysIcon;
+  }
+}
+/** sys: end */
+/** tool: begin */
+export * from '../bean/tool.icon.js';
+
+import 'zova';
+declare module 'zova' {
+  
+  
+}
+declare module 'zova-module-a-icon' {
+  
+        export interface ToolIcon {
+          /** @internal */
+          get scope(): ScopeModuleAIcon;
+        }
+
+        export interface ToolIcon {
+          get $beanFullName(): 'a-icon.tool.icon';
+          get $onionName(): 'a-icon:icon';
+          
+        } 
+}
+/** tool: end */
+/** tool: begin */
+import { ToolIcon } from '../bean/tool.icon.js';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordGeneral {
+    'a-icon.tool.icon': ToolIcon;
+  }
+}
+/** tool: end */
+/** controller: begin */
+export * from '../component/icon/controller.jsx';
+
+import 'zova';
+declare module 'zova' {
+  
+  
+}
+declare module 'zova-module-a-icon' {
+  
+        export interface ControllerIcon {
+          /** @internal */
+          get scope(): ScopeModuleAIcon;
+        } 
+}
+/** controller: end */
+/** controller: begin */
+import { ControllerIcon } from '../component/icon/controller.jsx';
+import 'zova';
+declare module 'zova' {
+  export interface IBeanRecordLocal {
+    'a-icon.controller.icon': ControllerIcon;
+  }
+}
+/** controller: end */
+
+/** components: begin */
+export * from './component/icon.js';
+import { ZIcon } from './component/icon.js';
+export const components = {
+  'icon': ZIcon,
+};
+import 'zova';
+declare module 'zova' {
+export interface IComponentRecord {
+  'a-icon:icon': ControllerIcon;
+}
+export interface IZovaComponentRecord {
+  'a-icon:icon': typeof ZIcon;
+}
+}
+/** components: end */
+/** config: begin */
+export * from '../config/config.js';
+import { config } from '../config/config.js';
+/** config: end */
+/** monkeySys: begin */
+export * from '../monkeySys.js';
+/** monkeySys: end */
+/** scope: begin */
+import { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig } from 'zova';
+import { Scope } from 'zova-module-a-bean';
+
+@Scope()
+export class ScopeModuleAIcon extends BeanScopeBase {}
+
+export interface ScopeModuleAIcon {
+  util: BeanScopeUtil;
+config: TypeModuleConfig<typeof config>;
+}
+
+import 'zova';
+declare module 'zova' {
+  export interface IBeanScopeRecord {
+    'a-icon': ScopeModuleAIcon;
+  }
+  
+  export interface IBeanScopeConfig {
+    'a-icon': ReturnType<typeof config>;
+  }
+
+  
+
+  
+}
+  
+/** scope: end */

package/src/.metadata/this.ts

@@ -0,0 +1,2 @@
+export const __ThisModule__ = 'a-icon';
+export { ScopeModuleAIcon as ScopeModule } from './index.js';

package/src/bean/sys.icon.ts

@@ -0,0 +1,205 @@
+import { reactive } from 'vue';
+import { BeanBase } from 'zova';
+import { Sys } from 'zova-module-a-bean';
+
+import { IconGroup } from '../lib/iconGroup.js';
+import { IIconInfo, IIconMeta, TypeIconModules, TypeIconSymbols } from '../types/icon.js';
+
+const XMLNS = 'http://www.w3.org/2000/svg';
+const XMLNS_LINK = 'http://www.w3.org/1999/xlink';
+
+@Sys()
+export class SysIcon extends BeanBase {
+  protected _iconSymbols: TypeIconSymbols = reactive({});
+  protected _iconMoudles: TypeIconModules = {};
+
+  // undefined: ignore
+  // '': empty icon
+  parseIconInfoSync(iconName?: string): IIconInfo | undefined {
+    // parts
+    const meta = this.parseIconMeta(iconName);
+    if (!meta) return undefined;
+    // empty
+    const iconEmpty = { meta, symbolId: '' };
+    // ok
+    const iconOk = { meta, symbolId: meta.symbolId };
+    // check if exists
+    if (this._iconSymbols[meta.fullName]) return iconOk;
+    // check if dom exists
+    if (process.env.CLIENT) {
+      const domIcon = document.getElementById(meta.symbolId) as unknown as SVGElement;
+      if (domIcon) return iconOk;
+    }
+    // check if exists
+    if (this._iconSymbols[meta.fullName] === undefined) {
+      this.parseIconInfo(iconName);
+      return iconEmpty;
+    } else if (this._iconSymbols[meta.fullName] === '') {
+      return iconEmpty;
+    }
+  }
+
+  async parseIconInfo(iconName?: string): Promise<IIconInfo | undefined> {
+    // parts
+    const meta = this.parseIconMeta(iconName);
+    if (!meta) return undefined;
+    // check if exists
+    if (this._iconSymbols[meta.fullName]) {
+      return { meta, symbolId: this._iconSymbols[meta.fullName] };
+    }
+    // pre set
+    this._iconSymbols[meta.fullName] = '';
+    // icon group
+    const iconGroup = await this.parseIconGroup(meta.module, meta.group);
+    if (!iconGroup) return undefined;
+    // icon inject
+    this._injectIconClient(meta);
+    const symbolId = (this._iconSymbols[meta.fullName] = meta.symbolId);
+    // ok
+    return { meta, symbolId };
+  }
+
+  public async parseIconGroup(moduleName: string, groupName: string): Promise<string | undefined> {
+    // check if exists
+    const iconModule = this.getIconModule(moduleName);
+    if (iconModule[groupName]) {
+      await iconModule[groupName].loaded.wait();
+      return iconModule[groupName].svg;
+    }
+    // record
+    iconModule[groupName] = new IconGroup();
+    // parse
+    const svg = await this._parseIconGroupInner(moduleName, groupName);
+    // touch
+    iconModule[groupName].svg = svg;
+    iconModule[groupName].loaded.touch();
+    // ok
+    return iconModule[groupName].svg;
+  }
+
+  private async _parseIconGroupInner(moduleName: string, groupName: string): Promise<string | undefined> {
+    // module
+    const module = await this.sys.meta.module.use(moduleName);
+    if (!module) return;
+    // icons
+    const icons = module.resource.icons;
+    let groupUrl = icons[groupName];
+    if (!groupUrl) return;
+    // inline
+    if (groupUrl.startsWith('data:image/svg+xml')) throw new Error('inline svg not supported');
+    // fetch
+    let svg;
+    if (process.env.SERVER) {
+      // publicPath
+      groupUrl = this.sys.util.getPagePathFromAbsoluteUrl(groupUrl);
+      const path = await import('node:path');
+      const fs = await import('node:fs/promises');
+      let filePath: string;
+      if (process.env.DEV) {
+        filePath = path.join(process.cwd(), groupUrl);
+      } else {
+        const { fileURLToPath } = await import('node:url');
+        const rootFolder = fileURLToPath(new URL(/* @vite-ignore */ '.', import.meta.url));
+        filePath = path.join(rootFolder, 'client', groupUrl);
+      }
+      svg = await fs.readFile(filePath, { encoding: 'utf8' });
+    } else {
+      const res = await fetch(groupUrl);
+      if (!res.ok) return;
+      svg = await res.text();
+    }
+    return svg;
+  }
+
+  private _injectIconClient(meta: IIconMeta) {
+    if (process.env.SERVER) return;
+    // client
+    const iconModule = this.getIconModule(meta.module);
+    const iconGroup = iconModule[meta.group];
+    // inject container
+    let domContainer = document.getElementById('zova-svg-container');
+    if (!domContainer) {
+      domContainer = document.createElement('div');
+      domContainer.style.position = 'absolute';
+      domContainer.style.width = '0';
+      domContainer.style.height = '0';
+      domContainer.style.display = 'none';
+      domContainer.id = 'zova-svg-container';
+      document.body.appendChild(domContainer);
+    }
+    // inject module
+    let domModule = document.getElementById(`zova-svg-module-${meta.module}`);
+    if (!domModule) {
+      domModule = document.createElement('div');
+      domModule.id = `zova-svg-module-${meta.module}`;
+      domContainer.appendChild(domModule);
+    }
+    // inject group
+    let domGroup = document.getElementById(`zova-svg-group-${meta.module}-${meta.group}`) as unknown as SVGSVGElement;
+    if (!domGroup) {
+      domGroup = document.createElementNS(XMLNS, 'svg');
+      domGroup.id = `zova-svg-group-${meta.module}-${meta.group}`;
+      domGroup.setAttribute('xmlns', XMLNS);
+      domGroup.setAttribute('xmlns:link', XMLNS_LINK);
+      domModule.appendChild(domGroup);
+    }
+    // inject icon
+    const domIcon = document.getElementById(meta.symbolId) as unknown as SVGElement;
+    if (!domIcon) {
+      const iconContent = this.extractIconContent(iconGroup.svg, meta.symbolId);
+      if (iconContent) {
+        domGroup.insertAdjacentHTML('beforeend', iconContent);
+      }
+    }
+  }
+
+  extractIconContent(svg: string | undefined, symbolId: string) {
+    if (!svg) return undefined;
+    let pos = svg.indexOf(`'${symbolId}'`);
+    if (pos === -1) pos = svg.indexOf(`"${symbolId}"`);
+    if (pos === -1) return undefined;
+    const posB = svg.indexOf('</symbol>', pos);
+    const posA = svg.lastIndexOf('<symbol', pos);
+    return svg.substring(posA, posB + '</symbol>'.length);
+    // const symbolPattern = new RegExp(`<symbol.*?id=['"]${symbolId}['"].*?>.*?</symbol>`);
+    // const matched = symbolPattern.exec(svg || '');
+    // return matched && matched[0];
+  }
+
+  getIconModule(moduleName: string) {
+    if (!this._iconMoudles[moduleName]) {
+      this._iconMoudles[moduleName] = {};
+    }
+    return this._iconMoudles[moduleName];
+  }
+
+  parseIconMeta(iconName?: string): IIconMeta | undefined {
+    if (!iconName) return;
+    // split module:group:name
+    const parts = iconName.split(':');
+    if (parts.length !== 3) {
+      return;
+    }
+    const module = parts[0] || this.scope.config.defaultModule;
+    const group = parts[1] || 'default';
+    const name = parts[2] || '';
+    if (!module.includes('-') || !name) {
+      return;
+    }
+    return {
+      module,
+      group,
+      name,
+      fullName: this._getFullName(module, group, name),
+      symbolId: this._getSymbolId(module, group, name),
+    };
+  }
+
+  private _getSymbolId(module: string, group: string, name: string) {
+    return `zova-svg-icon-${module}-${group}-${name}`;
+  }
+
+  private _getFullName(module: string, group: string, name: string) {
+    return `${module}:${group}:${name}`;
+  }
+}

package/src/bean/tool.icon.ts

@@ -0,0 +1,75 @@
+import { BeanBase, Use } from 'zova';
+import { Tool } from 'zova-module-a-bean';
+
+import { IIconInfo, IIconMeta } from '../types/icon.js';
+import { SysIcon } from './sys.icon.js';
+
+@Tool()
+export class ToolIcon extends BeanBase {
+  private _iconSSR: Record<string, Record<string, Record<string, string>>> = {};
+
+  @Use()
+  private $$sysIcon: SysIcon;
+
+  protected async __init__() {
+    if (process.env.SERVER) {
+      this.ctx.meta.$ssr.context.onRendered((err?: Error) => {
+        if (err) return;
+        this._onRendered();
+      });
+    }
+  }
+
+  async parseIconInfo(iconName?: string): Promise<IIconInfo | undefined> {
+    const iconInfo = await this.$$sysIcon.parseIconInfo(iconName);
+    if (!iconInfo) return iconInfo;
+    this._injectIconSSR(iconInfo.meta);
+    return iconInfo;
+  }
+
+  private _onRendered() {
+    this.ctx.meta.$ssr.context._meta.bodyTags += this._renderSSRContainer();
+  }
+
+  private _renderSSRContainer() {
+    const contentModules = this._renderSSRModules();
+    return `<div id="zova-svg-container" style="position: absolute; width: 0px; height: 0px; display: none;">${contentModules}</div>`;
+  }
+
+  private _renderSSRModules() {
+    return Object.keys(this._iconSSR)
+      .map(moduleName => {
+        const moduleId = `zova-svg-module-${moduleName}`;
+        const contentGroups = this._renderSSRGroups(this._iconSSR[moduleName], moduleName);
+        return `<div id="${moduleId}">${contentGroups}</div>`;
+      })
+      .join('');
+  }
+
+  private _renderSSRGroups(iconSSRGroups: Record<string, Record<string, string>>, moduleName: string) {
+    return Object.keys(iconSSRGroups)
+      .map(groupName => {
+        const groupId = `zova-svg-group-${moduleName}-${groupName}`;
+        const contentIcons = this._renderSSRIcons(iconSSRGroups[groupName]);
+        return `<svg id="${groupId}" xmlns="http://www.w3.org/2000/svg" xmlns:link="http://www.w3.org/1999/xlink">${contentIcons}</svg>`;
+      })
+      .join('');
+  }
+
+  private _renderSSRIcons(iconSSRIcons: Record<string, string>) {
+    return Object.keys(iconSSRIcons)
+      .map(symbolId => {
+        return iconSSRIcons[symbolId];
+      })
+      .join('');
+  }
+
+  private _injectIconSSR(meta: IIconMeta) {
+    if (process.env.CLIENT) return;
+    const iconModule = this.$$sysIcon.getIconModule(meta.module);
+    const iconGroup = iconModule[meta.group];
+    if (!this._iconSSR[meta.module]) this._iconSSR[meta.module] = {};
+    if (!this._iconSSR[meta.module][meta.group]) this._iconSSR[meta.module][meta.group] = {};
+    this._iconSSR[meta.module][meta.group][meta.symbolId] = this.$$sysIcon.extractIconContent(iconGroup.svg, meta.symbolId)!;
+  }
+}

package/src/component/icon/controller.tsx

@@ -0,0 +1,87 @@
+import { BeanControllerBase, convertToUnit, isHttpUrl, Use } from 'zova';
+import { Controller } from 'zova-module-a-bean';
+
+import { ToolIcon } from '../../bean/tool.icon.js';
+import { $getZovaIcon } from '../../lib/useZovaIcon.js';
+import { IIconRecord } from '../../types/icon.js';
+
+export interface ControllerIconProps {
+  name?: keyof IIconRecord;
+  href?: string;
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+}
+
+@Controller()
+export class ControllerIcon extends BeanControllerBase {
+  static $propsDefault = {};
+
+  @Use()
+  $$toolIcon: ToolIcon;
+
+  protected async __init__() {
+    await this._load();
+  }
+
+  private async _load() {
+    const name = this.$props.name;
+    if (name === ('none' as any) || !name) {
+      return;
+    }
+    if (isHttpUrl(name)) {
+      return;
+    }
+    const promise = this.$$toolIcon.parseIconInfo(name);
+    if (process.env.SSR) {
+      await promise;
+    }
+  }
+
+  protected render() {
+    // width/height
+    const defaultSize = this.scope.config.icon.size;
+    const width = this.$props.width ?? this.$props.height ?? defaultSize;
+    const height = this.$props.height ?? this.$props.width ?? defaultSize;
+    const href = this._parseHref();
+    if (isHttpUrl(href) && !href?.endsWith('.svg')) {
+      return (
+        <img
+          class="zova-icon__img"
+          style={{
+            width: convertToUnit(width),
+            height: convertToUnit(height),
+          }}
+          src={href}
+        ></img>
+      );
+    }
+    return (
+      <svg
+        class="zova-icon__svg"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        role="img"
+        aria-hidden="true"
+        width={width}
+        height={height}
+        style={{ color: this.$props.color }}
+      >
+        <use xlinkHref={href}></use>
+      </svg>
+    );
+  }
+
+  private _parseHref() {
+    let href = this.$props.href;
+    const name = this.$props.name;
+    if (href) return href;
+    if (isHttpUrl(name)) return name;
+    // icon info
+    const iconInfo = $getZovaIcon(name);
+    // href
+    href = `#${iconInfo?.symbolId || ''}`;
+    return href;
+  }
+}

package/src/config/config.ts

@@ -0,0 +1,10 @@
+import type { IBeanScopeRecord, ZovaSys } from 'zova';
+
+export const config = (_sys: ZovaSys) => {
+  return {
+    defaultModule: 'home-icon' as keyof IBeanScopeRecord,
+    icon: {
+      size: 24,
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './.metadata/index.js';
+export * from './lib/index.js';
+export * from './types/index.js';

package/src/lib/iconGroup.ts

@@ -0,0 +1,10 @@
+import { StateLock } from 'zova';
+
+export class IconGroup {
+  public svg: string | undefined;
+  public loaded: StateLock;
+
+  constructor() {
+    this.loaded = StateLock.create();
+  }
+}

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './iconGroup.js';
+export * from './useZovaIcon.js';
+export * from './utils.js';

package/src/lib/useZovaIcon.ts

@@ -0,0 +1,18 @@
+import { ref, watchEffect } from 'vue';
+import { sys } from 'zova';
+
+import type { IIconInfo, IIconRecord } from '../types/icon.js';
+
+export function $getZovaIcon(iconName?: keyof IIconRecord): IIconInfo | undefined {
+  return sys.meta.$icon.parseIconInfoSync(iconName);
+}
+
+export function $useZovaIcon(iconGetter: () => keyof IIconRecord | undefined) {
+  const iconInfo = ref<IIconInfo>();
+
+  watchEffect(() => {
+    iconInfo.value = $getZovaIcon(iconGetter());
+  });
+
+  return { iconInfo };
+}

package/src/lib/utils.ts

@@ -0,0 +1,20 @@
+import type { VNode } from 'vue';
+
+import { createVNode } from 'vue';
+
+import type { IIconRecord } from '../types/icon.js';
+
+import { ZIcon } from '../.metadata/index.js';
+
+export function $icon<K extends keyof IIconRecord>(name: K, size?: string | number, color?: string): VNode {
+  return createVNode(ZIcon, {
+    name,
+    color,
+    width: size,
+    height: size,
+  });
+}
+
+export function $iconName<K extends keyof IIconRecord>(name: K): K {
+  return name;
+}

package/src/monkeySys.ts

@@ -0,0 +1,12 @@
+import type { IMonkeySysInitialize } from 'zova';
+
+import { BeanSimple } from 'zova';
+
+import { SysIcon } from './bean/sys.icon.js';
+
+export class MonkeySys extends BeanSimple implements IMonkeySysInitialize {
+  async sysInitialize() {
+    // $icon
+    this.sys.meta.$icon = await this.bean._getBean(SysIcon, false);
+  }
+}

package/src/types/icon.ts

@@ -0,0 +1,27 @@
+import type { SysIcon } from '../bean/sys.icon.js';
+import type { IconGroup } from '../lib/iconGroup.js';
+
+export interface IIconRecord {}
+
+export interface IIconMeta {
+  module: string;
+  group: string;
+  name: string;
+  fullName: string;
+  symbolId: string;
+}
+
+export interface IIconInfo {
+  meta: IIconMeta;
+  symbolId: string; // '' or valid icon
+}
+
+export type TypeIconGroups = Record<string, IconGroup>;
+export type TypeIconModules = Record<string, TypeIconGroups>;
+export type TypeIconSymbols = Record<string, string>;
+
+declare module 'zova' {
+  export interface SysMeta {
+    $icon: SysIcon;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './icon.js';

package/README.md

@@ -1 +0,0 @@
-# @cabloy/set