@yamada-ui/icon
Version:
Yamada UI icon components
155 lines (153 loc) • 4.05 kB
JavaScript
"use client"
// src/icon.tsx
import {
forwardRef,
mergeVars,
omitThemeProps,
ui,
useComponentStyle
} from "@yamada-ui/core";
import { cx } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var Icon = forwardRef((props, ref) => {
const [styles, { size, ...mergedProps }] = useComponentStyle("Icon", props);
const {
as: element,
className,
fontSize = size,
viewBox,
__css,
...rest
} = omitThemeProps(mergedProps);
const css = {
...styles,
...__css,
vars: mergeVars(styles.vars, __css == null ? void 0 : __css.vars)
};
if (fontSize) {
css.vars = mergeVars(css.vars, [
{ name: "boxSize", token: "fontSizes", value: fontSize }
]);
css.boxSize = "$boxSize";
}
if (element && typeof element !== "string")
return /* @__PURE__ */ jsx(
ui.svg,
{
as: element,
className: cx("ui-icon", className),
"aria-hidden": true,
role: "img",
__css: css,
...rest
}
);
return /* @__PURE__ */ jsx(
ui.svg,
{
ref,
className: cx("ui-icon", className),
"aria-hidden": true,
role: "img",
verticalAlign: "middle",
viewBox,
__css: css,
...rest
}
);
});
Icon.displayName = "Icon";
Icon.__ui__ = "Icon";
var CheckIcon = (props) => {
return /* @__PURE__ */ jsxs(
Icon,
{
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
...props,
children: [
/* @__PURE__ */ jsx("path", { d: "M21.801 10A10 10 0 1 1 17 3.335" }),
/* @__PURE__ */ jsx("path", { d: "m9 11 3 3L22 4" })
]
}
);
};
CheckIcon.displayName = "CheckIcon";
CheckIcon.__ui__ = "CheckIcon";
var InfoIcon = (props) => {
return /* @__PURE__ */ jsxs(
Icon,
{
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
...props,
children: [
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
]
}
);
};
InfoIcon.displayName = "InfoIcon";
InfoIcon.__ui__ = "InfoIcon";
var WarningIcon = (props) => {
return /* @__PURE__ */ jsxs(
Icon,
{
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
...props,
children: [
/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
]
}
);
};
WarningIcon.displayName = "WarningIcon";
WarningIcon.__ui__ = "WarningIcon";
var CloseIcon = (props) => {
return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, focusable: "false", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
"path",
{
d: "M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z",
fill: "currentColor"
}
) });
};
CloseIcon.displayName = "CloseIcon";
CloseIcon.__ui__ = "CloseIcon";
var ChevronIcon = (props) => {
return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, focusable: "false", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
"path",
{
d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z",
fill: "currentColor"
}
) });
};
ChevronIcon.displayName = "ChevronIcon";
ChevronIcon.__ui__ = "ChevronIcon";
export {
Icon,
CheckIcon,
InfoIcon,
WarningIcon,
CloseIcon,
ChevronIcon
};
//# sourceMappingURL=chunk-WVAWCMPM.mjs.map