@madeja-studio/telar/lib/module/component/Button/Icon.js

UI component library by Madeja Studio

"use strict";

import tw from "../../tailwind/index.js";
import { useTheme } from "../../theme/ThemeContextProvider.js";
import { VectorIcon } from "../Icon/index.js";
import { Container } from "./Container.js";
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * This is the best component factory we could came up with that automatically builds the
 * icon component for you given (A) its type and (B) its name. We need both parameters to be
 * able to restrict the `name` property to accept only icons from the chosen icon family.
 */
export const Icon = ({
  color = 'primary',
  icon,
  iconTint,
  style,
  tint,
  variant = 'contained',
  ...props
}) => {
  const {
    theme
  } = useTheme();
  return /*#__PURE__*/_jsx(Container, {
    style: [tw`min-size-press rounded-2xl center`, variant === 'contained' ? {
      backgroundColor: tint ?? theme.button.color[color].background
    } : {}, variant === 'outlined' ? {
      borderColor: tint ?? theme.button.color[color].background,
      borderWidth: 2
    } : {}, style],
    ...props,
    children: /*#__PURE__*/_jsx(VectorIcon, {
      color: iconTint ?? (variant === 'contained' ? theme.button.color[color].text : theme.button.color[color].background),
      icon: icon,
      size: 24
    })
  });
};
//# sourceMappingURL=Icon.js.map