Add isImage prop in RawIcon

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/atoms/button/IconButton.jsx b/src/app/atoms/button/IconButton.jsx
index 061808c135ef14163f2e1a703f0ee885c4a9dacf..a06c136c9ded9005f68e69d5ac64a24d02dba6ae 100644 (file)
--- 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 dff91ea40cef5ba783ee7e5e685a5715b641a73e..08acc66bbf06462d54b5af64e802beaa96be3dae 100644 (file)
--- 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 fa74069df3514996e31cc99f0187d843b28dcc1b..56fc9b3c2a825cdef5b1ea57e1ce92a13ab8f72b 100644 (file)
--- 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));