norma-library
Version:
Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.
50 lines • 2.58 kB
JavaScript
import { __assign, __makeTemplateObject, __rest } from "tslib";
import styled from '@emotion/styled';
import { useTheme } from '@mui/material';
import React from 'react';
import { iconsSVG } from './Svgs';
export var Svg = styled.svg({
shapeRendering: 'inherit',
transform: 'translate3d(0,0,0)',
}, function (_a) {
var inline = _a.inline;
return (inline ? { display: 'inline-block' } : { display: 'block' });
});
var scaleSize = {
xsmall: 14,
small: 20,
medium: 24,
large: 28,
xlarge: 32,
'2xlarge': 36,
'3xlarge': 40,
};
export var Icons = function (_a) {
var icon = _a.icon, scale = _a.scale, useSymbol = _a.useSymbol, _b = _a.color, color = _b === void 0 ? 'inherit' : _b, props = __rest(_a, ["icon", "scale", "useSymbol", "color"]);
var theme = useTheme();
var colors = {
primary: theme.palette.primary.main,
secondary: theme.palette.secondary.main,
error: theme.palette.error.main,
info: theme.palette.info.main,
success: theme.palette.success.main,
warning: theme.palette.warning.main,
action: theme.palette.action.disabled,
inherit: theme.palette.text.primary,
white: '#ffffff',
black: '#000000',
};
var width = 24;
var height = 24;
if (scale) {
width = scaleSize[scale] || 24;
height = scaleSize[scale] || 24;
}
var fill = colors[color] || color;
var stroke = colors[color] || color;
var Svg = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-block;\n shape-rendering: inherit;\n vertical-align: middle;\n fill: ", ";\n path {\n stroke: ", ";\n }\n circle {\n stroke: ", ";\n }\n rect {\n stroke: ", ";\n }\n "], ["\n display: inline-block;\n shape-rendering: inherit;\n vertical-align: middle;\n fill: ", ";\n path {\n stroke: ", ";\n }\n circle {\n stroke: ", ";\n }\n rect {\n stroke: ", ";\n }\n "])), fill, stroke, stroke, stroke);
var isMuiIcon = typeof icon !== 'string';
return (React.createElement(Svg, __assign({ viewBox: "0 0 56 56", width: "".concat(width, "px"), height: "".concat(height, "px") }, props), useSymbol ? (React.createElement("use", { xlinkHref: "#icon--".concat(icon), fill: fill, stroke: stroke })) : isMuiIcon ? (React.createElement(icon, { style: { fill: fill, stroke: stroke } })) : (React.cloneElement(iconsSVG[icon], { fill: fill, stroke: stroke }))));
};
var templateObject_1;
//# sourceMappingURL=Icons.js.map