@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
61 lines (60 loc) • 1.76 kB
JavaScript
import { getColor } from "@hitachivantara/uikit-styles";
import { createClasses, mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/IconContainer/IconContainer.tsx
var { staticClasses, useClasses } = createClasses("HvIconContainer", {
root: {
display: "inline-flex",
flex: "0 0 auto",
fontSize: `var(--isize, 16px)`,
transition: "rotate 0.2s ease",
justifyContent: "center",
alignItems: "center",
padding: 8
},
xs: {
fontSize: 12,
padding: 10
},
sm: { fontSize: 16 },
md: { fontSize: 32 },
lg: { fontSize: 96 },
xl: { fontSize: 112 }
});
/**
* This component allows using the theme utilities, such as `color` and `size` in icons from
* external icon libraries, such as FontAwesome or Phosphor.
*
* @example
* <HvIconContainer size="lg" color="warning">
* <FontAwesomeIcon icon={faUser} />
* </HvIconContainer>
*/
var HvIconContainer = forwardRef(function HvIconContainer(props, ref) {
const { className, classes: classesProp, style, color, size = "S", rotate, children, ...others } = useDefaultProps("HvIconContainer", props);
const { cx, classes } = useClasses(classesProp);
return /* @__PURE__ */ jsx("div", {
ref,
className: cx(classes.root, className, { [classes[mapSizes(size)]]: size }),
style: mergeStyles(style, {
"--isize": typeof size === "number" ? `${size}px` : void 0,
color: getColor(color),
rotate: rotate ? "180deg" : void 0,
...style
}),
...others,
children
});
});
function mapSizes(size) {
if (typeof size === "number") return void 0;
return {
XS: "xs",
S: "sm",
M: "md",
L: "lg"
}[size] || size;
}
//#endregion
export { HvIconContainer, staticClasses, useClasses };