@fangzhongya/icons 0.0.51 → 0.0.53

package/dist/icon/index.d.ts

@@ -1,136 +1,136 @@
-import { SFCWithInstall } from '../util.js';
-import * as vue from 'vue';
+import { SFCWithInstall } from "../util.js";
 
+//#region packages/icon/index.d.ts
 type Flip = 'horizontal' | 'vertical' | 'both' | '';
 type IconType = 'css' | 'id' | 'img' | 'font' | 'svg' | 'vue' | 'pub';
-declare const Icon: SFCWithInstall<vue.DefineComponent<vue.ExtractPropTypes<{
-    /**
-     * @props { String, Object } name= ( )
-     * 图标名称
-     */
-    name: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    /**
-     * @props { String} iconClass= ( )
-     * 图标样式名称
-     */
-    iconClass: {
-        type: StringConstructor;
-    };
-    color: {
-        type: StringConstructor;
-    };
-    /**
-     * @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
-     * 图标类型
-     */
-    type: {
-        type: () => IconType;
-    };
-    /**
-     * @props { String, Number } size= ( )
-     * 图标大小
-     */
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    /**
-     * @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
-     * 图标方向
-     */
-    flip: {
-        type: () => Flip;
-        default: string;
-    };
-    /**
-     * @props { Number } rotate=0
-     * 图标旋转角度
-     */
-    rotate: {
-        type: NumberConstructor;
-        default: number;
-    };
-    default: {
-        type: StringConstructor;
-    };
-    directory: {
-        type: StringConstructor;
-        default: string;
-    };
-    prefix: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    /**
-     * @props { String, Object } name= ( )
-     * 图标名称
-     */
-    name: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    /**
-     * @props { String} iconClass= ( )
-     * 图标样式名称
-     */
-    iconClass: {
-        type: StringConstructor;
-    };
-    color: {
-        type: StringConstructor;
-    };
-    /**
-     * @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
-     * 图标类型
-     */
-    type: {
-        type: () => IconType;
-    };
-    /**
-     * @props { String, Number } size= ( )
-     * 图标大小
-     */
-    size: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    /**
-     * @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
-     * 图标方向
-     */
-    flip: {
-        type: () => Flip;
-        default: string;
-    };
-    /**
-     * @props { Number } rotate=0
-     * 图标旋转角度
-     */
-    rotate: {
-        type: NumberConstructor;
-        default: number;
-    };
-    default: {
-        type: StringConstructor;
-    };
-    directory: {
-        type: StringConstructor;
-        default: string;
-    };
-    prefix: {
-        type: StringConstructor;
-        default: string;
-    };
+declare const Icon: SFCWithInstall<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
+  /**
+   * @props { String, Object } name= ( )
+   * 图标名称
+   */
+  name: {
+    type: (ObjectConstructor | StringConstructor)[];
+    default: string;
+  };
+  /**
+   * @props { String} iconClass= ( )
+   * 图标样式名称
+   */
+  iconClass: {
+    type: StringConstructor;
+  };
+  color: {
+    type: StringConstructor;
+  };
+  /**
+   * @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
+   * 图标类型
+   */
+  type: {
+    type: () => IconType;
+  };
+  /**
+   * @props { String, Number } size= ( )
+   * 图标大小
+   */
+  size: {
+    type: (StringConstructor | NumberConstructor)[];
+  };
+  /**
+   * @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
+   * 图标方向
+   */
+  flip: {
+    type: () => Flip;
+    default: string;
+  };
+  /**
+   * @props { Number } rotate=0
+   * 图标旋转角度
+   */
+  rotate: {
+    type: NumberConstructor;
+    default: number;
+  };
+  default: {
+    type: StringConstructor;
+  };
+  directory: {
+    type: StringConstructor;
+    default: string;
+  };
+  prefix: {
+    type: StringConstructor;
+    default: string;
+  };
+}>, () => globalThis.VNode<import("vue").RendererNode, import("vue").RendererElement, {
+  [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
+  /**
+   * @props { String, Object } name= ( )
+   * 图标名称
+   */
+  name: {
+    type: (ObjectConstructor | StringConstructor)[];
+    default: string;
+  };
+  /**
+   * @props { String} iconClass= ( )
+   * 图标样式名称
+   */
+  iconClass: {
+    type: StringConstructor;
+  };
+  color: {
+    type: StringConstructor;
+  };
+  /**
+   * @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
+   * 图标类型
+   */
+  type: {
+    type: () => IconType;
+  };
+  /**
+   * @props { String, Number } size= ( )
+   * 图标大小
+   */
+  size: {
+    type: (StringConstructor | NumberConstructor)[];
+  };
+  /**
+   * @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
+   * 图标方向
+   */
+  flip: {
+    type: () => Flip;
+    default: string;
+  };
+  /**
+   * @props { Number } rotate=0
+   * 图标旋转角度
+   */
+  rotate: {
+    type: NumberConstructor;
+    default: number;
+  };
+  default: {
+    type: StringConstructor;
+  };
+  directory: {
+    type: StringConstructor;
+    default: string;
+  };
+  prefix: {
+    type: StringConstructor;
+    default: string;
+  };
 }>> & Readonly<{}>, {
-    name: string | Record<string, any>;
-    flip: Flip;
-    rotate: number;
-    directory: string;
-    prefix: string;
-}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>>;
-
-export { type Flip, Icon, type IconType, Icon as default };
+  name: string | Record<string, any>;
+  prefix: string;
+  flip: Flip;
+  rotate: number;
+  directory: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+//#endregion
+export { Flip, Icon, Icon as default, IconType };

package/dist/icon/index.js

@@ -1,13 +1,223 @@
-import {
-  Icon,
-  icon_default
-} from "../chunk-66OLJGLO.js";
-import "../chunk-E3I6537N.js";
-import "../chunk-BYXBJQAS.js";
-import "../chunk-MOHILOKE.js";
-import "../chunk-DSTHXXIG.js";
-import "../chunk-MLKGABMK.js";
-export {
-  Icon,
-  icon_default as default
+import { defaultPrefix } from "../config.js";
+import { t as humpToLine } from "../humpToLine-Czhat99x.js";
+import { withInstall } from "../util.js";
+import { computed, defineComponent, h, resolveComponent } from "vue";
+//#region packages/icon/index.ts
+const reg = /<svg([^>]*)>((.|\n|\r|\t)*)<\/svg>/g;
+const reg1 = /<path([^>]*)>((.|\n|\r|\t)*)<\/path>/g;
+const reg2 = /<g([^>]*)>((.|\n|\r|\t)*)<\/g>/g;
+const prefix = humpToLine(defaultPrefix) + "-";
+const className = "icon";
+const directory = "/svg";
+const isImg = (name) => {
+	if (name) {
+		if (name.startsWith("data:") || name.startsWith("/") || name.startsWith("./") || name.startsWith("../") || name.includes("://")) return true;
+	}
+	return false;
 };
+const contStyle = {
+	border: 0,
+	display: "inline-flex",
+	"align-items": "center",
+	"object-fit": "contain",
+	"justify-content": "center",
+	"font-size": "inherit",
+	width: "inherit",
+	height: "inherit"
+};
+const svgStyle = {
+	"--color": "inherit",
+	height: "1em",
+	width: "1em",
+	"line-height": "1em",
+	display: "inline-flex",
+	"justify-content": "center",
+	"align-items": "center",
+	position: "relative",
+	fill: "currentColor",
+	color: "var(--color)",
+	"font-size": "inherit"
+};
+const Icon = withInstall(defineComponent({
+	name: "Icon",
+	props: {
+		/**
+		* @props { String, Object } name= ( )
+		* 图标名称
+		*/
+		name: {
+			type: [String, Object],
+			default: ""
+		},
+		/**
+		* @props { String} iconClass= ( )
+		* 图标样式名称
+		*/
+		iconClass: { type: String },
+		color: { type: String },
+		/**
+		* @props { String} type= ( 'css' | 'id' | 'img' | 'font' | 'str' | 'com' )
+		* 图标类型
+		*/
+		type: { type: String },
+		/**
+		* @props { String, Number } size= ( )
+		* 图标大小
+		*/
+		size: { type: [String, Number] },
+		/**
+		* @props { String } flip='' ( 'horizontal' | 'vertical' | 'both' | '' )
+		* 图标方向
+		*/
+		flip: {
+			type: String,
+			default: ""
+		},
+		/**
+		* @props { Number } rotate=0
+		* 图标旋转角度
+		*/
+		rotate: {
+			type: Number,
+			default: 0
+		},
+		default: { type: String },
+		directory: {
+			type: String,
+			default: directory
+		},
+		prefix: {
+			type: String,
+			default: prefix
+		}
+	},
+	setup(props, { slots }) {
+		const outputType = computed(() => {
+			if (props.type) return props.type;
+			else {
+				const name = props.name || "";
+				if (typeof name == "object") return "vue";
+				else if (reg.test(name) || reg1.test(name) || reg2.test(name)) return "svg";
+				else if (isImg(name)) return "img";
+				return props.default;
+			}
+		});
+		const setPrefix = (name) => {
+			name = humpToLine(name);
+			if (name.startsWith(props.prefix)) return name;
+			else return props.prefix + name;
+		};
+		const transformStyle = computed(() => {
+			const style = [];
+			if (props.flip !== "") switch (props.flip) {
+				case "horizontal":
+					style.push("rotateY(180deg)");
+					break;
+				case "vertical":
+					style.push("rotateX(180deg)");
+					break;
+				case "both":
+					style.push("rotateX(180deg)", "rotateY(180deg)");
+					break;
+			}
+			if (props.rotate !== 0) style.push(`rotate(${props.rotate % 360}deg)`);
+			const styleObj = { ...svgStyle };
+			styleObj.transform = style.join(" ");
+			if (props.color) styleObj.color = props.color;
+			if (props.size) {
+				let s = props.size;
+				if (typeof s == "number") s = s + "px";
+				styleObj.width = s;
+				styleObj.height = s;
+				styleObj["font-size"] = s;
+			}
+			return styleObj;
+		});
+		const outputName = computed(() => {
+			const name = props.name;
+			if (typeof name == "string") switch (outputType.value) {
+				case "svg":
+					const rs = reg.exec(name);
+					const rs1 = reg1.exec(name) || reg2.exec(name);
+					if (rs && rs.length > 0) return rs[1];
+					else if (rs1 && rs1.length > 0) return rs1[0];
+					else return name;
+				case "css": return setPrefix(name);
+				case "id": return setPrefix(name);
+				case "font": return setPrefix(name);
+				default: return name;
+			}
+			return name;
+		});
+		const dom = computed(() => {
+			if (!outputName.value) return;
+			else if (outputType.value === "pub") {
+				const src = props.directory + "/" + outputName.value + ".svg";
+				return h("img", {
+					class: [props.iconClass],
+					style: contStyle,
+					src
+				});
+			} else if (outputType.value === "css" || outputType.value === "font") return h("i", {
+				class: [props.iconClass, outputName.value],
+				style: contStyle
+			});
+			else if (outputType.value === "img") return h("img", {
+				class: [props.iconClass],
+				style: contStyle,
+				src: outputName.value
+			});
+			else if (outputType.value === "svg") {
+				let v;
+				let viewBox;
+				if (typeof outputName.value === "string") {
+					v = outputName.value;
+					viewBox = "0 0 1024 1024";
+				} else {
+					v = outputName.value?.body;
+					viewBox = `${outputName.value?.left || 0} ${outputName.value?.top || 0} ${outputName.value?.width || 1024} ${outputName.value?.height || 1024}`;
+				}
+				return h("svg", {
+					class: [props.iconClass],
+					style: contStyle,
+					viewBox,
+					xmlns: "http://www.w3.org/2000/svg",
+					innerHTML: v
+				});
+			} else if (outputType.value === "id") return h("svg", {
+				class: [props.iconClass],
+				style: contStyle,
+				"aria-hidden": true
+			}, h("use", { "xlink:href": "#" + outputName.value }));
+			else if (outputType.value === "vue") if (typeof outputName.value == "string") return h(resolveComponent(outputName.value), {
+				class: [props.iconClass],
+				style: contStyle
+			});
+			else return h(outputName.value, {
+				class: [props.iconClass],
+				style: contStyle
+			});
+			else if (typeof outputName.value == "string") {
+				const m = setPrefix(outputName.value);
+				const v = resolveComponent(m);
+				if (typeof v == "string") return h("i", {
+					class: [props.iconClass, m],
+					style: contStyle
+				});
+				else return h(v, {
+					class: [props.iconClass],
+					style: contStyle
+				});
+			} else return h(outputName.value, {
+				class: [props.iconClass],
+				style: contStyle
+			});
+		});
+		return () => h("span", {
+			class: [className],
+			style: transformStyle.value
+		}, Object.keys(slots).length > 0 ? slots : dom.value);
+	}
+}), "FangIcon");
+//#endregion
+export { Icon, Icon as default };

package/dist/iconify.cjs

@@ -1,16 +1,102 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-
-var _chunkYJVFENGGcjs = require('./chunk-YJVFENGG.cjs');
-require('./chunk-BXEIRESQ.cjs');
-require('./chunk-3376ZTRC.cjs');
-require('./chunk-IIVF4KK5.cjs');
-require('./chunk-75ZPJI57.cjs');
-
-
-
-
-
-exports.getIconifySVG = _chunkYJVFENGGcjs.getIconifySVG; exports.getViewBox = _chunkYJVFENGGcjs.getViewBox; exports.iconify = _chunkYJVFENGGcjs.iconify; exports.iconifySVG = _chunkYJVFENGGcjs.iconifySVG;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_config = require("./config.cjs");
+const require_lineToLargeHump = require("./lineToLargeHump-BajF216g.cjs");
+let vue = require("vue");
+//#region packages/iconify.ts
+const xmlns = "http://www.w3.org/2000/svg";
+function getViewBox(obj) {
+	return [
+		obj.left || 0,
+		obj.top || 0,
+		obj.width || 1024,
+		obj.height || 1024
+	].join(" ");
+}
+/**
+* 创建SVG图标组件
+* @param obj - 图标配置对象，包含图标的各项属性
+* @returns 返回一个Vue组件实例，用于渲染SVG图标
+*/
+function createSVG(obj) {
+	const viewBox = getViewBox(obj);
+	const name = "icon-" + obj.name;
+	return (0, vue.defineComponent)({
+		name: require_lineToLargeHump.lineToLargeHump(name),
+		props: {},
+		render() {
+			return (0, vue.h)("svg", {
+				xmlns,
+				"aria-hidden": true,
+				id: name,
+				ctype: "hcom",
+				role: "img",
+				class: "iconify iconify-" + obj.prefix,
+				viewBox,
+				innerHTML: obj.body
+			});
+		}
+	});
+}
+/**
+* 将图标配置转换为Vue组件并注册到应用中
+* @param app - Vue应用实例，用于注册组件
+* @param ify - 图标配置对象，包含前缀、尺寸和图标数据
+* @param options - 安装选项，可选参数
+* @param options.prefix - 组件名称前缀，默认使用defaultPrefix
+*/
+const iconify = (app, ify, { prefix = require_config.defaultPrefix } = {}) => {
+	const obj = {
+		prefix: ify.prefix,
+		width: ify.width,
+		height: ify.height
+	};
+	const icons = ify.icons;
+	for (const key of Object.keys(icons)) app.component(prefix + require_lineToLargeHump.lineToLargeHump(key), createSVG({
+		...obj,
+		name: key,
+		...icons[key]
+	}));
+	const aliases = ify.aliases;
+	for (const key of Object.keys(aliases)) {
+		const a = aliases[key];
+		app.component(prefix + require_lineToLargeHump.lineToLargeHump(key), createSVG({
+			...obj,
+			name: key,
+			...icons[a.parent]
+		}));
+	}
+};
+/**
+* 创建SVG图标组件
+* @param obj - 图标配置对象，包含图标的各项属性
+* @returns 返回一个Vue组件实例，用于渲染SVG图标
+*/
+function iconifySVG(obj, name) {
+	const icons = obj.icons;
+	const ap = obj.aliases[name]?.parent;
+	const n = icons[name] ?? (ap ? icons[ap] : void 0);
+	if (n) return createSVG({
+		prefix: obj.prefix,
+		name,
+		width: obj.width,
+		height: obj.height,
+		...n
+	});
+}
+function getIconifySVG(obj, name, str = "") {
+	const icons = obj.icons;
+	const ap = obj.aliases[name]?.parent;
+	const n = icons[name] ?? (ap ? icons[ap] : void 0);
+	if (n) return `<svg ${str} xmlns="${xmlns}" viewBox="${getViewBox({
+		prefix: obj.prefix,
+		name,
+		width: obj.width,
+		height: obj.height,
+		...n
+	})}">${n.body}</svg>`;
+}
+//#endregion
+exports.getIconifySVG = getIconifySVG;
+exports.getViewBox = getViewBox;
+exports.iconify = iconify;
+exports.iconifySVG = iconifySVG;