@modul-es/icons 0.2.4 → 0.2.6
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 +1 -1
- package/dist/Icon.js +41 -13
- package/package.json +1 -1
package/dist/Icon.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ export interface IconProps {
|
|
|
4
4
|
name: string;
|
|
5
5
|
color?: string;
|
|
6
6
|
stroke?: string;
|
|
7
|
-
style?: 'sharp' | 'default' | 'fill' | 'thin' | 'light' | 'bold' | 'duotone';
|
|
7
|
+
style?: 'sharp' | 'default' | 'fill' | 'sharp-fill' | 'thin' | 'light' | 'bold' | 'duotone';
|
|
8
8
|
set?: IconSet;
|
|
9
9
|
className?: string;
|
|
10
10
|
size?: IconSize | number | string;
|
package/dist/Icon.js
CHANGED
|
@@ -47,6 +47,8 @@ var SIZE_MAP = {
|
|
|
47
47
|
lg: 32,
|
|
48
48
|
xl: 40
|
|
49
49
|
};
|
|
50
|
+
var svgCache = new Map();
|
|
51
|
+
var failedUrls = new Set();
|
|
50
52
|
function Icon(_a) {
|
|
51
53
|
var _this = this;
|
|
52
54
|
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;
|
|
@@ -54,17 +56,43 @@ function Icon(_a) {
|
|
|
54
56
|
var _f = (0, react_1.useState)(false), error = _f[0], setError = _f[1];
|
|
55
57
|
var iconKey = (0, react_1.useMemo)(function () {
|
|
56
58
|
var iconName = name.replace('.svg', '');
|
|
57
|
-
if (set === 'phosphor' &&
|
|
59
|
+
if (set === 'phosphor' && (style === 'thin' || style === 'light' || style === 'bold' || style === 'fill' || style === 'duotone')) {
|
|
58
60
|
iconName = "".concat(iconName, ".").concat(style);
|
|
59
61
|
}
|
|
60
|
-
if (set === 'huge'
|
|
61
|
-
|
|
62
|
+
if (set === 'huge') {
|
|
63
|
+
if (style === 'sharp') {
|
|
64
|
+
iconName = "".concat(iconName, ".sharp");
|
|
65
|
+
}
|
|
66
|
+
else if (style === 'fill') {
|
|
67
|
+
iconName = "".concat(iconName, ".fill");
|
|
68
|
+
}
|
|
69
|
+
else if (style === 'sharp-fill') {
|
|
70
|
+
iconName = "".concat(iconName, ".sharp.fill");
|
|
71
|
+
}
|
|
62
72
|
}
|
|
63
73
|
return iconName;
|
|
64
74
|
}, [name, set, style]);
|
|
65
75
|
(0, react_1.useEffect)(function () {
|
|
76
|
+
var params = new URLSearchParams();
|
|
77
|
+
if (color !== 'currentColor') {
|
|
78
|
+
var colorValue = (0, colors_1.resolveColor)(color).replace('#', '');
|
|
79
|
+
params.set('color', colorValue);
|
|
80
|
+
}
|
|
81
|
+
if (stroke)
|
|
82
|
+
params.set('stroke', stroke);
|
|
83
|
+
var url = "https://modul.es/api/icons/".concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
|
|
84
|
+
if (failedUrls.has(url)) {
|
|
85
|
+
setError(true);
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
88
|
+
var cached = svgCache.get(url);
|
|
89
|
+
if (cached) {
|
|
90
|
+
setSvgContent(cached);
|
|
91
|
+
return;
|
|
92
|
+
}
|
|
93
|
+
var cancelled = false;
|
|
66
94
|
var loadSvg = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
67
|
-
var
|
|
95
|
+
var response, svg, _a;
|
|
68
96
|
return __generator(this, function (_b) {
|
|
69
97
|
switch (_b.label) {
|
|
70
98
|
case 0:
|
|
@@ -72,36 +100,36 @@ function Icon(_a) {
|
|
|
72
100
|
_b.label = 1;
|
|
73
101
|
case 1:
|
|
74
102
|
_b.trys.push([1, 6, , 7]);
|
|
75
|
-
params = new URLSearchParams();
|
|
76
|
-
if (color !== 'currentColor') {
|
|
77
|
-
colorValue = (0, colors_1.resolveColor)(color).replace('#', '');
|
|
78
|
-
params.set('color', colorValue);
|
|
79
|
-
}
|
|
80
|
-
if (stroke)
|
|
81
|
-
params.set('stroke', stroke);
|
|
82
|
-
url = "https://modul.es/api/icons/".concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
|
|
83
103
|
return [4 /*yield*/, fetch(url, { mode: 'cors' })];
|
|
84
104
|
case 2:
|
|
85
105
|
response = _b.sent();
|
|
106
|
+
if (cancelled)
|
|
107
|
+
return [2 /*return*/];
|
|
86
108
|
if (!response.ok) return [3 /*break*/, 4];
|
|
87
109
|
return [4 /*yield*/, response.text()];
|
|
88
110
|
case 3:
|
|
89
111
|
svg = _b.sent();
|
|
112
|
+
svgCache.set(url, svg);
|
|
90
113
|
setSvgContent(svg);
|
|
91
114
|
return [3 /*break*/, 5];
|
|
92
115
|
case 4:
|
|
116
|
+
failedUrls.add(url);
|
|
93
117
|
setError(true);
|
|
94
118
|
_b.label = 5;
|
|
95
119
|
case 5: return [3 /*break*/, 7];
|
|
96
120
|
case 6:
|
|
97
121
|
_a = _b.sent();
|
|
98
|
-
|
|
122
|
+
if (!cancelled) {
|
|
123
|
+
failedUrls.add(url);
|
|
124
|
+
setError(true);
|
|
125
|
+
}
|
|
99
126
|
return [3 /*break*/, 7];
|
|
100
127
|
case 7: return [2 /*return*/];
|
|
101
128
|
}
|
|
102
129
|
});
|
|
103
130
|
}); };
|
|
104
131
|
loadSvg();
|
|
132
|
+
return function () { cancelled = true; };
|
|
105
133
|
}, [color, stroke, set, iconKey]);
|
|
106
134
|
var processedSvg = (0, react_1.useMemo)(function () {
|
|
107
135
|
if (!svgContent)
|