import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import Svg from "../svg/svg.js";
import { getIconDetails } from "./helpers.js";
import { jsx } from "react/jsx-runtime";

//#region src/icon/icon.tsx
/** Displays and Svg element with a given icon. Handles icon names or definition objects. */
const Icon = vui((props, ref) => {
	const { className, name, rotate, scale, ...rest } = omitThemingProps(props);
	const styles = useStyleConfig("Icon", props);
	const { customIcon, src } = getIconDetails(name);
	const scaledSize = scale ? 16 * scale : void 0;
	const aliasedProps = filterUndefined({
		h: scaledSize,
		transform: rotate !== void 0 ? `rotate(${rotate}deg)` : void 0,
		w: scaledSize
	});
	return /* @__PURE__ */ jsx(Svg, {
		className: cs("vui-icon", className),
		clipRule: (customIcon?.pathProps)?.clipRule || props?.pathProps?.clipRule || "evenodd",
		display: "inline-flex",
		fillRule: (customIcon?.pathProps)?.fillRule || props?.pathProps?.fillRule || "evenodd",
		flexShrink: 0,
		ref,
		src,
		...styles,
		...customIcon?.svgProps,
		...aliasedProps,
		...rest,
		children: customIcon?.d.map((d, i) => /* @__PURE__ */ jsx("path", {
			d,
			fill: "currentColor",
			...customIcon.pathProps[i]
		}, i))
	});
});
Icon.displayName = "Icon";

//#endregion
export { Icon as default };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=icon.js.map