@progress/kendo-react-common
Version:
React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package
121 lines (120 loc) • 3.13 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use client";
import * as t from "react";
import n from "prop-types";
import { classNames as x } from "../classNames.mjs";
import { uSvgIcon as y } from "../unstyled/icons.mjs";
import { useUnstyled as O } from "../unstyled/main.mjs";
const M = t.forwardRef((e, b) => {
const {
children: p,
className: h,
svgClassName: z,
icon: i,
flip: m,
id: N,
tabIndex: I,
size: d,
style: s,
svgStyle: C,
themeColor: r,
viewBox: f,
name: j,
onClick: P,
...S
} = e, u = t.useRef(null), g = O(), a = g && g.uSvgIcon;
t.useImperativeHandle(
b,
() => ({
element: u.current
})
);
const v = t.useMemo(() => i ? i.name : l.icon, [i]), c = t.useMemo(() => i ? i.content : void 0, [i]), w = t.useMemo(() => d || l.size, [d]), o = t.useMemo(() => m || l.flip, [m]), B = t.useMemo(() => f || l.viewBox, [f]), H = t.useMemo(
() => x(
y.wrapper({
c: a,
iconNameProp: v,
themeColor: r,
flipH: o === "horizontal" || o === "both",
flipV: o === "vertical" || o === "both",
size: w
}),
h
),
[a, v, r, o, w, h]
), R = t.useMemo(() => e.width && e.height ? { width: e.width, height: e.height, ...s } : e.width ? { width: e.width, height: e.width, ...s } : e.height ? { width: e.height, height: e.height, ...s } : { ...s }, [e.width, e.height, s]), T = t.useMemo(
() => c ? { __html: c } : void 0,
[c]
);
return /* @__PURE__ */ t.createElement(
"span",
{
className: x(
y.svg({
c: a,
themeColor: r,
flipH: o === "horizontal" || o === "both",
flipV: o === "vertical" || o === "both"
}),
H
),
style: R,
ref: u,
onClick: P,
"aria-hidden": !0
},
/* @__PURE__ */ t.createElement(
"svg",
{
id: N,
className: z,
style: C,
"aria-hidden": !0,
tabIndex: I,
focusable: !1,
xmlns: "http://www.w3.org/2000/svg",
viewBox: i ? i.viewBox : B,
dangerouslySetInnerHTML: T,
...S
},
i ? void 0 : p
)
);
});
M.propTypes = {
style: n.object,
classNames: n.string,
children: n.any,
icon: n.object,
themeColor: n.oneOf([
"inherit",
"primary",
"secondary",
"tertiary",
"info",
"success",
"error",
"warning",
"dark",
"light",
"inverse"
]),
size: n.oneOf(["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge"]),
flip: n.oneOf(["default", "horizontal", "vertical", "both"])
};
const l = {
size: "default",
flip: "default",
icon: "",
viewBox: "0 0 24 24"
};
M.displayName = "KendoSvgIcon";
export {
M as SvgIcon
};