@modul-es/icons 0.1.6 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Icon.d.ts +2 -1
- package/dist/Icon.js +18 -7
- package/package.json +1 -1
package/dist/Icon.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export type IconSet = 'huge' | 'pixelart' | 'phosphor' | 'lucide';
|
|
2
|
+
export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2
3
|
export interface IconProps {
|
|
3
4
|
name: string;
|
|
4
5
|
color?: string;
|
|
@@ -6,6 +7,6 @@ export interface IconProps {
|
|
|
6
7
|
style?: 'sharp' | 'default' | 'fill' | 'thin' | 'light' | 'bold' | 'duotone';
|
|
7
8
|
set?: IconSet;
|
|
8
9
|
className?: string;
|
|
9
|
-
size?: number | string;
|
|
10
|
+
size?: IconSize | number | string;
|
|
10
11
|
}
|
|
11
12
|
export declare function Icon({ name, color, stroke, style, set, className, size }: IconProps): import("react/jsx-runtime").JSX.Element | null;
|
package/dist/Icon.js
CHANGED
|
@@ -40,9 +40,16 @@ exports.Icon = Icon;
|
|
|
40
40
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
41
41
|
var react_1 = require("react");
|
|
42
42
|
var colors_1 = require("./colors");
|
|
43
|
+
var SIZE_MAP = {
|
|
44
|
+
xs: 16,
|
|
45
|
+
sm: 20,
|
|
46
|
+
md: 24,
|
|
47
|
+
lg: 32,
|
|
48
|
+
xl: 40
|
|
49
|
+
};
|
|
43
50
|
function Icon(_a) {
|
|
44
51
|
var _this = this;
|
|
45
|
-
var name = _a.name, _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, stroke = _a.stroke, style = _a.style, _c = _a.set, set = _c === void 0 ? 'huge' : _c,
|
|
52
|
+
var name = _a.name, _b = _a.color, color = _b === void 0 ? 'currentColor' : _b, stroke = _a.stroke, style = _a.style, _c = _a.set, set = _c === void 0 ? 'huge' : _c, className = _a.className, _d = _a.size, size = _d === void 0 ? 'md' : _d;
|
|
46
53
|
var _e = (0, react_1.useState)(null), svgContent = _e[0], setSvgContent = _e[1];
|
|
47
54
|
var _f = (0, react_1.useState)(false), error = _f[0], setError = _f[1];
|
|
48
55
|
var iconKey = (0, react_1.useMemo)(function () {
|
|
@@ -99,16 +106,20 @@ function Icon(_a) {
|
|
|
99
106
|
var processedSvg = (0, react_1.useMemo)(function () {
|
|
100
107
|
if (!svgContent)
|
|
101
108
|
return null;
|
|
109
|
+
var iconSize = typeof size === 'string' && size in SIZE_MAP
|
|
110
|
+
? SIZE_MAP[size]
|
|
111
|
+
: typeof size === 'number'
|
|
112
|
+
? size
|
|
113
|
+
: 24;
|
|
102
114
|
var svg = svgContent;
|
|
103
115
|
svg = svg.replace(/<\?xml[^>]*\?>/g, '');
|
|
104
116
|
svg = svg.replace(/<!--[\s\S]*?-->/g, '');
|
|
105
|
-
svg = svg.replace(/<svg([^>]*)\s(?:width|height)="[^"]*"([^>]*)>/gi, '<svg$1$2>');
|
|
106
|
-
if (size) {
|
|
107
|
-
svg = svg.replace(/<svg([^>]*)>/i, "<svg$1 width=\"".concat(size, "\" height=\"").concat(size, "\">"));
|
|
108
|
-
}
|
|
109
117
|
svg = svg.replace(/<svg([^>]*)>/i, function (match, attrs) {
|
|
110
118
|
var newAttrs = attrs;
|
|
111
|
-
|
|
119
|
+
newAttrs = newAttrs.replace(/\s(?:width|height)="[^"]*"/gi, '');
|
|
120
|
+
newAttrs += " width=\"".concat(iconSize, "\" style=\"height: auto;\"");
|
|
121
|
+
if (className) {
|
|
122
|
+
newAttrs = newAttrs.replace(/\sclass="[^"]*"/gi, '');
|
|
112
123
|
newAttrs += " class=\"".concat(className, "\"");
|
|
113
124
|
}
|
|
114
125
|
if (set !== 'phosphor' && set !== 'lucide' && !newAttrs.includes('fill=')) {
|
|
@@ -124,5 +135,5 @@ function Icon(_a) {
|
|
|
124
135
|
if (error || !processedSvg) {
|
|
125
136
|
return null;
|
|
126
137
|
}
|
|
127
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
138
|
+
return ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: processedSvg } }));
|
|
128
139
|
}
|