refactor: change svg for img for icons

projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.css

@@ -4,10 +4,11 @@
     width: 100%;
     display: flex;
     
-    mw-svg {
+    mw-img {
         align-items: center;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        width: 100%;
     }
 }

projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.html

@@ -1,3 +1,3 @@
 <div class="circle" [style.backgroundColor]="backgroundColor()">
-    <mw-svg width="75%" height="75%" [color]="color()" [symbol]="symbol()"></mw-svg>
+    <mw-img [src]="iconPath()"></mw-img>
 </div>

projects/my-wallet-ds/src/lib/molecules/circled-icon/circled-icon.component.ts

@@ -1,10 +1,10 @@
 import { Component, input } from '@angular/core';
-import { SvgComponent } from '../../atoms/svg/svg.component';
+import { ImgComponent } from '../../atoms/img/img.component';
 
 @Component({
   selector: 'mw-circled-icon',
   standalone: true,
-  imports: [SvgComponent],
+  imports: [ImgComponent],
   templateUrl: './circled-icon.component.html',
   styleUrl: './circled-icon.component.css'
 })
@@ -13,12 +13,8 @@ export class CircledIconComponent {
    * @description Circle background color
    */
   backgroundColor = input("#fff");
-  /**
-   * @description Icon color
-   */
-  color = input("#000000");
   /**
    * @description Icon name
    */
-  symbol = input("");
+  iconPath = input("");
 }

projects/my-wallet-ds/src/stories/molecules/circled-icon.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta } from '@storybook/angular';
 import { CircledIconComponent } from '../../lib/molecules/circled-icon/circled-icon.component';
-import { color, symbol } from '../control-constants/svg';
 import { backgroundColor } from '../control-constants/circled-icon';
+import { pngIconsList } from '../png-icons-list';
 /**
  * 
  * **Sizing**: the circled icon takes all space available in it's parent component 
@@ -14,26 +14,29 @@ const meta: Meta<CircledIconComponent> = {
   tags: ['autodocs'],
   args: {
     backgroundColor: '#c0c0c0',
-    color: '#000000',
-    symbol: 'stock-line',
+    iconPath: '/assets/icons/caticon0.png',
   },
   argTypes: {
     backgroundColor,
-    color,
-    symbol
+    iconPath: {
+        control: 'select',
+        options: pngIconsList,
+        description: 'The path to the icon png',
+        table: {defaultValue: {detail: 'Defaults to none (empty string)', summary: '(empty string)'}}
+    }
   },
 };
 
 export default meta;
 
-const Template = (args: {backgroundColor: string, color: string, symbol: string}) => ({
+const Template = (args: {backgroundColor: string, color: string, iconPath: string}) => ({
   props: args,
   template: `
-  <div style="width: 36px; height: 36px; margin: auto;">
+  <div style="width: 48px; height: 48px; margin: auto;">
     <mw-circled-icon
       backgroundColor="${args.backgroundColor}"
       color="${args.color}"
-      symbol="${args.symbol}"
+      iconPath="${args.iconPath}"
     ></mw-circled-icon>
   </div>
   `