import { jsx as _jsx } from "react/jsx-runtime";
import { Suspense } from 'react';
import { iconComponents } from '../icon-components/index.js';
export function getDimensions(size) {
    if (!size)
        return {};
    if (typeof size === 'number') {
        return {
            width: `${size}px`,
            height: `${size}px`,
        };
    }
    return {
        width: size,
        height: size,
    };
}
const Icon = ({ name, size = 24, color, style, ...props }) => {
    const dimensions = getDimensions(size);
    const _style = {
        color,
        ...dimensions,
        style,
    };
    const IconComponent = iconComponents[name];
    return (
    // displays div with the same size while icon
    // loads to avoid UI displacement
    _jsx(Suspense, { fallback: _jsx("div", { "data-testid": "icon-fallback", style: dimensions }), name: "icon-component", children: _jsx(IconComponent, { "data-testid": "icon-fallback", ...props, style: _style }) }));
};
export { Icon };
//# sourceMappingURL=icon.js.map