From adb9166a11e766b77be4bafcf6976e16b2501788 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 28 Feb 2024 17:01:46 +1100
Subject: [PATCH] feat: added svg fill color as well as clip and fill rules to
 session icon component

this lets us render more complex svgs like the recovery password icon
---
 ts/components/icon/SessionIcon.tsx | 41 ++++++++++++++++++------------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/ts/components/icon/SessionIcon.tsx b/ts/components/icon/SessionIcon.tsx
index 3da4a9e5c..9cbcb0629 100644
--- a/ts/components/icon/SessionIcon.tsx
+++ b/ts/components/icon/SessionIcon.tsx
@@ -15,6 +15,9 @@ export type SessionIconProps = {
   glowStartDelay?: number;
   noScale?: boolean;
   backgroundColor?: string;
+  fill?: string;
+  clipRule?: ClipRule;
+  fillRule?: FillRule;
   dataTestId?: string;
 };
 
@@ -42,6 +45,9 @@ const getIconDimensionFromIconSize = (iconSize: SessionIconSize | number) => {
   }
 };
 
+type ClipRule = 'nonzero' | 'evenodd' | 'inherit';
+type FillRule = 'nonzero' | 'evenodd';
+
 type StyledSvgProps = {
   width: string | number;
   height: string | number;
@@ -54,6 +60,9 @@ type StyledSvgProps = {
   noScale?: boolean;
   iconColor?: string;
   backgroundColor?: string;
+  fill?: string;
+  clipRule?: ClipRule;
+  filleRule?: FillRule;
 };
 
 const rotate = keyframes`
@@ -132,22 +141,13 @@ const Svg = memo(styled.svg<StyledSvgProps>`
   transition: inherit;
 `);
 
-const SessionSvg = (props: {
-  viewBox: string;
-  path: string | Array<string>;
-  width: string | number;
-  height: string | number;
-  iconRotation: number;
-  iconColor?: string;
-  rotateDuration?: number;
-  glowDuration?: number;
-  glowStartDelay?: number;
-  noScale?: boolean;
-  borderRadius?: string;
-  backgroundColor?: string;
-  iconPadding?: string;
-  dataTestId?: string;
-}) => {
+const SessionSvg = (
+  props: StyledSvgProps & {
+    viewBox: string;
+    path: string | Array<string>;
+    dataTestId?: string;
+  }
+) => {
   const colorSvg = props.iconColor ? props.iconColor : '--button-icon-stroke-color';
   const pathArray = props.path instanceof Array ? props.path : [props.path];
   const propsToPick = {
@@ -163,6 +163,9 @@ const SessionSvg = (props: {
     backgroundColor: props.backgroundColor,
     borderRadius: props.borderRadius,
     iconPadding: props.iconPadding,
+    fill: props.fill,
+    clipRule: props.clipRule,
+    fillRule: props.filleRule,
     dataTestId: props.dataTestId,
   };
 
@@ -186,6 +189,9 @@ export const SessionIcon = (props: SessionIconProps) => {
     noScale,
     backgroundColor,
     iconPadding,
+    fill,
+    clipRule = 'nonzero',
+    fillRule = 'nonzero',
     dataTestId,
   } = props;
   let { iconSize, iconRotation } = props;
@@ -211,6 +217,9 @@ export const SessionIcon = (props: SessionIconProps) => {
       iconColor={iconColor}
       backgroundColor={backgroundColor}
       iconPadding={iconPadding}
+      fill={fill}
+      clipRule={clipRule}
+      filleRule={fillRule}
       dataTestId={dataTestId}
     />
   );