@modul-es/icons 0.2.5 → 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.js +30 -10
- package/package.json +1 -1
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;
|
|
@@ -71,8 +73,26 @@ function Icon(_a) {
|
|
|
71
73
|
return iconName;
|
|
72
74
|
}, [name, set, style]);
|
|
73
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;
|
|
74
94
|
var loadSvg = function () { return __awaiter(_this, void 0, void 0, function () {
|
|
75
|
-
var
|
|
95
|
+
var response, svg, _a;
|
|
76
96
|
return __generator(this, function (_b) {
|
|
77
97
|
switch (_b.label) {
|
|
78
98
|
case 0:
|
|
@@ -80,36 +100,36 @@ function Icon(_a) {
|
|
|
80
100
|
_b.label = 1;
|
|
81
101
|
case 1:
|
|
82
102
|
_b.trys.push([1, 6, , 7]);
|
|
83
|
-
params = new URLSearchParams();
|
|
84
|
-
if (color !== 'currentColor') {
|
|
85
|
-
colorValue = (0, colors_1.resolveColor)(color).replace('#', '');
|
|
86
|
-
params.set('color', colorValue);
|
|
87
|
-
}
|
|
88
|
-
if (stroke)
|
|
89
|
-
params.set('stroke', stroke);
|
|
90
|
-
url = "https://modul.es/api/icons/".concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
|
|
91
103
|
return [4 /*yield*/, fetch(url, { mode: 'cors' })];
|
|
92
104
|
case 2:
|
|
93
105
|
response = _b.sent();
|
|
106
|
+
if (cancelled)
|
|
107
|
+
return [2 /*return*/];
|
|
94
108
|
if (!response.ok) return [3 /*break*/, 4];
|
|
95
109
|
return [4 /*yield*/, response.text()];
|
|
96
110
|
case 3:
|
|
97
111
|
svg = _b.sent();
|
|
112
|
+
svgCache.set(url, svg);
|
|
98
113
|
setSvgContent(svg);
|
|
99
114
|
return [3 /*break*/, 5];
|
|
100
115
|
case 4:
|
|
116
|
+
failedUrls.add(url);
|
|
101
117
|
setError(true);
|
|
102
118
|
_b.label = 5;
|
|
103
119
|
case 5: return [3 /*break*/, 7];
|
|
104
120
|
case 6:
|
|
105
121
|
_a = _b.sent();
|
|
106
|
-
|
|
122
|
+
if (!cancelled) {
|
|
123
|
+
failedUrls.add(url);
|
|
124
|
+
setError(true);
|
|
125
|
+
}
|
|
107
126
|
return [3 /*break*/, 7];
|
|
108
127
|
case 7: return [2 /*return*/];
|
|
109
128
|
}
|
|
110
129
|
});
|
|
111
130
|
}); };
|
|
112
131
|
loadSvg();
|
|
132
|
+
return function () { cancelled = true; };
|
|
113
133
|
}, [color, stroke, set, iconKey]);
|
|
114
134
|
var processedSvg = (0, react_1.useMemo)(function () {
|
|
115
135
|
if (!svgContent)
|