@kirbydesign/designsystem 6.1.2-rc.ionic → 6.2.1

package/icons/svg/car.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<path d="M20.0088,13.7993 C20.0088,14.4163 19.4468,14.9193 18.7568,14.9193 L18.5268,14.9193 C18.2068,13.9613 17.2778,13.2603 16.1688,13.2603 C15.0608,13.2603 14.1308,13.9613 13.8118,14.9193 L10.1838,14.9193 C9.8648,13.9613 8.9358,13.2603 7.8278,13.2603 C6.7168,13.2603 5.7848,13.9653 5.4678,14.9263 L5.2428,14.9193 C4.5528,14.9193 3.9908,14.4163 3.9908,13.7993 L3.9908,12.4513 C3.9908,11.8343 4.5528,11.3313 5.2428,11.3313 L17.5298,11.3313 C18.8968,11.3313 20.0088,12.3393 20.0088,13.5773 L20.0088,13.7993 Z M16.1688,16.5773 C15.6218,16.5773 15.1758,16.1533 15.1758,15.6303 C15.1758,15.1083 15.6218,14.6833 16.1688,14.6833 C16.7168,14.6833 17.1618,15.1083 17.1618,15.6303 C17.1618,16.1533 16.7168,16.5773 16.1688,16.5773 L16.1688,16.5773 Z M7.8278,16.5773 C7.2798,16.5773 6.8348,16.1533 6.8348,15.6303 C6.8348,15.1083 7.2798,14.6833 7.8278,14.6833 C8.3748,14.6833 8.8198,15.1083 8.8198,15.6303 C8.8198,16.1533 8.3748,16.5773 7.8278,16.5773 L7.8278,16.5773 Z M8.0868,8.1003 C8.3188,7.6883 8.8348,7.4223 9.4008,7.4223 L10.3708,7.4223 L10.3708,9.8793 L7.0868,9.8793 L8.0868,8.1003 Z M13.9628,7.9303 L15.6068,9.8793 L11.8628,9.8793 L11.8628,7.4223 L12.7668,7.4223 C13.2458,7.4223 13.6938,7.6123 13.9628,7.9303 L13.9628,7.9303 Z M17.5458,9.9103 L15.1238,7.0393 C14.5738,6.3883 13.6938,6.0003 12.7668,6.0003 L9.4008,6.0003 C8.2758,6.0003 7.2688,6.5473 6.7728,7.4273 L5.3778,9.9093 L5.2428,9.9093 C3.7308,9.9093 2.4998,11.0493 2.4998,12.4513 L2.4998,13.7993 C2.4998,15.2003 3.7298,16.3413 5.2158,16.3413 L5.2168,16.3413 L5.4728,16.3503 C5.7948,17.3033 6.7228,17.9993 7.8278,17.9993 C8.9358,17.9993 9.8648,17.2993 10.1838,16.3413 L13.8118,16.3413 C14.1308,17.2993 15.0608,17.9993 16.1688,17.9993 C17.2778,17.9993 18.2068,17.2993 18.5268,16.3413 L18.7568,16.3413 C20.2698,16.3413 21.4998,15.2003 21.4998,13.7993 L21.4998,13.5773 C21.4998,11.5593 19.7278,9.9193 17.5458,9.9103 L17.5458,9.9103 Z" id="car" fill="currentColor" fill-rule="nonzero"></path>
+</g>
+</svg>

package/icons/svg/coinstack.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<path d="M9.7823,3.4842 C9.8793,3.1352 10.2453,2.9302 10.6013,3.0222 L10.6013,3.0222 L16.0763,4.4592 C16.4333,4.5532 16.6443,4.9122 16.5493,5.2612 L16.5493,5.2612 L15.9193,7.5592 L15.9193,7.5592 L15.9093,7.5792 C15.9563,7.6682 15.9883,7.7652 15.9883,7.8722 L15.9883,7.8722 L15.9883,12.1422 C16.2183,12.2712 16.4163,12.4552 16.5703,12.6792 L16.5703,12.6792 L17.1723,11.9592 C17.4553,11.6222 17.8613,11.4222 18.3163,11.3972 C18.8493,11.3652 19.3903,11.5782 19.8103,11.9762 C20.5933,12.7152 20.7283,13.8642 20.1193,14.5902 C19.4723,15.6252 17.7263,18.2502 16.7153,18.6642 C16.1233,18.9062 14.8663,18.9812 13.5433,18.9812 C12.0943,18.9812 10.5763,18.8912 9.7463,18.8342 C9.8683,19.1632 9.7323,19.5322 9.4123,19.6962 L9.4123,19.6962 L7.0413,20.9182 C6.9363,20.9722 6.8213,21.0002 6.7053,21.0002 C6.6263,21.0002 6.5463,20.9872 6.4703,20.9602 C6.2823,20.8972 6.1293,20.7602 6.0483,20.5822 L6.0483,20.5822 L3.5623,15.1272 C3.4083,14.7892 3.5483,14.3902 3.8853,14.2172 L3.8853,14.2172 L6.2563,12.9952 C6.4313,12.9032 6.6383,12.8862 6.8273,12.9522 C7.0153,13.0152 7.1683,13.1532 7.2493,13.3312 L7.2493,13.3312 L7.3673,13.5882 C7.8203,13.0512 8.4043,12.6612 8.9813,12.3922 L8.9813,12.3922 L8.9813,7.8722 C8.9813,7.5102 9.2813,7.2172 9.6503,7.2172 L9.6503,7.2172 L12.0353,7.2172 L9.6243,6.5842 C9.4533,6.5402 9.3073,6.4302 9.2193,6.2792 C9.1303,6.1292 9.1063,5.9502 9.1523,5.7832 L9.1523,5.7832 Z M6.2473,14.5922 L5.1523,15.1562 L7.0503,19.3212 L8.1443,18.7572 L6.2473,14.5922 Z M18.3983,12.8032 C18.3233,12.8072 18.2973,12.8392 18.2863,12.8532 L18.2863,12.8532 L16.7533,14.6872 C16.7263,14.7182 16.6903,14.7352 16.6603,14.7612 C16.3603,15.2962 15.8253,15.6592 15.2103,15.6592 L15.2103,15.6592 L13.0503,15.6592 C12.6523,15.6592 12.3303,15.3432 12.3303,14.9542 C12.3303,14.5642 12.6523,14.2492 13.0503,14.2492 L13.0503,14.2492 L15.2103,14.2492 C15.3153,14.2492 15.4743,14.0672 15.4743,13.7922 C15.4743,13.5172 15.3153,13.3352 15.2103,13.3352 L15.2103,13.3352 L10.6973,13.3352 C10.2133,13.3352 8.4633,13.9102 8.0893,15.1752 L8.0893,15.1752 L9.1183,17.4322 C9.2043,17.4052 9.2963,17.3912 9.3933,17.3962 C11.7303,17.5762 15.3753,17.6842 16.1593,17.3642 C16.5973,17.1572 17.9573,15.3392 18.9513,13.7712 C19.1023,13.5812 19.0733,13.2392 18.8093,12.9892 C18.6573,12.8452 18.5053,12.8072 18.3983,12.8032 Z" id="coinstack" fill="currentColor" fill-rule="nonzero"></path>
+</g>
+</svg>

package/icons/svg/contact.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<path d="M5.57696661,3.2259462 L3.2259462,5.57696661 C3.08127528,5.72163753 3,5.9178534 3,6.12244898 C3,14.3389952 9.66100483,21 17.877551,21 C18.0821466,21 18.2783625,20.9187247 18.4230334,20.7740538 L20.7740538,18.4230334 C21.0753154,18.1217718 21.0753154,17.6333302 20.7740538,17.3320686 L16.8556865,13.4137013 L16.7691646,13.3390083 C16.4671642,13.1149295 16.0385959,13.1398271 15.7647217,13.4137013 L13.9594286,15.2194286 L8.78057143,10.0405714 L10.5862987,8.23527829 C10.8875603,7.9340167 10.8875603,7.44557514 10.5862987,7.14431354 L6.66793135,3.2259462 C6.36666976,2.9246846 5.8782282,2.9246846 5.57696661,3.2259462 Z M6.12274286,4.86274286 L8.94925714,7.68925714 L7.14431354,9.49533395 C6.84305195,9.79659555 6.84305195,10.2850371 7.14431354,10.5862987 L13.4137013,16.8556865 L13.5002231,16.9303794 C13.8022235,17.1544583 14.2307919,17.1295606 14.504666,16.8556865 L16.3097143,15.0497143 L19.1372571,17.8772571 L17.5604571,19.4530286 C10.4474363,19.2862935 4.71370649,13.5525637 4.54594286,6.43851429 L6.12274286,4.86274286 Z" id="contact" fill="currentColor" fill-rule="nonzero"></path>
+</g>
+</svg>

package/icons/svg/recurring.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<path d="M19.237,11.1809033 C19.662,11.1849033 19.996,11.5139033 20,11.9309033 C20.031,15.3929033 17.849,18.4659033 14.572,19.5789033 C13.739,19.8629033 12.88,19.9979033 12.028,19.9979033 C9.577,19.9979033 7.195,18.8639033 5.662,16.8679033 L5.662,16.8679033 L5.668,18.4059033 C5.669,18.8239033 5.332,19.1639033 4.914,19.1649033 L4.914,19.1649033 C4.495,19.1649033 4.157,18.8279033 4.155,18.4119033 L4.155,18.4119033 L4.14399117,15.0609033 C4.142,14.6429033 4.48,14.3019033 4.898,14.3009033 L4.898,14.3009033 L8.246,14.2889033 C8.665,14.2889033 9.004,14.6259033 9.005,15.0429033 C9.007,15.4609033 8.669,15.8009033 8.251,15.8029033 L8.251,15.8029033 L6.749,15.8079033 C8.403,18.0939033 11.413,19.0569033 14.086,18.1469033 C16.744,17.2429033 18.513,14.7509033 18.488,11.9449033 C18.484,11.5269033 18.819,11.1849033 19.237,11.1809033 Z M9.427,4.42610329 C12.64,3.33210329 16.184,4.39310329 18.278,7.05310329 L18.278,7.05310329 L18.271,5.33210329 C18.269,4.91510329 18.607,4.57410329 19.024,4.57310329 L19.024,4.57310329 C19.443,4.57310329 19.781,4.90910329 19.783,5.32610329 L19.783,5.32610329 L19.7970022,8.67710329 C19.798,9.09510329 19.462,9.43510329 19.044,9.43710329 L19.044,9.43710329 L15.695,9.45010329 C15.276,9.45010329 14.938,9.11410329 14.936,8.69710329 C14.934,8.27910329 15.272,7.93910329 15.689,7.93710329 L15.689,7.93710329 L17.041,7.93210329 C15.336,5.82010329 12.496,4.98110329 9.914,5.85810329 C7.28,6.75310329 5.512,9.22210329 5.512,12.0031033 C5.512,12.4201033 5.174,12.7591055 4.756,12.7591055 C4.339,12.7601033 4,12.4211033 4,12.0031033 C4,8.57410329 6.18,5.52910329 9.427,4.42610329 Z" id="reaccuring" fill="currentColor" fill-rule="nonzero"></path>
+</g>
+</svg>

package/icons/svg/salary.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<path d="M19.7033,14.8748 C19.6763,14.9168 19.6143,14.9888 19.5053,15.0048 C19.4583,15.0118 19.3953,15.0208 19.3453,15.0288 L19.3493,13.4568 C19.3493,13.2548 19.2923,12.9508 19.0153,12.6558 C18.2663,11.8608 16.2943,11.5718 14.6963,11.5658 L14.6493,11.5658 C13.5313,11.5658 12.4753,11.6978 11.6693,11.9378 C10.7433,12.2138 10.2313,12.6268 10.0933,13.1518 C10.0563,13.2358 10.0323,13.3268 10.0323,13.4248 L10.0233,16.2678 L10.0203,17.3538 C9.5723,17.5068 9.4153,17.5678 9.2203,17.6468 L8.8373,17.7978 C8.7323,17.8378 8.6483,17.8028 8.6053,17.7788 C8.5593,17.7528 8.4783,17.6898 8.4483,17.5618 L7.2343,12.3788 C7.1963,12.2178 7.2683,12.0578 7.4053,11.9988 C8.4293,11.5548 10.4793,10.7228 12.7063,10.1418 C15.1523,9.5028 17.2053,9.2568 18.2103,9.1658 C18.3563,9.1578 18.4953,9.2588 18.5323,9.4188 L19.7473,14.6038 C19.7763,14.7338 19.7333,14.8288 19.7033,14.8748 L19.7033,14.8748 Z M14.6723,19.6868 C12.7223,19.6818 11.5183,19.2578 11.2583,19.0138 L11.2623,17.6208 C12.5343,18.1258 14.3693,18.1558 14.6773,18.1578 L14.7263,18.1578 C15.8433,18.1578 16.8973,18.0248 17.7033,17.7858 C17.8513,17.7418 17.9653,17.6868 18.0933,17.6358 L18.0893,19.0358 C17.8253,19.2788 16.6093,19.6698 14.6723,19.6868 L14.6723,19.6868 Z M11.4203,13.4288 C11.8573,13.1878 13.0163,12.9068 14.6923,12.8778 C16.3903,12.8838 17.5243,13.2058 17.9613,13.4518 C17.5233,13.6928 16.4173,14.0458 14.6883,14.0028 C12.9903,13.9968 11.8563,13.6748 11.4203,13.4288 L11.4203,13.4288 Z M11.6603,14.9218 C12.4763,15.1718 13.5503,15.3118 14.6843,15.3148 L14.7073,15.3148 C15.0713,15.3148 16.8543,15.2868 18.1013,14.8028 L18.0983,16.1938 C17.8353,16.4358 16.6493,16.8448 14.7273,16.8448 L14.6803,16.8448 C12.7293,16.8378 11.5273,16.4148 11.2663,16.1698 L11.2703,14.7688 C11.3993,14.8198 11.5123,14.8768 11.6603,14.9218 L11.6603,14.9218 Z M4.3013,11.3868 C4.2133,11.2468 4.2303,11.0658 4.3423,10.9578 C5.1603,10.1658 6.8173,8.6318 8.7193,7.2718 C10.8103,5.7768 12.6553,4.7948 13.5683,4.3428 C13.7043,4.2758 13.8583,4.3278 13.9423,4.4598 L16.2263,8.0878 C15.1693,8.2468 13.8593,8.4888 12.4083,8.8678 C10.1033,9.4698 7.9883,10.3278 6.9323,10.7858 C6.2213,11.0938 5.8403,11.8958 6.0273,12.6938 L6.5633,14.9798 L4.3013,11.3868 Z M20.9533,14.2888 L19.7383,9.1038 C19.5563,8.3138 18.8583,7.7878 18.1053,7.8588 C17.9613,7.8718 17.7903,7.8888 17.6053,7.9088 L14.9763,3.7328 C14.5513,3.0558 13.7393,2.8108 13.0403,3.1548 C12.0943,3.6228 10.1833,4.6398 8.0213,6.1858 C6.0533,7.5938 4.3453,9.1738 3.5013,9.9908 C2.9363,10.5388 2.8363,11.4298 3.2653,12.1118 L6.0593,16.5518 C6.2993,16.9318 6.6793,17.1758 7.0953,17.2508 L7.2413,17.8768 C7.3473,18.3298 7.6313,18.7168 8.0193,18.9368 C8.2443,19.0618 8.4933,19.1278 8.7423,19.1278 C8.9173,19.1278 9.0933,19.0958 9.2603,19.0318 L9.6633,18.8728 C9.7743,18.8288 9.8683,18.7908 10.0153,18.7368 L10.0153,19.1098 C10.0153,19.2078 10.0373,19.2988 10.0743,19.3828 C10.2083,19.9088 10.7183,20.3248 11.6433,20.6078 C12.4593,20.8568 13.5333,20.9958 14.6683,20.9998 L14.7193,20.9998 C15.8333,20.9998 16.8893,20.8678 17.6943,20.6288 C18.6223,20.3528 19.1343,19.9388 19.2713,19.4128 C19.3083,19.3298 19.3323,19.2388 19.3323,19.1418 L19.3413,16.3538 C19.4503,16.3378 19.5713,16.3188 19.6693,16.3058 C20.0993,16.2448 20.4863,15.9918 20.7313,15.6128 C20.9793,15.2278 21.0603,14.7458 20.9533,14.2888 L20.9533,14.2888 Z" id="salary" fill="currentColor" fill-rule="nonzero"></path>
+</g>
+</svg>

package/lib/components/dropdown/dropdown.component.d.ts

@@ -109,6 +109,7 @@ export declare class DropdownComponent implements AfterViewInit, OnDestroy, Cont
     scrollItemIntoView(index: number): void;
     _onTab(event: KeyboardEvent): void;
     _onMouseDown(event: MouseEvent): void;
+    _onTouchStart(event: TouchEvent): void;
     _onFocus(): void;
     _onPopoverWillHide(): void;
     _onEnterOrEscape(): void;

package/lib/components/fab-sheet/fab-sheet.component.d.ts

@@ -1,9 +1,10 @@
-import { AfterContentInit, ElementRef, Renderer2 } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, Renderer2 } from '@angular/core';
 import { IonFab } from '@ionic/angular';
 import { ActionSheetComponent } from '../modal/action-sheet/action-sheet.component';
 import * as i0 from "@angular/core";
 export declare class FabSheetComponent implements AfterContentInit {
     private renderer;
+    private changeDetectorRef;
     private document;
     disabled: boolean;
     horizontalAlignment: 'left' | 'center' | 'right';
@@ -13,7 +14,7 @@ export declare class FabSheetComponent implements AfterContentInit {
     get isBackdropVisible(): boolean;
     actionSheet: ActionSheetComponent;
     ionFabButton: ElementRef<HTMLElement>;
-    constructor(renderer: Renderer2, document: any);
+    constructor(renderer: Renderer2, changeDetectorRef: ChangeDetectorRef, document: any);
     ngAfterContentInit(): void;
     hideActions(fab: IonFab): void;
     onFabClick(fab: IonFab): void;

package/lib/components/modal/modal-wrapper/modal-wrapper.component.d.ts

@@ -66,7 +66,6 @@ export declare class ModalWrapperComponent implements Modal, AfterViewInit, OnIn
     private onSiblingModalRouteActivated;
     private patchScrollElementSize;
     private observeModalFullHeight;
-    private getIonModalWrapperElement;
     ngAfterViewInit(): void;
     private observeHeaderResize;
     private listenForIonModalDidPresent;

package/lib/components/modal/services/modal-animation-builder.service.d.ts

@@ -1,27 +1,16 @@
-import { AnimationBuilder } from '@ionic/angular';
+import { AnimationBuilder, AnimationController } from '@ionic/angular';
 import { PlatformService } from '../../../helpers/platform.service';
 import * as i0 from "@angular/core";
 export declare class ModalAnimationBuilderService {
+    private animationCtrl;
     private platform;
-    constructor(platform: PlatformService);
+    constructor(animationCtrl: AnimationController, platform: PlatformService);
     private readonly easingEnter;
     private readonly easingLeave;
     private readonly duration;
     private readonly SwipeToCloseDefaults;
     enterAnimation(currentBackdrop?: HTMLIonBackdropElement): AnimationBuilder;
     leaveAnimation(currentBackdrop?: HTMLIonBackdropElement): AnimationBuilder;
-    private createEnterAnimation;
-    private createLeaveAnimation;
-    /**
-     * Gets the root context of a shadow dom element
-     * On newer browsers this will be the shadowRoot,
-     * but for older browser this may just be the
-     * element itself.
-     *
-     * Useful for whenever you need to explicitly
-     * do "myElement.shadowRoot!.querySelector(...)".
-     */
-    private getElementRoot;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalAnimationBuilderService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ModalAnimationBuilderService>;
 }

package/lib/components/segmented-control/segmented-control.component.d.ts

@@ -10,7 +10,11 @@ export declare enum SegmentedControlMode {
 export declare class SegmentedControlComponent {
     private iconRegistryService;
     constructor(iconRegistryService: IconRegistryService);
-    preventWrapperClick(event: Event): void;
+    /**
+     * Ensure that the click actually did originate from within the segment-button.
+     * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.
+     */
+    preventOutsideClick(event: TouchEvent): void;
     mode: SegmentedControlMode | `${SegmentedControlMode}`;
     get _modeCssClass(): string;
     private _items;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@kirbydesign/designsystem",
-  "version": "6.1.2-rc.ionic",
+  "version": "6.2.1",
   "dependencies": {
     "@fontsource/roboto": "4.2.1",
-    "@ionic/angular": "6.2.1",
-    "@kirbydesign/core": "0.0.29-rc.ionic",
+    "@ionic/angular": "5.5.2",
+    "@kirbydesign/core": "0.0.28",
     "chart.js": "3.3.2",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-plugin-annotation": "^1.0.2",
@@ -17,11 +17,11 @@
     "tslib": "^2.3.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=12.0.0",
-    "@angular/core": ">=12.0.0",
-    "@angular/forms": ">=12.0.0",
-    "@angular/router": ">=12.0.0",
-    "rxjs": ">=6.5.5",
+    "@angular/common": ">=9.0.0",
+    "@angular/core": ">=9.0.0",
+    "@angular/forms": ">=9.0.0",
+    "@angular/router": ">=9.0.0",
+    "rxjs": ">=6.5.3",
     "zone.js": ">=0.10.2"
   },
   "exports": {

package/scss/base/_link.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/base/link";

package/scss/interaction-state/_active.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/interaction-state/active";

package/scss/interaction-state/_focus.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/interaction-state/focus";

package/scss/interaction-state/_hover.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/interaction-state/hover";

package/scss/interaction-state/_index.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/interaction-state";

package/scss/interaction-state/_interaction-state.utilities.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/interaction-state/interaction-state.utilities";

package/scss/interaction-state/_layer.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/interaction-state/layer";

package/scss/opt-out/_index.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/opt-out";

package/scss/opt-out/_link.scss

@@ -1 +0,0 @@
-@forward "~@kirbydesign/core/scss/opt-out/link";

package/src/lib/components/icon/README.md

@@ -1,16 +0,0 @@
-# Add new icons
-
-To add new icons, you should use the [icomoon app](https://icomoon.io).
-
-## Generate font from svg's
-
-1. Upload selection.json to get existing icons and settings
-2. Upload new icons
-3. Download Font
-
-## Update kirby icons
-
-1. Replace src/kirby/icon/selection.json, with newly generated selection.json
-2. Replace src/fonts/kirby.ttf, with newly generated kirby.ttf
-3. Update kirby-custom-icon-settings.ts with new icons (old icons should not have changed)
-4. Add new icon svg's to src/assets/icons/kirby