import { jsx as _jsx } from "react/jsx-runtime";
import { omitThemingProps, useStyleConfig, vui } from '../core';
import { Svg } from '../svg';
import { cs, filterUndefined } from '../utils';
import { getIconDetails } from './helpers';
/** Displays and Svg element with a given icon. Handles icon names or definition objects. */
export const Icon = vui((props, ref) => {
    const { className, icon, name = props.icon, rotate, scale, ...rest } = omitThemingProps(props);
    const styles = useStyleConfig('Icon', props);
    const { customIcon, src } = getIconDetails(name);
    const scaledSize = scale ? 16 * scale : undefined;
    const aliasedProps = filterUndefined({
        h: scaledSize,
        transform: rotate !== undefined ? `rotate(${rotate}deg)` : undefined,
        w: scaledSize,
    });
    return (_jsx(Svg, { className: cs('vui-icon', className), clipRule: customIcon?.pathProps?.clipRule || props?.pathProps?.clipRule || undefined, display: "inline-flex", fillRule: customIcon?.pathProps?.fillRule || props?.pathProps?.fillRule || undefined, flexShrink: 0, ref: ref, src: src, ...styles, ...customIcon?.svgProps, ...aliasedProps, ...rest, children: customIcon?.d.map((d, i) => _jsx("path", { d: d, fill: "currentColor", ...customIcon.pathProps[i] }, i)) }));
});
Icon.displayName = 'Icon';
export default Icon;
//# sourceMappingURL=icon.js.map