@modul-es/icons 0.1.5 → 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 +21 -13
- 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 () {
|
|
@@ -57,7 +64,7 @@ function Icon(_a) {
|
|
|
57
64
|
}, [name, set, style]);
|
|
58
65
|
(0, react_1.useEffect)(function () {
|
|
59
66
|
var loadSvg = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
60
|
-
var params, colorValue,
|
|
67
|
+
var params, colorValue, url, response, svg, _a;
|
|
61
68
|
return __generator(this, function (_b) {
|
|
62
69
|
switch (_b.label) {
|
|
63
70
|
case 0:
|
|
@@ -72,11 +79,8 @@ function Icon(_a) {
|
|
|
72
79
|
}
|
|
73
80
|
if (stroke)
|
|
74
81
|
params.set('stroke', stroke);
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
baseUrl = isDev ? '' : 'https://modul.es';
|
|
78
|
-
url = "".concat(baseUrl, "/api/icons/").concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
|
|
79
|
-
return [4 /*yield*/, fetch(url, isDev ? {} : { mode: 'cors' })];
|
|
82
|
+
url = "https://modul.es/api/icons/".concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
|
|
83
|
+
return [4 /*yield*/, fetch(url, { mode: 'cors' })];
|
|
80
84
|
case 2:
|
|
81
85
|
response = _b.sent();
|
|
82
86
|
if (!response.ok) return [3 /*break*/, 4];
|
|
@@ -102,16 +106,20 @@ function Icon(_a) {
|
|
|
102
106
|
var processedSvg = (0, react_1.useMemo)(function () {
|
|
103
107
|
if (!svgContent)
|
|
104
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;
|
|
105
114
|
var svg = svgContent;
|
|
106
115
|
svg = svg.replace(/<\?xml[^>]*\?>/g, '');
|
|
107
116
|
svg = svg.replace(/<!--[\s\S]*?-->/g, '');
|
|
108
|
-
svg = svg.replace(/<svg([^>]*)\s(?:width|height)="[^"]*"([^>]*)>/gi, '<svg$1$2>');
|
|
109
|
-
if (size) {
|
|
110
|
-
svg = svg.replace(/<svg([^>]*)>/i, "<svg$1 width=\"".concat(size, "\" height=\"").concat(size, "\">"));
|
|
111
|
-
}
|
|
112
117
|
svg = svg.replace(/<svg([^>]*)>/i, function (match, attrs) {
|
|
113
118
|
var newAttrs = attrs;
|
|
114
|
-
|
|
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, '');
|
|
115
123
|
newAttrs += " class=\"".concat(className, "\"");
|
|
116
124
|
}
|
|
117
125
|
if (set !== 'phosphor' && set !== 'lucide' && !newAttrs.includes('fill=')) {
|
|
@@ -127,5 +135,5 @@ function Icon(_a) {
|
|
|
127
135
|
if (error || !processedSvg) {
|
|
128
136
|
return null;
|
|
129
137
|
}
|
|
130
|
-
return ((0, jsx_runtime_1.jsx)("div", {
|
|
138
|
+
return ((0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: processedSvg } }));
|
|
131
139
|
}
|