feat: allow preloading of icons

.changeset/fuzzy-carrots-drive.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix-icons": patch
+---
+
+Allow preloading of specific icons.

src/components/icon/resolveIcon.ts

@@ -85,12 +85,15 @@ async function fetchSVG(url: string) {
     const svgContent = parseSVGDataContent(responseText);
     cache.set(url, svgContent);
 
+    requests.delete(url);
+
     return svgContent;
   });
 
   requests.set(url, fetching);
   return fetching;
 }
+
 const urlRegex = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:www\.)?(?:\S+\.\S+)(?:\S*)$/i;
 
 function isValidUrl(url: string) {
@@ -99,11 +102,13 @@ function isValidUrl(url: string) {
 
 export function getIconUrl(name: string) {
   const customAssetUrl = getCustomAssetUrl();
+
   if (customAssetUrl) {
     return `${customAssetUrl}/${name}.svg`;
   }
 
   let url: string = `svg/${name}.svg`;
+
   try {
     url = getAssetPath(url);
   } catch (error) {
@@ -124,6 +129,10 @@ export async function resolveIcon(iconName: string) {
     return parseSVGDataContent(iconName);
   }
 
+  return await loadIcon(iconName);
+}
+
+async function loadIcon(iconName: string) {
   if (isValidUrl(iconName)) {
     try {
       return fetchSVG(iconName);
@@ -135,6 +144,10 @@ export async function resolveIcon(iconName: string) {
   try {
     return fetchSVG(getIconUrl(iconName));
   } catch (error) {
-    throw Error('Cannot resolve any icon');
+    throw Error(`Could not resolve ${iconName}`);
   }
 }
+
+export function loadIcons(icons: string[]) {
+  icons.map(icon => loadIcon(icon));
+}

src/components/icon/test/ix-icon.spec.tsx

@@ -3,7 +3,7 @@
  */
 import { newSpecPage } from '@stencil/core/testing';
 import { Icon } from '../icon';
-import { rocket } from './rocker-example';
+import { rocket } from './rocket-example';
 
 //@ts-ignore
 global.fetch = jest.fn(() =>

src/components/icon/test/resolveIcon.spec.ts

@@ -2,7 +2,8 @@
  * COPYRIGHT (c) Siemens AG 2018-2023 ALL RIGHTS RESERVED.
  */
 import { iconStar } from '../icons';
-import { resolveIcon, getIconCacheMap, getIconUrl, parseSVGDataContent } from '../resolveIcon';
+import { resolveIcon, getIconCacheMap, getIconUrl, parseSVGDataContent, loadIcons } from '../resolveIcon';
+
 const exampleSvg = `
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -22,6 +23,9 @@ const invalidexampleSvg = `
 </script>
 `;
 
+const urlInvalid = 'http://localhost/invalid.svg';
+const urlTest = 'http://localhost/test.svg';
+
 jest.mock('../meta-tag');
 jest.mock('../icons', () => ({
   iconStar: exampleSvg,
@@ -43,14 +47,14 @@ let fetch = (global.fetch = jest.fn((url: string) => {
     });
   }
 
-  if (url === 'http://localhost/test.svg') {
+  if (url === urlTest) {
     return Promise.resolve({
       text: () => Promise.resolve(exampleSvg),
       ok: true,
     });
   }
 
-  if (url === 'http://localhost/invalid.svg') {
+  if (url === urlInvalid) {
     return Promise.resolve({
       text: () => Promise.resolve(invalidexampleSvg),
       ok: true,
@@ -72,15 +76,15 @@ describe('resolve icon', () => {
   });
 
   it('should resolve svg from src', async () => {
-    const expectedName = await resolveIcon('http://localhost/test.svg');
+    const expectedName = await resolveIcon(urlTest);
 
     expect(expectedName).toEqual(
       `<svg width=\"512px\" height=\"512px\" viewBox=\"0 0 512 512\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"> <title>add</title> <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"> <g id=\"Shape\" fill=\"#000000\" transform=\"translate(65.929697, 65.929697)\"> <polygon points=\"211.189225 2.36847579e-14 211.189225 168.95138 380.140606 168.95138 380.140606 211.189225 211.189225 211.189225 211.189225 380.140606 168.95138 380.140606 168.95138 211.189225 -1.42108547e-14 211.189225 -1.42108547e-14 168.95138 168.95138 168.95138 168.95138 -1.42108547e-14\"></polygon> </g> </g> </svg>`,
     );
   });
 
   it('should not resolve invalid svg from src', async () => {
-    const icon = 'http://localhost/invalid.svg';
+    const icon = urlInvalid;
 
     await expect(resolveIcon(icon)).rejects.toThrow('No valid svg data provided');
   });
@@ -92,8 +96,6 @@ test('fill cache map if not loaded', async () => {
   const cacheMap = getIconCacheMap();
   cacheMap.clear();
 
-  expect(cacheMap.size).toBe(0);
-
   const data = await resolveIcon('star');
 
   expect(data).toBe(parseSVGDataContent(iconStar));
@@ -111,3 +113,18 @@ test('preload custom icon', async () => {
   const data = await resolveIcon('star');
   expect(data).toBe('<svg>Test</svg>');
 });
+
+test('load icons', async () => {
+  fetch.mockClear();
+
+  const cacheMap = getIconCacheMap();
+  cacheMap.clear();
+
+  const icons = ['star', urlTest];
+
+  loadIcons(icons);
+
+  const urlStar = getIconUrl('star');
+
+  expect(fetch.mock.calls).toEqual([[urlStar], [urlTest]]);
+});