viconic-react-icons 1.1.6 → 1.1.8

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 (4) hide show
  1. package/dist/index.js +38 -2
  2. package/dist/index.mjs +38 -2
  3. package/package.json +1 -1
  4. package/src/index.jsx +46 -5
package/dist/index.js CHANGED
@@ -2016,10 +2016,33 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
2016
2016
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
2017
2017
  window.CopyIcons.forceProcess(el);
2018
2018
  }
2019
- const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
2019
+ let isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
2020
+ const prefixMatch = isKitIcon ? name.match(/^@([^\/]+)\/(.+)$/) : null;
2021
+ if (isKitIcon && !isLoaded && prefixMatch) {
2022
+ const iconBaseName = prefixMatch[2];
2023
+ try {
2024
+ for (let i = 0; i < localStorage.length; i++) {
2025
+ const key = localStorage.key(i);
2026
+ if (key && key.startsWith("vi_kit_")) {
2027
+ const raw = localStorage.getItem(key);
2028
+ if (raw) {
2029
+ const c = JSON.parse(raw);
2030
+ if (c && c.d && c.d[iconBaseName]) {
2031
+ el.innerHTML = c.d[iconBaseName];
2032
+ el.classList.add("vi-ok", "svg-loaded");
2033
+ isLoaded = true;
2034
+ break;
2035
+ }
2036
+ }
2037
+ }
2038
+ }
2039
+ } catch (e) {
2040
+ }
2041
+ }
2020
2042
  if (isLoaded) return;
2021
2043
  let retries = 0;
2022
- const maxRetries = 50;
2044
+ const maxRetries = 100;
2045
+ let hasTriggeredReload = false;
2023
2046
  const timer = setInterval(() => {
2024
2047
  retries++;
2025
2048
  if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
@@ -2030,6 +2053,19 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
2030
2053
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
2031
2054
  window.CopyIcons.forceProcess(el);
2032
2055
  }
2056
+ if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
2057
+ hasTriggeredReload = true;
2058
+ const prefix = prefixMatch[1];
2059
+ if (window.CopyIconsKit) {
2060
+ for (const kitId in window.CopyIconsKit) {
2061
+ const kit = window.CopyIconsKit[kitId];
2062
+ if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
2063
+ kit.reload();
2064
+ break;
2065
+ }
2066
+ }
2067
+ }
2068
+ }
2033
2069
  if (retries >= maxRetries) clearInterval(timer);
2034
2070
  }, 100);
2035
2071
  return () => clearInterval(timer);
package/dist/index.mjs CHANGED
@@ -1981,10 +1981,33 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
1981
1981
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
1982
1982
  window.CopyIcons.forceProcess(el);
1983
1983
  }
1984
- const isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
1984
+ let isLoaded = el.classList.contains("vi-ok") || el.classList.contains("svg-loaded");
1985
+ const prefixMatch = isKitIcon ? name.match(/^@([^\/]+)\/(.+)$/) : null;
1986
+ if (isKitIcon && !isLoaded && prefixMatch) {
1987
+ const iconBaseName = prefixMatch[2];
1988
+ try {
1989
+ for (let i = 0; i < localStorage.length; i++) {
1990
+ const key = localStorage.key(i);
1991
+ if (key && key.startsWith("vi_kit_")) {
1992
+ const raw = localStorage.getItem(key);
1993
+ if (raw) {
1994
+ const c = JSON.parse(raw);
1995
+ if (c && c.d && c.d[iconBaseName]) {
1996
+ el.innerHTML = c.d[iconBaseName];
1997
+ el.classList.add("vi-ok", "svg-loaded");
1998
+ isLoaded = true;
1999
+ break;
2000
+ }
2001
+ }
2002
+ }
2003
+ }
2004
+ } catch (e) {
2005
+ }
2006
+ }
1985
2007
  if (isLoaded) return;
1986
2008
  let retries = 0;
1987
- const maxRetries = 50;
2009
+ const maxRetries = 100;
2010
+ let hasTriggeredReload = false;
1988
2011
  const timer = setInterval(() => {
1989
2012
  retries++;
1990
2013
  if (el.classList.contains("vi-ok") || el.classList.contains("svg-loaded")) {
@@ -1995,6 +2018,19 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
1995
2018
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
1996
2019
  window.CopyIcons.forceProcess(el);
1997
2020
  }
2021
+ if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
2022
+ hasTriggeredReload = true;
2023
+ const prefix = prefixMatch[1];
2024
+ if (window.CopyIconsKit) {
2025
+ for (const kitId in window.CopyIconsKit) {
2026
+ const kit = window.CopyIconsKit[kitId];
2027
+ if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
2028
+ kit.reload();
2029
+ break;
2030
+ }
2031
+ }
2032
+ }
2033
+ }
1998
2034
  if (retries >= maxRetries) clearInterval(timer);
1999
2035
  }, 100);
2000
2036
  return () => clearInterval(timer);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "viconic-react-icons",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "Viconic Smart Icons loader for React — supports Kit and 200k+ system icons",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/src/index.jsx CHANGED
@@ -86,14 +86,39 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
86
86
  window.CopyIcons.forceProcess(el);
87
87
  }
88
88
 
89
- // Path 2: Kit icons — kit loader.js registers icons async into
90
- // window.__viconic.icons and the custom element _u() method handles injection.
91
- // If kit hasn't loaded yet, retry periodically until icon appears.
92
- const isLoaded = el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
89
+ // Path 2: Fast-path for Kit icons using local cache!
90
+ // The async <script> takes 100-300ms to download loader.js, causing a visible flash on Reloads.
91
+ // We eliminate this completely by intercepting the React effect and injecting SVGs directly from the browser's Cache at 0ms.
92
+ let isLoaded = el.classList.contains('vi-ok') || el.classList.contains('svg-loaded');
93
+ const prefixMatch = isKitIcon ? name.match(/^@([^\/]+)\/(.+)$/) : null;
94
+
95
+ if (isKitIcon && !isLoaded && prefixMatch) {
96
+ const iconBaseName = prefixMatch[2];
97
+ try {
98
+ for (let i = 0; i < localStorage.length; i++) {
99
+ const key = localStorage.key(i);
100
+ if (key && key.startsWith('vi_kit_')) {
101
+ const raw = localStorage.getItem(key);
102
+ if (raw) {
103
+ const c = JSON.parse(raw);
104
+ if (c && c.d && c.d[iconBaseName]) {
105
+ el.innerHTML = c.d[iconBaseName];
106
+ el.classList.add('vi-ok', 'svg-loaded');
107
+ isLoaded = true;
108
+ break;
109
+ }
110
+ }
111
+ }
112
+ }
113
+ } catch (e) {}
114
+ }
115
+
93
116
  if (isLoaded) return;
94
117
 
95
118
  let retries = 0;
96
- const maxRetries = 50; // 50 × 100ms = 5 seconds max
119
+ const maxRetries = 100; // 100 × 100ms = 10 seconds max
120
+ let hasTriggeredReload = false;
121
+
97
122
  const timer = setInterval(() => {
98
123
  retries++;
99
124
  if (el.classList.contains('vi-ok') || el.classList.contains('svg-loaded')) {
@@ -106,6 +131,22 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
106
131
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
107
132
  window.CopyIcons.forceProcess(el);
108
133
  }
134
+
135
+ // HMR / Missing Kit Icon Fallback:
136
+ if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
137
+ hasTriggeredReload = true;
138
+ const prefix = prefixMatch[1];
139
+ if (window.CopyIconsKit) {
140
+ for (const kitId in window.CopyIconsKit) {
141
+ const kit = window.CopyIconsKit[kitId];
142
+ if (kit.config && kit.config.prefix === prefix && typeof kit.reload === 'function') {
143
+ kit.reload();
144
+ break;
145
+ }
146
+ }
147
+ }
148
+ }
149
+
109
150
  if (retries >= maxRetries) clearInterval(timer);
110
151
  }, 100);
111
152