@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
37 lines • 1.74 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
var flipClasses = {
flipX: "scale-x-[-1]",
flipY: "scale-y-[-1]",
};
var rotateClasses = {
none: "",
45: "rotate-45",
90: "rotate-90",
135: "rotate-[135deg]",
180: "rotate-180",
225: "rotate-[225deg]",
270: "-rotate-90",
315: "rotate-[315deg]",
};
var baseUrl = "https://img.icons8.com";
var Icon = function (_a) {
var iconName = _a.iconName, iconId = _a.iconId, altText = _a.altText, _b = _a.iconSize, iconSize = _b === void 0 ? 40 : _b, iconColor = _a.iconColor, iconStyle = _a.iconStyle, _c = _a.flipX, flipX = _c === void 0 ? false : _c, _d = _a.flipY, flipY = _d === void 0 ? false : _d, _e = _a.rotate, rotate = _e === void 0 ? "none" : _e, className = _a.className, style = _a.style;
var colorPath = iconStyle ? "".concat(iconStyle, "/") : iconColor ? "".concat(iconColor.replace("#", "")) : "";
var queryParams = new URLSearchParams({
size: iconSize.toString(),
id: iconId || "4516",
format: "png",
color: colorPath || "000000",
});
var iconUrl = "";
if (iconName) {
iconUrl = "".concat(baseUrl, "/").concat(colorPath, "/").concat(iconSize, "/").concat(iconName, ".png");
}
else {
iconUrl = "".concat(baseUrl, "?").concat(queryParams.toString());
}
return (_jsx("img", { src: iconUrl, alt: altText || iconName || "Icon ID: ".concat(iconId), width: iconSize, height: iconSize, className: twMerge("icon ".concat(flipX ? flipClasses.flipX : "", " ").concat(flipY ? flipClasses.flipY : "", " ").concat(rotateClasses[rotate]), className), style: style }));
};
export default Icon;
//# sourceMappingURL=Icon.js.map