From 236a1be31e47dbc6e5012a5cb15aabddc6ca770b Mon Sep 17 00:00:00 2001
From: MathieuG-P <mathieu.gries-peroz@cirkwi.com>
Date: Tue, 19 Jul 2022 18:36:16 +0200
Subject: [PATCH] add optional style

---
 .../components/svgs/bsm-icon.component.tsx    | 41 ++++++++++---------
 .../svgs/flags/france-icon.component.tsx      |  6 ++-
 .../svgs/flags/spain-icon.component.tsx       |  6 ++-
 .../svgs/flags/uk-icon.component.tsx          |  6 ++-
 .../svgs/flags/usa-icon.component.tsx         |  6 ++-
 .../svgs/icons/add-icon.component.tsx         |  6 ++-
 .../svgs/icons/bs-note-fill.component.tsx     |  5 ++-
 .../svgs/icons/copy-icon.component.tsx        |  6 ++-
 .../svgs/icons/cross-icon.component.tsx       |  6 ++-
 .../svgs/icons/desktop-icon.component.tsx     |  6 ++-
 .../svgs/icons/favorite-icon.component.tsx    |  5 ++-
 .../svgs/icons/folder-icon.component.tsx      |  5 ++-
 .../svgs/icons/oculus-icon.component.tsx      |  6 ++-
 .../svgs/icons/setting-icon.component.tsx     |  6 ++-
 .../svgs/icons/steam-icon.component.tsx       |  6 ++-
 .../svgs/icons/task-icon.component.tsx        |  6 ++-
 .../svgs/icons/terminal-icon.component.tsx    |  6 ++-
 .../svgs/icons/trash-icon.component.tsx       |  6 ++-
 18 files changed, 86 insertions(+), 54 deletions(-)

diff --git a/src/renderer/components/svgs/bsm-icon.component.tsx b/src/renderer/components/svgs/bsm-icon.component.tsx
index 38a9f23c..ae31d2f6 100644
--- a/src/renderer/components/svgs/bsm-icon.component.tsx
+++ b/src/renderer/components/svgs/bsm-icon.component.tsx
@@ -7,7 +7,7 @@ import { TerminalIcon } from "./icons/terminal-icon.component";
 import { DesktopIcon } from "./icons/desktop-icon.component";
 import { OculusIcon } from "./icons/oculus-icon.component";
 import { AddIcon } from "./icons/add-icon.component";
-import CrossIcon from "./icons/cross-icon.component";
+import { CrossIcon } from "./icons/cross-icon.component";
 import { FranceIcon } from "./flags/france-icon.component";
 import { SpainIcon } from "./flags/spain-icon.component";
 import { UsaIcon } from "./flags/usa-icon.component";
@@ -15,6 +15,7 @@ import { UkIcon } from "./flags/uk-icon.component";
 import { TaskIcon } from "./icons/task-icon.component";
 import { CopyIcon } from "./icons/copy-icon.component";
 import { SteamIcon } from "./icons/steam-icon.component";
+import { CSSProperties } from "react";
 
 export type BsmIconType = (
    "settings"|"trash"|"favorite"|"folder"|"bsNote"|
@@ -23,27 +24,27 @@ export type BsmIconType = (
    "fr-FR-flag"|"es-ES-flag"|"en-US-flag"|"en-EN-flag"
 );
 
-export function BsmIcon({className, icon}: {className?: string, icon: BsmIconType}) {
+export function BsmIcon({className, icon, style}: {className?: string, icon: BsmIconType, style?: CSSProperties}) {
 
     const renderIcon = () => {
-        if(icon === "settings"){ return <SettingIcon className={className}/> }
-        if(icon === "trash"){ return <TrashIcon className={className}/> }
-        if(icon === "favorite"){ return <FavoriteIcon className={className}/> }
-        if(icon === "folder"){ return <FolderIcon className={className}/> }
-        if(icon === "bsNote"){ return <BsNoteFill className={className}/> }
-        if(icon === "terminal"){ return <TerminalIcon className={className}/> }
-        if(icon === "desktop"){ return <DesktopIcon className={className}/> }
-        if(icon === "oculus"){ return <OculusIcon className={className}/> }
-        if(icon === "add"){ return <AddIcon className={className}/> }
-        if(icon === "cross"){ return <CrossIcon className={className}/> }
-        if(icon === "fr-FR-flag"){ return <FranceIcon className={className}/> }
-        if(icon === "es-ES-flag"){ return <SpainIcon className={className}/> }
-        if(icon === "en-US-flag"){ return <UsaIcon className={className}/> }
-        if(icon === "en-EN-flag"){ return <UkIcon className={className}/> }
-        if(icon === "task"){ return <TaskIcon className={className}/> }
-        if(icon === "copy"){ return <CopyIcon className={className}/> }
-        if(icon === "steam"){ return <SteamIcon className={className}/> }
-        return <TrashIcon className={className}/>
+        if(icon === "settings"){ return <SettingIcon className={className} style={style}/> }
+        if(icon === "trash"){ return <TrashIcon className={className} style={style}/> }
+        if(icon === "favorite"){ return <FavoriteIcon className={className} style={style}/> }
+        if(icon === "folder"){ return <FolderIcon className={className} style={style}/> }
+        if(icon === "bsNote"){ return <BsNoteFill className={className} style={style}/> }
+        if(icon === "terminal"){ return <TerminalIcon className={className} style={style}/> }
+        if(icon === "desktop"){ return <DesktopIcon className={className} style={style}/> }
+        if(icon === "oculus"){ return <OculusIcon className={className} style={style}/> }
+        if(icon === "add"){ return <AddIcon className={className} style={style}/> }
+        if(icon === "cross"){ return <CrossIcon className={className} style={style}/> }
+        if(icon === "fr-FR-flag"){ return <FranceIcon className={className} style={style}/> }
+        if(icon === "es-ES-flag"){ return <SpainIcon className={className} style={style}/> }
+        if(icon === "en-US-flag"){ return <UsaIcon className={className} style={style}/> }
+        if(icon === "en-EN-flag"){ return <UkIcon className={className} style={style}/> }
+        if(icon === "task"){ return <TaskIcon className={className} style={style}/> }
+        if(icon === "copy"){ return <CopyIcon className={className} style={style}/> }
+        if(icon === "steam"){ return <SteamIcon className={className} style={style}/> }
+        return <TrashIcon className={className} style={style}/>
     }
 
   return (
diff --git a/src/renderer/components/svgs/flags/france-icon.component.tsx b/src/renderer/components/svgs/flags/france-icon.component.tsx
index b1bd32bd..40198fc5 100644
--- a/src/renderer/components/svgs/flags/france-icon.component.tsx
+++ b/src/renderer/components/svgs/flags/france-icon.component.tsx
@@ -1,6 +1,8 @@
-export function FranceIcon(props: {className: string}) {
+import { CSSProperties } from "react";
+
+export function FranceIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
     <defs/>
       <g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-324.000000, -744.000000)">
           <g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="France-3">
diff --git a/src/renderer/components/svgs/flags/spain-icon.component.tsx b/src/renderer/components/svgs/flags/spain-icon.component.tsx
index 4e87cd64..1adf9bb1 100644
--- a/src/renderer/components/svgs/flags/spain-icon.component.tsx
+++ b/src/renderer/components/svgs/flags/spain-icon.component.tsx
@@ -1,6 +1,8 @@
-export function SpainIcon(props: {className: string}) {
+import { CSSProperties } from "react";
+
+export function SpainIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
     <defs/>
     <g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-662.000000, -621.000000)">
         <g transform="translate(70.000000, 70.000000)" id="Spain">
diff --git a/src/renderer/components/svgs/flags/uk-icon.component.tsx b/src/renderer/components/svgs/flags/uk-icon.component.tsx
index 01d76b6b..a77d3e18 100644
--- a/src/renderer/components/svgs/flags/uk-icon.component.tsx
+++ b/src/renderer/components/svgs/flags/uk-icon.component.tsx
@@ -1,6 +1,8 @@
-export function UkIcon(props: {className: string}) {
+import { CSSProperties } from "react";
+
+export function UkIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
     <defs/>
     <g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-493.000000, -1295.000000)">
         <g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="uk">
diff --git a/src/renderer/components/svgs/flags/usa-icon.component.tsx b/src/renderer/components/svgs/flags/usa-icon.component.tsx
index 1aa70d44..31220cc5 100644
--- a/src/renderer/components/svgs/flags/usa-icon.component.tsx
+++ b/src/renderer/components/svgs/flags/usa-icon.component.tsx
@@ -1,6 +1,8 @@
-export function UsaIcon(props: {className: string}) {
+import { CSSProperties } from "react";
+
+export function UsaIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="71" height="48" viewBox="0 0 71 48" version="1.1" className={props.className} style={props.style}>
     <defs/>
       <g id="Flags" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" transform="translate(-831.000000, -866.000000)">
           <g transform="translate(70.000000, 70.000000)" fillRule="nonzero" id="USA">
diff --git a/src/renderer/components/svgs/icons/add-icon.component.tsx b/src/renderer/components/svgs/icons/add-icon.component.tsx
index 48ea0ba7..d0769a01 100644
--- a/src/renderer/components/svgs/icons/add-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/add-icon.component.tsx
@@ -1,6 +1,8 @@
-export function AddIcon(props: {className: string}) {
+import { CSSProperties } from "react";
+
+export function AddIcon(props: {className?: string, style?: CSSProperties}) {
     return (
-        <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+        <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
             <path fill="currentColor" d="M17.833 32.458V22.167H7.542v-4.334h10.291V7.542h4.334v10.291h10.291v4.334H22.167v10.291Z"/>
         </svg>
     ) 
diff --git a/src/renderer/components/svgs/icons/bs-note-fill.component.tsx b/src/renderer/components/svgs/icons/bs-note-fill.component.tsx
index eda41237..90e9d853 100644
--- a/src/renderer/components/svgs/icons/bs-note-fill.component.tsx
+++ b/src/renderer/components/svgs/icons/bs-note-fill.component.tsx
@@ -1,9 +1,10 @@
+import { CSSProperties } from "react";
 
 
-export function BsNoteFill({className}: {className: string}) {
+export function BsNoteFill(props: {className?: string, style?: CSSProperties}) {
 
   return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.4 406.4" height="406.4" width="406.4">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 406.4 406.4" height="406.4" width="406.4">
       <g>
           <rect rx="69.453" height="406.4" width="406.4" fill="currentColor" fillRule="evenodd" paintOrder="fill markers stroke"/>
           <path transform="translate(-70 170)" d="M135.467-109.4H406.4v33.867L270.933-7.8 135.467-75.533z" fill="white" />
diff --git a/src/renderer/components/svgs/icons/copy-icon.component.tsx b/src/renderer/components/svgs/icons/copy-icon.component.tsx
index 4ad4ef40..a2cef147 100644
--- a/src/renderer/components/svgs/icons/copy-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/copy-icon.component.tsx
@@ -1,6 +1,8 @@
-export function CopyIcon(props: {className?: string}) {
+import { CSSProperties } from "react";
+
+export function CopyIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-   <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+   <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
       <path fill="currentColor" d="M13.625 31.167q-1.292 0-2.229-.917-.938-.917-.938-2.25V6q0-1.292.938-2.229.937-.938 2.229-.938h17q1.333 0 2.25.938.917.937.917 2.229v22q0 1.333-.917 2.25t-2.25.917Zm0-3.167h17V6h-17v22Zm-5.917 9.125q-1.333 0-2.25-.937-.916-.938-.916-2.23V11.083q0-.666.458-1.104.458-.437 1.125-.437t1.125.437q.458.438.458 1.104v22.875h17.584q.666 0 1.125.459.458.458.458 1.125 0 .666-.458 1.125-.459.458-1.125.458ZM13.625 6v22V6Z"/>
    </svg>
   )
diff --git a/src/renderer/components/svgs/icons/cross-icon.component.tsx b/src/renderer/components/svgs/icons/cross-icon.component.tsx
index 4defa13e..517e74b4 100644
--- a/src/renderer/components/svgs/icons/cross-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/cross-icon.component.tsx
@@ -1,6 +1,8 @@
-export default function CrossIcon(props: {className: string}){
+import { CSSProperties } from "react";
+
+export function CrossIcon(props: {className?: string, style?: CSSProperties}){
   return (
-    <svg className={props.className} aria-hidden="false" width="12" height="12" viewBox="0 0 12 12">
+    <svg className={props.className} style={props.style} aria-hidden="false" width="12" height="12" viewBox="0 0 12 12">
         <polygon fill="currentColor" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/desktop-icon.component.tsx b/src/renderer/components/svgs/icons/desktop-icon.component.tsx
index b16728fd..69244169 100644
--- a/src/renderer/components/svgs/icons/desktop-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/desktop-icon.component.tsx
@@ -1,6 +1,8 @@
-export function DesktopIcon(props: {className: string}) {
+import { CSSProperties } from "react";
+
+export function DesktopIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
         <path fill="currentColor" d="M13.417 38V33.75H16.875V29.875H6.708Q4.917 29.875 3.687 28.646Q2.458 27.417 2.458 25.667V7.25Q2.458 5.5 3.687 4.271Q4.917 3.042 6.708 3.042H33.375Q35.125 3.042 36.375 4.271Q37.625 5.5 37.625 7.25V25.667Q37.625 27.417 36.375 28.646Q35.125 29.875 33.375 29.875H23.167V33.75H26.667V38ZM6.708 25.667H33.375Q33.375 25.667 33.375 25.667Q33.375 25.667 33.375 25.667V7.25Q33.375 7.25 33.375 7.25Q33.375 7.25 33.375 7.25H6.708Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25V25.667Q6.708 25.667 6.708 25.667Q6.708 25.667 6.708 25.667ZM6.708 25.667Q6.708 25.667 6.708 25.667Q6.708 25.667 6.708 25.667V7.25Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25Q6.708 7.25 6.708 7.25V25.667Q6.708 25.667 6.708 25.667Q6.708 25.667 6.708 25.667Z"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/favorite-icon.component.tsx b/src/renderer/components/svgs/icons/favorite-icon.component.tsx
index ede2ae9b..f5adfaa8 100644
--- a/src/renderer/components/svgs/icons/favorite-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/favorite-icon.component.tsx
@@ -1,7 +1,8 @@
+import { CSSProperties } from "react";
 
-export function FavoriteIcon(props: {className: string}) {
+export function FavoriteIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className}xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
         <path fill="currentColor" d="M19.958 35.875 17.583 33.708Q10.792 27.542 6.729 22.917Q2.667 18.292 2.667 13.333Q2.667 9.25 5.396 6.5Q8.125 3.75 12.208 3.75Q14.333 3.75 16.354 4.646Q18.375 5.542 19.958 7.542Q21.75 5.542 23.688 4.646Q25.625 3.75 27.75 3.75Q31.833 3.75 34.583 6.5Q37.333 9.25 37.333 13.333Q37.333 18.292 33.25 22.917Q29.167 27.542 22.375 33.708ZM20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208Q20 19.208 20 19.208ZM19.958 31Q26.125 25.333 29.896 21.25Q33.667 17.167 33.667 13.333Q33.667 10.75 32 9.083Q30.333 7.417 27.75 7.417Q25.792 7.417 24.062 8.646Q22.333 9.875 21.333 12.042H18.625Q17.667 9.875 15.896 8.646Q14.125 7.417 12.208 7.417Q9.667 7.417 8 9.083Q6.333 10.75 6.333 13.333Q6.333 17.167 10.083 21.25Q13.833 25.333 19.958 31Z"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/folder-icon.component.tsx b/src/renderer/components/svgs/icons/folder-icon.component.tsx
index 19d79ae6..d0629f12 100644
--- a/src/renderer/components/svgs/icons/folder-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/folder-icon.component.tsx
@@ -1,7 +1,8 @@
+import { CSSProperties } from "react";
 
-export function FolderIcon(props: {className: string}) {
+export function FolderIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
         <path fill="currentColor" d="M6.375 34Q4.875 34 3.792 32.896Q2.708 31.792 2.708 30.333V9.375Q2.708 7.875 3.792 6.792Q4.875 5.708 6.375 5.708H16.958L20.042 8.75H33.667Q35.167 8.75 36.271 9.854Q37.375 10.958 37.375 12.458V30.333Q37.375 31.792 36.271 32.896Q35.167 34 33.667 34ZM6.375 9.375V30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333H33.667Q33.667 30.333 33.667 30.333Q33.667 30.333 33.667 30.333V12.458Q33.667 12.458 33.667 12.458Q33.667 12.458 33.667 12.458H18.5L15.458 9.375H6.375Q6.375 9.375 6.375 9.375Q6.375 9.375 6.375 9.375ZM6.375 9.375Q6.375 9.375 6.375 9.375Q6.375 9.375 6.375 9.375V12.458Q6.375 12.458 6.375 12.458Q6.375 12.458 6.375 12.458V30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333Q6.375 30.333 6.375 30.333Z"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/oculus-icon.component.tsx b/src/renderer/components/svgs/icons/oculus-icon.component.tsx
index 3b77e95f..932fc1b1 100644
--- a/src/renderer/components/svgs/icons/oculus-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/oculus-icon.component.tsx
@@ -1,6 +1,8 @@
-export function OculusIcon(props: {className?: string}) {
+import { CSSProperties } from "react";
+
+export function OculusIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="19" width="32">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="19" width="32">
         <path fill="currentColor" d="M24.182 18.599c-0.427 0.297-0.901 0.474-1.411 0.552-0.51 0.083-1.016 0.068-1.521 0.068h-10.5c-0.51 0-1.016 0.021-1.526-0.068-0.51-0.083-0.979-0.255-1.411-0.552-0.854-0.604-1.365-1.563-1.365-2.604 0-1.057 0.516-2.016 1.37-2.599 0.417-0.297 0.896-0.479 1.396-0.557 0.5-0.083 1-0.083 1.526-0.083h10.5c0.5 0 1.016-0.016 1.516 0.063s0.984 0.26 1.401 0.542c0.865 0.578 1.365 1.557 1.365 2.599 0 1.036-0.526 2-1.38 2.599zM28.411 8.526c-1.125-0.906-2.417-1.531-3.818-1.865-0.802-0.193-1.604-0.281-2.432-0.307-0.599-0.021-1.198-0.010-1.818-0.010h-8.661c-0.609 0-1.224-0.010-1.833 0.010-0.823 0.026-1.63 0.109-2.432 0.307-1.401 0.339-2.698 0.964-3.818 1.865-2.281 1.823-3.599 4.568-3.599 7.474 0 2.911 1.318 5.656 3.583 7.474 1.13 0.906 2.422 1.531 3.823 1.87 0.802 0.193 1.609 0.281 2.432 0.302 0.599 0.021 1.198 0.016 1.818 0.016h8.661c0.599 0 1.219 0.005 1.818-0.016 0.823-0.021 1.62-0.109 2.417-0.302 1.401-0.344 2.682-0.969 3.823-1.87 2.307-1.823 3.625-4.568 3.625-7.474s-1.318-5.656-3.589-7.474z"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/setting-icon.component.tsx b/src/renderer/components/svgs/icons/setting-icon.component.tsx
index 682557e1..f46e4d20 100644
--- a/src/renderer/components/svgs/icons/setting-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/setting-icon.component.tsx
@@ -1,6 +1,8 @@
-export function SettingIcon(props: {className?: string}) {
+import { CSSProperties } from "react";
+
+export function SettingIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
         <path fill="currentColor" d="M16.5 35.833 15.792 30.792Q15 30.542 14.104 30.042Q13.208 29.542 12.542 28.958L7.875 31.042L4.375 24.875L8.542 21.792Q8.458 21.375 8.438 20.896Q8.417 20.417 8.417 20Q8.417 19.625 8.438 19.146Q8.458 18.667 8.542 18.208L4.375 15.125L7.875 9L12.542 11.042Q13.25 10.458 14.125 9.979Q15 9.5 15.792 9.208L16.5 4.167H23.5L24.208 9.208Q25.042 9.542 25.875 10Q26.708 10.458 27.375 11.042L32.125 9L35.625 15.125L31.375 18.208Q31.5 18.667 31.521 19.125Q31.542 19.583 31.542 20Q31.542 20.417 31.5 20.854Q31.458 21.292 31.375 21.792L35.583 24.875L32.083 31.042L27.375 28.917Q26.667 29.542 25.854 30.042Q25.042 30.542 24.208 30.792L23.5 35.833ZM19.958 24.792Q21.958 24.792 23.375 23.396Q24.792 22 24.792 20Q24.792 18 23.375 16.604Q21.958 15.208 19.958 15.208Q17.958 15.208 16.562 16.604Q15.167 18 15.167 20Q15.167 22 16.562 23.396Q17.958 24.792 19.958 24.792Z"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/steam-icon.component.tsx b/src/renderer/components/svgs/icons/steam-icon.component.tsx
index ea03584f..b27e04d3 100644
--- a/src/renderer/components/svgs/icons/steam-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/steam-icon.component.tsx
@@ -1,6 +1,8 @@
-export function SteamIcon({className}: {className: string}) {
+import { CSSProperties } from "react";
+
+export function SteamIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={className} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 233 233">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 233 233">
     <defs>
         <linearGradient id="a" x2="50%" x1="50%" y2="100%">
             <stop stopColor="#111D2E" offset="0"/>
diff --git a/src/renderer/components/svgs/icons/task-icon.component.tsx b/src/renderer/components/svgs/icons/task-icon.component.tsx
index d02c002c..8ce49519 100644
--- a/src/renderer/components/svgs/icons/task-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/task-icon.component.tsx
@@ -1,6 +1,8 @@
-export function TaskIcon(props: {className?: string}) {
+import { CSSProperties } from "react";
+
+export function TaskIcon(props: {className?: string, style?: CSSProperties}) {
    return (
-      <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+      <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
          <path fill="currentColor" d="m18.125 25.667-3.042-3.084q-.208-.208-.458-.312-.25-.104-.521-.104t-.521.104q-.25.104-.458.354-.417.417-.417.979 0 .563.417.979l3.917 3.875q.208.25.5.375.291.125.583.125.333 0 .604-.125.271-.125.521-.375l7.5-7.5q.417-.416.417-.979 0-.562-.417-.979-.417-.417-.979-.417-.563 0-.979.417ZM9.542 36.958q-1.292 0-2.23-.937-.937-.938-.937-2.229V6.208q0-1.291.937-2.229.938-.937 2.23-.937h13.166q.667 0 1.25.25.584.25 1 .708l7.709 7.708q.458.417.708 1 .25.584.25 1.25v19.834q0 1.291-.937 2.229-.938.937-2.23.937Zm12.875-24.375V6.208H9.542v27.584h20.916V14.167H24q-.667 0-1.125-.459-.458-.458-.458-1.125ZM9.542 6.208v7.959-7.959 27.584V6.208Z"/>
       </svg>
    )
diff --git a/src/renderer/components/svgs/icons/terminal-icon.component.tsx b/src/renderer/components/svgs/icons/terminal-icon.component.tsx
index c215f020..8197da1e 100644
--- a/src/renderer/components/svgs/icons/terminal-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/terminal-icon.component.tsx
@@ -1,6 +1,8 @@
-export function TerminalIcon(props: {className?: string}) {
+import { CSSProperties } from "react";
+
+export function TerminalIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
         <path fill="currentColor" d="M6.333 33.375Q5.125 33.375 4.229 32.479Q3.333 31.583 3.333 30.333V9.667Q3.333 8.417 4.229 7.521Q5.125 6.625 6.333 6.625H33.667Q34.875 6.625 35.771 7.521Q36.667 8.417 36.667 9.667V30.333Q36.667 31.583 35.771 32.479Q34.875 33.375 33.667 33.375ZM6.333 30.333H33.667Q33.667 30.333 33.667 30.333Q33.667 30.333 33.667 30.333V13.042H6.333V30.333Q6.333 30.333 6.333 30.333Q6.333 30.333 6.333 30.333ZM20.375 28V25.375H29.667V28ZM12.5 27.875 10.667 26.042 14.958 21.708 10.625 17.375 12.5 15.5 18.667 21.708Z"/>
     </svg>
   )
diff --git a/src/renderer/components/svgs/icons/trash-icon.component.tsx b/src/renderer/components/svgs/icons/trash-icon.component.tsx
index 68caade5..b6334991 100644
--- a/src/renderer/components/svgs/icons/trash-icon.component.tsx
+++ b/src/renderer/components/svgs/icons/trash-icon.component.tsx
@@ -1,6 +1,8 @@
-export function TrashIcon(props: {className?: string}) {
+import { CSSProperties } from "react";
+
+export function TrashIcon(props: {className?: string, style?: CSSProperties}) {
   return (
-    <svg className={props.className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
+    <svg className={props.className} style={props.style} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" height="40" width="40">
         <path fill="currentColor" d="M10.917 35.667Q9.417 35.667 8.333 34.583Q7.25 33.5 7.25 32V9.375H5.083V5.708H14.208V3.833H25.75V5.708H34.917V9.375H32.75V32Q32.75 33.5 31.667 34.583Q30.583 35.667 29.083 35.667ZM29.083 9.375H10.917V32Q10.917 32 10.917 32Q10.917 32 10.917 32H29.083Q29.083 32 29.083 32Q29.083 32 29.083 32ZM14.833 28.708H18.083V12.625H14.833ZM21.917 28.708H25.167V12.625H21.917ZM10.917 9.375V32Q10.917 32 10.917 32Q10.917 32 10.917 32Q10.917 32 10.917 32Q10.917 32 10.917 32Z"/>
     </svg>
   )