viconic-react-icons 1.1.7 → 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 +26 -5
  2. package/dist/index.mjs +26 -5
  3. package/package.json +1 -1
  4. package/src/index.jsx +30 -10
package/dist/index.js CHANGED
@@ -2016,7 +2016,29 @@ 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
2044
  const maxRetries = 100;
@@ -2031,11 +2053,10 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
2031
2053
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
2032
2054
  window.CopyIcons.forceProcess(el);
2033
2055
  }
2034
- if (isKitIcon && !hasTriggeredReload && retries === 10) {
2056
+ if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
2035
2057
  hasTriggeredReload = true;
2036
- const prefixMatch = name.match(/^@([^\/]+)/);
2037
- if (prefixMatch && window.CopyIconsKit) {
2038
- const prefix = prefixMatch[1];
2058
+ const prefix = prefixMatch[1];
2059
+ if (window.CopyIconsKit) {
2039
2060
  for (const kitId in window.CopyIconsKit) {
2040
2061
  const kit = window.CopyIconsKit[kitId];
2041
2062
  if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
package/dist/index.mjs CHANGED
@@ -1981,7 +1981,29 @@ 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
2009
  const maxRetries = 100;
@@ -1996,11 +2018,10 @@ var ViconicIcon = ({ name, className, style, size, color, ...props }) => {
1996
2018
  if (window.CopyIcons && window.CopyIcons.forceProcess && !isKitIcon) {
1997
2019
  window.CopyIcons.forceProcess(el);
1998
2020
  }
1999
- if (isKitIcon && !hasTriggeredReload && retries === 10) {
2021
+ if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
2000
2022
  hasTriggeredReload = true;
2001
- const prefixMatch = name.match(/^@([^\/]+)/);
2002
- if (prefixMatch && window.CopyIconsKit) {
2003
- const prefix = prefixMatch[1];
2023
+ const prefix = prefixMatch[1];
2024
+ if (window.CopyIconsKit) {
2004
2025
  for (const kitId in window.CopyIconsKit) {
2005
2026
  const kit = window.CopyIconsKit[kitId];
2006
2027
  if (kit.config && kit.config.prefix === prefix && typeof kit.reload === "function") {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "viconic-react-icons",
3
- "version": "1.1.7",
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,10 +86,33 @@ 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;
@@ -110,13 +133,10 @@ export const ViconicIcon = ({ name, className, style, size, color, ...props }) =
110
133
  }
111
134
 
112
135
  // HMR / Missing Kit Icon Fallback:
113
- // If it's a kit icon and hasn't loaded after 1 second, it might be newly added
114
- // in the Viconic Dashboard. We trigger a background reload of the kit.
115
- if (isKitIcon && !hasTriggeredReload && retries === 10) {
136
+ if (isKitIcon && !hasTriggeredReload && retries === 10 && prefixMatch) {
116
137
  hasTriggeredReload = true;
117
- const prefixMatch = name.match(/^@([^\/]+)/);
118
- if (prefixMatch && window.CopyIconsKit) {
119
- const prefix = prefixMatch[1];
138
+ const prefix = prefixMatch[1];
139
+ if (window.CopyIconsKit) {
120
140
  for (const kitId in window.CopyIconsKit) {
121
141
  const kit = window.CopyIconsKit[kitId];
122
142
  if (kit.config && kit.config.prefix === prefix && typeof kit.reload === 'function') {