Built generalised Icon component as superclass to IconButton

stylesheets/_session.scss

@@ -2,16 +2,19 @@
   font-family: 'SpaceMono';
   src: url('../fonts/SpaceMono-Regular.ttf') format('truetype');
 }
+
 @font-face {
   font-family: 'SpaceMono';
   src: url('../fonts/SpaceMono-Bold.ttf') format('truetype');
   font-weight: bold;
 }
+
 @font-face {
   font-family: 'SpaceMono';
   src: url('../fonts/SpaceMono-Italic.ttf') format('truetype');
   font-style: italic;
 }
+
 @font-face {
   font-family: 'SpaceMono';
   src: url('../fonts/SpaceMono-BoldItalic.ttf') format('truetype');
@@ -20,11 +23,9 @@
 }
 
 $session-font-family: 'SpaceMono';
-
 $session-color-green: #00f782;
 $session-color-white: #fff;
 $session-color-black: #000;
-
 $session-transition-duration: 0.25s;
 
 $session-icon-size-sm: 15px;
@@ -44,7 +45,6 @@ $session-icon-size-lg: 30px;
   display: flex;
   justify-content: center;
   border-radius: 500px;
-
   @mixin transparent-background($textAndBorderColor) {
     background-color: Transparent;
     background-repeat: no-repeat;
@@ -53,54 +53,43 @@ $session-icon-size-lg: 30px;
     color: $textAndBorderColor;
     border: 2px solid $textAndBorderColor;
   }
-
   &.full-green {
     background-color: $session-color-green;
     color: $session-color-white;
   }
-
   &.green {
     @include transparent-background($session-color-green);
   }
-
   &.white {
     @include transparent-background($session-color-white);
   }
 }
 
 .session-icon-button {
-  fill: $session-color-white;
   opacity: 0.4;
   cursor: pointer;
   display: inline-block;
   transition: opacity $session-transition-duration;
-
-  @mixin adjust-icon-size($size) {
-    line-height: $size;
-    height: $size;
-    width: $size;
-
-    margin: $size / 3;
-
-    img {
-      height: $size;
-      width: $size;
-    }
-  }
-
-  &.small {
-    @include adjust-icon-size($session-icon-size-sm);
-  }
-
-  &.medium {
-    @include adjust-icon-size($session-icon-size-md);
-  }
-
-  &.large {
-    @include adjust-icon-size($session-icon-size-lg);
-  }
-
   &:hover {
     opacity: 1;
   }
+  @mixin set-icon-margin($size) {
+    margin: $size / 3;
+  }
+
+  &.small {
+    @include set-icon-margin($session-icon-size-sm);
+  }
+
+  &.medium {
+    @include set-icon-margin($session-icon-size-sm);
+  }
+
+  &.large {
+    @include set-icon-margin($session-icon-size-sm);
+  }
+}
+
+.session-icon {
+  fill: $session-color-white;
 }

ts/components/session/SessionIconButton.tsx

@@ -1,63 +1,30 @@
 import React from 'react';
 import classNames from 'classnames';
-import { exists } from 'fs';
 
-export enum SessionIconButtonTypes {
-  'exit' = 'exit',
-  'search' = 'search',
-  'back' = 'back',
-  'attachment' = 'attachment',
-  'emoji' = 'emoji',
-  'favorite' = 'favorite',
-  'group' = 'group',
-  'menu' = 'menu',
-  'message' = 'message',
-  'microphone' = 'microphone',
-  'network' = 'network',
-  'options' = 'options',
-  'theme' = 'theme',
-}
+import { SessionIcon } from './SessionIcon';
 
-export enum SessionIconButtonSizes {
-  'small' = 'small',
-  'medium' = 'medium',
-  'large' = 'large',
-}
-
-interface Props {
-  iconType: SessionIconButtonTypes;
-  iconSize: SessionIconButtonSizes;
-  onClick: any;
-}
-
-export class SessionIconButton extends React.PureComponent<Props> {
+export class SessionIconButton extends SessionIcon {
   constructor(props: any) {
     super(props);
     this.clickHandler = this.clickHandler.bind(this);
   }
 
   public render() {
-    const { iconType, iconSize } = this.props;
-
-    const iconPath = `./images/session/icon-${iconType}.svg`;
-
     return (
       <div
-        className={classNames(
-          'session-icon-button',
-          iconType === SessionIconButtonTypes.exit ? 'exit' : '',
-          iconType === SessionIconButtonTypes.search ? 'search' : '',
-          iconType === SessionIconButtonTypes.back ? 'back' : '',
-          iconSize === SessionIconButtonSizes.small ? 'small' : '',
-          iconSize === SessionIconButtonSizes.medium ? 'medium' : '',
-          iconSize === SessionIconButtonSizes.large ? 'large' : ''
-        )}
+        className={classNames('session-icon-button', this.props.iconSize)}
         role="button"
         onClick={e => {
           this.clickHandler(e);
         }}
       >
-        <img src={iconPath} alt="Icon Button" />
+        <SessionIcon
+          iconType={this.props.iconType}
+          iconSize={this.props.iconSize}
+          iconColor={this.props.iconSize}
+          iconRotation={this.props.iconRotation}
+          onClick={this.props.onClick}
+        />
       </div>
     );
   }