feat(icons): implement ui icon set

.changeset/quick-mails-joke.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': minor
+---
+
+Refactored `post-icon` component, so it uses the svg `use` tag to load and show icons.

.changeset/red-moose-do.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-icons': minor
+---
+
+Added ui icons set, to be used with the `post-icon` component.

packages/components/src/components/post-icon/post-icon.scss

@@ -1,5 +1,15 @@
+@use 'sass:list';
 @use 'sass:map';
 
+$post-icon-sizes: (
+  '16': 16px,
+  '24': 24px,
+  '32': 32px,
+  '40': 40px,
+  '48': 48px,
+  '64': 64px,
+);
+
 $post-icon-animations: (
   'cylon': icon-animation-cylon 0.75s ease-in-out infinite alternate,
   'cylon-vertical': icon-animation-cylon-vertical 0.75s ease-in-out infinite alternate,
@@ -10,25 +20,37 @@ $post-icon-animations: (
 );
 
 :host {
+  container-name: post-icon;
+  container-type: inline-size;
   display: inline-block;
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
 }
 
-span {
+svg {
   display: block;
   width: 100%;
   height: 100%;
   fill: currentColor;
   forced-color-adjust: preserve-parent-color;
-  background-color: currentColor;
-  -webkit-mask-position: center center;
-  mask-position: center center;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: 100%;
-  mask-size: 100%;
+}
+
+@each $key, $value in $post-icon-sizes {
+  $keys: map.keys($post-icon-sizes);
+  $index: list.index($keys, $key);
+  $nextKey: if($index + 1 <= list.length($keys), list.nth($keys, $index + 1), null);
+  $nextValue: map.get($post-icon-sizes, $nextKey);
+
+  $min: if($index == 1, null, 'min-width: #{$value}');
+  $max: if($index == list.length($keys), null, 'max-width: #{$nextValue - 0.02}');
+  $connector: if($min and $max, ') and (', '');
+
+  @container post-icon (#{$min}#{$connector}#{$max}) {
+    svg {
+      --pis-#{$key}: block;
+    }
+  }
 }
 
 // flip

packages/components/src/components/post-icon/post-icon.tsx

@@ -1,4 +1,4 @@
-import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';
 import { checkNonEmpty, checkType, checkEmptyOrType, checkEmptyOrOneOf } from '@/utils';
 import { version } from '@root/package.json';
 
@@ -25,13 +25,8 @@ type Animation = (typeof ANIMATION_NAMES)[number];
   shadow: true,
 })
 export class PostIcon {
-  private path: string;
-
   @Element() host: HTMLPostIconElement;
 
-  @State() svgStyles: string;
-  @State() svgOutput: string;
-
   /**
    * The name of the animation.
    */
@@ -110,48 +105,46 @@ export class PostIcon {
     checkEmptyOrType(newValue, 'number', 'The post-icon "scale" prop should be a number.');
   }
 
-  componentDidLoad() {
-    this.validateBase();
-    this.validateName();
-    this.validateFlipH();
-    this.validateFlipV();
-    this.validateScale();
-    this.validateRotate();
-    this.validateAnimation();
-  }
-
-  componentWillRender() {
-    this.setPath();
-  }
-
-  private setPath() {
+  private getPath() {
     // Construct icon path from different possible sources
     const metaBase =
       document.head
         .querySelector('meta[name="design-system-settings"][data-post-icon-base]')
         ?.getAttribute('data-post-icon-base') ?? null;
 
     const fileBase = `${this.base ?? metaBase ?? CDN_URL}/`.replace(/\/\/$/, '/');
-    const fileName = `${this.name}.svg`;
+    const fileName = `${this.name}.svg#i-${this.name}`;
     const filePath = `${fileBase}${fileName}`;
 
-    this.path = new URL(filePath, window.location.origin).toString();
+    return new URL(filePath, window.location.origin).toString();
   }
 
-  render() {
-    // create inline styles for some properties
-    const svgStyles = Object.entries({
-      '-webkit-mask-image': `url('${this.path}')`,
-      'mask-image': `url('${this.path}')`,
-      'transform':
+  private getStyles() {
+    return Object.entries({
+      transform:
         (this.scale && !isNaN(Number(this.scale)) ? 'scale(' + this.scale + ')' : '') +
         (this.rotate && !isNaN(Number(this.rotate)) ? ' rotate(' + this.rotate + 'deg)' : ''),
     })
       .filter(([_key, value]) => value !== null)
       .reduce((styles, [key, value]) => Object.assign(styles, { [key]: value }), {});
+  }
+
+  componentDidLoad() {
+    this.validateBase();
+    this.validateName();
+    this.validateFlipH();
+    this.validateFlipV();
+    this.validateScale();
+    this.validateRotate();
+    this.validateAnimation();
+  }
+
+  render() {
     return (
       <Host data-version={version}>
-        <span style={svgStyles}></span>
+        <svg style={this.getStyles()}>
+          <use href={this.getPath()} />
+        </svg>
       </Host>
     );
   }

packages/documentation/src/stories/getting-started/packages/icons/package-icons-icon-meta.sample.html

@@ -1,5 +1,5 @@
 <html>
   <head>
-    <meta name="design-system-settings" data-post-icon-base="/assets/post-icons" />
+    <meta name="design-system-settings" data-post-icon-base="/path/to/all/icons/folder" />
   </head>
 </html>

packages/documentation/src/stories/getting-started/packages/icons/package-icons.mdx

@@ -79,7 +79,7 @@ You can do this with two different solutions:
 
   <PostTabHeader panel="baseAttribute">Base-attribute solution</PostTabHeader>
   <PostTabPanel name="baseAttribute">
-    <Source  code={`<post-icon name="1000" base="/base-path/to/your/own/icon-folder"></post-icon>`} language="html"/>
+    <Source  code={`<post-icon name="1000" base="/path/to/a/specific/icon/folder"></post-icon>`} language="html"/>
   </PostTabPanel>
 </PostTabs>
 

packages/icons/.gitignore

@@ -4,8 +4,24 @@ node_modules
 # Stores password, don't check in
 .env
 
+# TODO: Remove before merge
+src/icons/**/*.svg
+!src/icons/v1
+!src/icons/v2
+!src/icons/v1/1000.svg
+!src/icons/v2/Accessibility_16.svg
+!src/icons/v2/Accessibility_24.svg
+!src/icons/v2/Accessibility_32.svg
+!src/icons/v2/Accessibility_40.svg
+!src/icons/v2/Accessibility_48.svg
+!src/icons/v2/Accessibility_64.svg
+
 # Ignore generated files
-icons
+# TODO: Add before merge
+# public/post-icons
+public/report.json
+public/report.v2.json
+
 icons-optimized
 icons.json
 no-svgs.json

packages/icons/package.json

@@ -43,6 +43,7 @@
     "jest": "29.7.0",
     "mock-fs": "5.2.0",
     "node-fetch": "2.7.0",
+    "node-html-parser": "6.1.13",
     "svgo": "3.3.2",
     "ts-jest": "29.2.4",
     "ts-node": "10.9.2",