@modul-es/icons 0.2.6 → 0.2.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.
Files changed (2) hide show
  1. package/dist/Icon.js +41 -31
  2. package/package.json +1 -1
package/dist/Icon.js CHANGED
@@ -49,11 +49,19 @@ var SIZE_MAP = {
49
49
  };
50
50
  var svgCache = new Map();
51
51
  var failedUrls = new Set();
52
+ function buildUrl(set, iconKey, color, stroke) {
53
+ var params = new URLSearchParams();
54
+ if (color !== 'currentColor') {
55
+ var colorValue = (0, colors_1.resolveColor)(color).replace('#', '');
56
+ params.set('color', colorValue);
57
+ }
58
+ if (stroke)
59
+ params.set('stroke', stroke);
60
+ return "https://modul.es/api/icons/".concat(set, "/").concat(iconKey, ".svg").concat(params.toString() ? "?".concat(params.toString()) : '');
61
+ }
52
62
  function Icon(_a) {
53
63
  var _this = this;
54
64
  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;
55
- var _e = (0, react_1.useState)(null), svgContent = _e[0], setSvgContent = _e[1];
56
- var _f = (0, react_1.useState)(false), error = _f[0], setError = _f[1];
57
65
  var iconKey = (0, react_1.useMemo)(function () {
58
66
  var iconName = name.replace('.svg', '');
59
67
  if (set === 'phosphor' && (style === 'thin' || style === 'light' || style === 'bold' || style === 'fill' || style === 'duotone')) {
@@ -72,65 +80,67 @@ function Icon(_a) {
72
80
  }
73
81
  return iconName;
74
82
  }, [name, set, style]);
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
- }
83
+ var url = (0, react_1.useMemo)(function () { return buildUrl(set, iconKey, color, stroke); }, [set, iconKey, color, stroke]);
84
+ var _e = (0, react_1.useState)(function () { var _a; return (_a = svgCache.get(url)) !== null && _a !== void 0 ? _a : null; }), svgContent = _e[0], setSvgContent = _e[1];
85
+ var _f = (0, react_1.useState)(function () { return failedUrls.has(url); }), error = _f[0], setError = _f[1];
86
+ var _g = (0, react_1.useState)(url), currentUrl = _g[0], setCurrentUrl = _g[1];
87
+ if (currentUrl !== url) {
88
+ setCurrentUrl(url);
88
89
  var cached = svgCache.get(url);
89
90
  if (cached) {
90
91
  setSvgContent(cached);
91
- return;
92
+ setError(false);
93
+ }
94
+ else if (failedUrls.has(url)) {
95
+ setSvgContent(null);
96
+ setError(true);
92
97
  }
98
+ else {
99
+ setSvgContent(null);
100
+ setError(false);
101
+ }
102
+ }
103
+ (0, react_1.useEffect)(function () {
104
+ if (svgCache.has(url) || failedUrls.has(url))
105
+ return;
93
106
  var cancelled = false;
94
107
  var loadSvg = function () { return __awaiter(_this, void 0, void 0, function () {
95
108
  var response, svg, _a;
96
109
  return __generator(this, function (_b) {
97
110
  switch (_b.label) {
98
111
  case 0:
99
- setError(false);
100
- _b.label = 1;
101
- case 1:
102
- _b.trys.push([1, 6, , 7]);
112
+ _b.trys.push([0, 5, , 6]);
103
113
  return [4 /*yield*/, fetch(url, { mode: 'cors' })];
104
- case 2:
114
+ case 1:
105
115
  response = _b.sent();
106
116
  if (cancelled)
107
117
  return [2 /*return*/];
108
- if (!response.ok) return [3 /*break*/, 4];
118
+ if (!response.ok) return [3 /*break*/, 3];
109
119
  return [4 /*yield*/, response.text()];
110
- case 3:
120
+ case 2:
111
121
  svg = _b.sent();
112
122
  svgCache.set(url, svg);
113
123
  setSvgContent(svg);
114
- return [3 /*break*/, 5];
115
- case 4:
124
+ return [3 /*break*/, 4];
125
+ case 3:
116
126
  failedUrls.add(url);
117
127
  setError(true);
118
- _b.label = 5;
119
- case 5: return [3 /*break*/, 7];
120
- case 6:
128
+ _b.label = 4;
129
+ case 4: return [3 /*break*/, 6];
130
+ case 5:
121
131
  _a = _b.sent();
122
132
  if (!cancelled) {
123
133
  failedUrls.add(url);
124
134
  setError(true);
125
135
  }
126
- return [3 /*break*/, 7];
127
- case 7: return [2 /*return*/];
136
+ return [3 /*break*/, 6];
137
+ case 6: return [2 /*return*/];
128
138
  }
129
139
  });
130
140
  }); };
131
141
  loadSvg();
132
142
  return function () { cancelled = true; };
133
- }, [color, stroke, set, iconKey]);
143
+ }, [url]);
134
144
  var processedSvg = (0, react_1.useMemo)(function () {
135
145
  if (!svgContent)
136
146
  return null;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul-es/icons",
3
- "version": "0.2.6",
3
+ "version": "0.2.7",
4
4
  "description": "Icon component system",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",