feat: replace web icon font with svgs (#42)

* feat: replace icon font implementation

* fix: add empty css file

* add special "missing-symbol" icon

- add icon
- change reference to missing symbol

* chore: cleanup unused import

* test: update snapshots

* fix: change svg styles

* fix: unittest

* docs: add breaking changes

* v2.0.0-beta.0

* remove build version from header

---------

Co-authored-by: Silvio Wolf <[email protected]>

BREAKING_CHANGES.md

@@ -0,0 +1,3 @@
+# v2.0.0
+
+Icon web fonts are removed.

README.md

@@ -13,26 +13,13 @@ SPDX-License-Identifier: MIT
 ![yarn](https://img.shields.io/badge/yarn->=1.x.x-blue.svg)
 [![License: SEE LICENSE IN <LICENSE.md>](https://img.shields.io/badge/License-SEE%20LICENSE%20IN%20LICENSE.md-yellow.svg)](./LICENSE.md)
 
-Icon web font library for `@siemens/ix`
-
 ## Usage
 
 Using icons within your project. You need to:
 
 - Install `@siemens/ix-icons` e.g. `npm install --save @siemens/ix-icons`
 - Load styling e.g. `@siemens/ix-icons/dist/scss/ix-icons.css`
 
-```scss
-@import '@siemens/ix-icons/dist/scss/ix-icons.css';
-```
-
-## Usage without `@siemens/ix`
-
-Using icons within your project. You need to:
-
-- Install `@siemens/ix-icons` e.g. `npm install --save @siemens/ix-icons`
-- Load styling e.g. `@siemens/ix-icons/dist/scss/ix-icons.css`
-
 ```javascript
 import { defineCustomElements } from '@siemens/ix-icons/loader';
 
@@ -43,16 +30,6 @@ import { defineCustomElements } from '@siemens/ix-icons/loader';
 
 ### Use icon via string name
 
-In this case the `ix-icon` component is using the web font. Which requires the import of the css file in some of your style files:
-
-`styles.css`
-
-```scss
-@import '@siemens/ix-icons/dist/scss/ix-icons.css';
-```
-
-`demo.html`
-
 ```html
 <ix-icon name="rocket"></ix-icon>
 ```
@@ -62,10 +39,15 @@ In this case the `ix-icon` component is using the web font. Which requires the i
 ```tsx
 import { rocket } from '@siemens/ix-icons/icons';
 
-// render your template code
 <ix-icon name={rocket}></ix-icon>;
 ```
 
+### Use `ix-icon` component with custom svg's
+
+```tsx
+<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>;
+```
+
 ## Development
 
 ### Installation
@@ -84,13 +66,6 @@ yarn build
 
 Contributions, issues and feature requests are welcome!
 
-## 👨‍💻 Contributors
-
-- Daniel Leroux <[email protected]>
-- Lukas Maurer <[email protected]>
-- Carlos Leandro Cruz Ferrer <[email protected]>
-- Gonçalo Ferreira <[email protected]>
-
 ## 📝 License
 
 Copyright © 2019–2023 [Siemens AG](https://www.siemens.com/).

e2e/all-icon.e2e.ts

@@ -11,51 +11,43 @@ import { ConsoleMessage, expect, test } from '@playwright/test';
 import * as iconsFile from './../dist/sample.json';
 import * as icons from './../icons';
 
-import { reservedKeywords } from './../scripts/reserved-keywords';
-
-function toCamel(snakeCaseString: string): string {
-  const words = snakeCaseString.split('-');
-  const camelCaseString =
-    words[0] +
-    words
-      .slice(1)
-      .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join('');
-  return camelCaseString;
-}
-
-iconsFile.icons
-  .map(iconName => {
-    if (reservedKeywords.has(iconName)) {
-      return {
-        iconName: iconName,
-        esImportName: `_${iconName}`,
-      };
+function convertToCamelCase(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);
+}
 
-    return {
-      iconName: iconName,
-      esImportName: iconName,
-    };
-  })
-  .forEach(({ iconName, esImportName }) => {
-    test(`should show ${iconName}`, async ({ page }) => {
-      const dataUrlSvg = icons[toCamel(esImportName)];
-      await page.goto(`http://127.0.0.1:8080/e2e/icon-by-name.html?icon=${iconName}`);
-
-      await page.evaluate(
-        ([url]) => {
-          (window as any).__SVG_DATA__ = url;
-        },
-        [dataUrlSvg],
-      );
-
-      await page.waitForEvent('console', {
-        predicate: (message: ConsoleMessage) => {
-          return message.text() === 'icon-loaded-success';
-        },
-      });
-
-      expect(await page.locator('#mount').screenshot()).toMatchSnapshot();
+iconsFile.icons.forEach(iconName => {
+  test(`should show ${iconName}`, async ({ page }) => {
+    const dataUrlSvg = icons[`icon${convertToCamelCase(iconName)}`];
+    await page.goto(`http://127.0.0.1:8080/e2e/icon-by-name.html?icon=${iconName}`);
+
+    await page.evaluate(
+      ([url]) => {
+        (window as any).__SVG_DATA__ = url;
+      },
+      [dataUrlSvg],
+    );
+
+    await page.waitForEvent('console', {
+      predicate: (message: ConsoleMessage) => {
+        return message.text() === 'icon-loaded-success';
+      },
     });
+
+    expect(await page.locator('#mount').screenshot()).toMatchSnapshot();
   });
+});