@smitch/fluid
Version:
A Next/React ui-component libray.
41 lines (40 loc) • 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;