feat: remove bundle svg data (#64)

* feat: add legacy cache map

* fix asset path

* changelog

* remove import

* remove legacy code part

* fix import path

* fix: remove comment

* fix: expose all asset utils

* fix: remove commonjs support

* fix: make fallback to window origin

* fix: types

* update to latest stencil version

* test: fix build env for e2e test

* docs: adapt review comments

.changeset/little-baboons-cry.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix-icons': major
+---
+
+feat: remove prebundled icons

.gitignore

@@ -40,3 +40,6 @@ icons/
 /playwright-report/
 /playwright/.cache/
 /svg
+/components
+/e2e/sample.json
+src/components/icon/svg/*.svg

BREAKING_CHANGES.md

@@ -1,3 +1,11 @@
+# v3.0.0
+
+## Loading icon svg as external resource
+
+Previously, all icons were included within the icon package itself. This approach was chosen to simplify setup and eliminate the need for additional configurations. However, this implementation has led to an increase in bundle size.
+
+With the release of the main libraries @siemens/ix and @siemens/ix-icons, you now need to provide the icons as a static resource. This significantly reduces the bundle size.
+
 # v2.0.0
 
-Icon web fonts are removed.
+Icon web fonts are removed.

e2e/all-icon.e2e.ts

@@ -8,7 +8,7 @@
  */
 
 import { ConsoleMessage, expect, test } from '@playwright/test';
-import * as iconsFile from './../dist/sample.json';
+import * as iconsFile from './sample.json';
 import * as icons from './../icons';
 
 function convertToCamelCase(value: string) {

package.json

@@ -20,11 +20,13 @@
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
   "es2017": "dist/esm/index.mjs",
+  "jsnext:main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/ix-icons/ix-icons.esm.js",
   "files": [
+    "components/",
     "dist/",
     "loader/",
     "icons/",
@@ -43,7 +45,7 @@
     "ci:publish": "pnpm changeset publish"
   },
   "dependencies": {
-    "@stencil/core": "^4.12.6"
+    "@stencil/core": "^4.21.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",

scripts/build-icons.ts

@@ -175,8 +175,7 @@ async function buildIcons() {
       version,
     ),
 
-    writeIconSampleJson(iconCollection, path.join(rootPath, 'build-dist'), version),
-    writeGlobalCSSFile(path.join(rootPath, 'build-dist', 'css', 'ix-icons.css')),
+    writeIconSampleJson(iconCollection, path.join(rootPath, 'e2e'), version),
     fs.writeFile(
       iconsPkgPath,
       JSON.stringify(
@@ -250,26 +249,4 @@ function getDataUrl(svgData: string) {
   return `"data:image/svg+xml;utf8,${svg}"`;
 }
 
-async function writeGlobalCSSFile(targetPath: string) {
-  // Write the global css file to keep the application compiling after update to 2.0.0
-  fs.ensureDirSync(path.join(targetPath, '..'));
-
-  return fs.writeFile(
-    targetPath,
-    `
-/*
-* SPDX-FileCopyrightText: 2023 Siemens AG
-*
-* SPDX-License-Identifier: MIT
-*
-* This source code is licensed under the MIT license found in the
-* LICENSE file in the root directory of this source tree.
-*/
-/*
-* Deprecated since 2.0.0 no global css file is necessary.
-*/
-    `,
-  );
-}
-
 buildIcons();

src/components/icon/meta-tag.ts

@@ -1,20 +1,3 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2024 ALL RIGHTS RESERVED.
- */
-
-function getV3PreviewMetaElement() {
-  return document.querySelector("meta[name='ix-icons:v3-preview']");
-}
-
-function getV3PreviewMetaContent() {
-  const v3PreviewMetaElement = getV3PreviewMetaElement();
-  if (v3PreviewMetaElement) {
-    return v3PreviewMetaElement.getAttribute('content').split(';');
-  }
-
-  return null;
-}
-
 /**
  * Provide custom SVG path for icons
  *
@@ -29,22 +12,3 @@ export function getCustomAssetUrl() {
 
   return false;
 }
-
-/**
- * Enable v3 preview features
- *
- * <meta name="ix-icons:v3-preview" content="svg-path-loading;" />
- */
-export function isV3PreviewEnabled() {
-  const features = getV3PreviewMetaContent();
-
-  if (!features) {
-    return false;
-  }
-
-  if (features.includes('svg-path-loading')) {
-    return true;
-  }
-
-  return false;
-}

src/components/icon/resolveIcon.ts

@@ -6,8 +6,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { getAssetPath } from '@stencil/core';
-import { getCustomAssetUrl, isV3PreviewEnabled } from './meta-tag';
+import { getAssetPath, setAssetPath } from '@stencil/core';
+import { getCustomAssetUrl } from './meta-tag';
 
 declare global {
   interface Window {
@@ -19,25 +19,6 @@ let fetchCache: Map<string, string>;
 const requests = new Map<string, Promise<string>>();
 let parser = null;
 
-function toCamelCase(value: string) {
-  value = value.replace(/[\(\)\[\]\{\}\=\?\!\.\:,\-_\+\\\"#~\/]/g, ' ');
-  let returnValue = '';
-  let makeNextUppercase = true;
-  value = value.toLowerCase();
-  for (let i = 0; value.length > i; i++) {
-    let c = value.charAt(i);
-    if (c.match(/^\s+$/g) || c.match(/[\(\)\[\]\{\}\\\/]/g)) {
-      makeNextUppercase = true;
-    } else if (makeNextUppercase) {
-      c = c.toUpperCase();
-      makeNextUppercase = false;
-    }
-    returnValue += c;
-  }
-  const normalized = returnValue.replace(/\s+/g, '');
-  return normalized.charAt(0).toUpperCase() + normalized.slice(1);
-}
-
 export const getIconCacheMap = (): Map<string, string> => {
   if (typeof window === 'undefined') {
     return new Map();
@@ -116,21 +97,22 @@ function isValidUrl(url: string) {
   return urlRegex.test(url);
 }
 
-function getAssetUrl(name: string) {
+export function getIconUrl(name: string) {
   const customAssetUrl = getCustomAssetUrl();
   if (customAssetUrl) {
     return `${customAssetUrl}/${name}.svg`;
   }
 
-  return getAssetPath(`svg/${name}.svg`);
-}
-
-async function getESMIcon(name: string) {
-  const esmIcon = await import('./icons');
-  let iconName = toCamelCase(name);
-  iconName = `icon${iconName}`;
+  let url: string = `svg/${name}.svg`;
+  try {
+    url = getAssetPath(url);
+  } catch (error) {
+    console.warn(error);
+    setAssetPath(`${window.location.origin}/`);
+    url = getAssetPath(url);
+  }
 
-  return parseSVGDataContent(esmIcon[iconName]);
+  return url;
 }
 
 export async function resolveIcon(iconName: string) {
@@ -150,14 +132,9 @@ export async function resolveIcon(iconName: string) {
     }
   }
 
-  if (isV3PreviewEnabled()) {
-    console.warn('Using V3 preview feature for loading icons.');
-    try {
-      return fetchSVG(getAssetUrl(iconName));
-    } catch (error) {
-      throw Error('Cannot resolve any icon');
-    }
+  try {
+    return fetchSVG(getIconUrl(iconName));
+  } catch (error) {
+    throw Error('Cannot resolve any icon');
   }
-
-  return getESMIcon(iconName);
 }