From c2402ddb7280b63668fcc8a00c40708df369d4ee Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Thu, 30 Dec 2021 12:44:14 +0530
Subject: [PATCH] Add isImage prop in RawIcon

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/atoms/button/IconButton.jsx     |  6 ++++--
 src/app/atoms/system-icons/RawIcon.jsx  | 19 ++++++++++++++-----
 src/app/atoms/system-icons/RawIcon.scss |  3 +++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx
index 061808c1..a06c136c 100644
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@@ -10,7 +10,7 @@ import Text from '../text/Text';
 const IconButton = React.forwardRef(({
   variant, size, type,
   tooltip, tooltipPlacement, src,
-  onClick, tabIndex, disabled,
+  onClick, tabIndex, disabled, isImage,
 }, ref) => {
   const btn = (
     <button
@@ -23,7 +23,7 @@ const IconButton = React.forwardRef(({
       tabIndex={tabIndex}
       disabled={disabled}
     >
-      <RawIcon size={size} src={src} />
+      <RawIcon size={size} src={src} isImage={isImage} />
     </button>
   );
   if (tooltip === null) return btn;
@@ -46,6 +46,7 @@ IconButton.defaultProps = {
   onClick: null,
   tabIndex: 0,
   disabled: false,
+  isImage: false,
 };
 
 IconButton.propTypes = {
@@ -58,6 +59,7 @@ IconButton.propTypes = {
   onClick: PropTypes.func,
   tabIndex: PropTypes.number,
   disabled: PropTypes.bool,
+  isImage: PropTypes.bool,
 };
 
 export default IconButton;
diff --git a/src/app/atoms/system-icons/RawIcon.jsx b/src/app/atoms/system-icons/RawIcon.jsx
index dff91ea4..08acc66b 100644
--- a/src/app/atoms/system-icons/RawIcon.jsx
+++ b/src/app/atoms/system-icons/RawIcon.jsx
@@ -2,24 +2,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';
 
-function RawIcon({ color, size, src }) {
-  const style = {
-    WebkitMaskImage: `url(${src})`,
-    maskImage: `url(${src})`,
-  };
+function RawIcon({
+  color, size, src, isImage,
+}) {
+  const style = {};
   if (color !== null) style.backgroundColor = color;
+  if (isImage) {
+    style.backgroundColor = 'transparent';
+    style.backgroundImage = `url(${src})`;
+  } else {
+    style.WebkitMaskImage = `url(${src})`;
+    style.maskImage = `url(${src})`;
+  }
+
   return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
 }
 
 RawIcon.defaultProps = {
   color: null,
   size: 'normal',
+  isImage: false,
 };
 
 RawIcon.propTypes = {
   color: PropTypes.string,
   size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
   src: PropTypes.string.isRequired,
+  isImage: PropTypes.bool,
 };
 
 export default RawIcon;
diff --git a/src/app/atoms/system-icons/RawIcon.scss b/src/app/atoms/system-icons/RawIcon.scss
index fa74069d..56fc9b3c 100644
--- a/src/app/atoms/system-icons/RawIcon.scss
+++ b/src/app/atoms/system-icons/RawIcon.scss
@@ -10,6 +10,9 @@
   -webkit-mask-size: cover;
   mask-size: cover;
   background-color: var(--ic-surface-normal);
+
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 .ic-raw-large {
   @include icSize(var(--ic-large));