More ImageIcon options

Author: calebjacob

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@near-pagoda/ui",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "A React component library that implements the official NEAR design system.",
   "license": "MIT",
   "repository": {

src/components/ImageIcon.module.scss

@@ -1,5 +1,4 @@
 .imageIcon {
-  border-radius: 100%;
   overflow: hidden;
   flex-shrink: 0;
   background: #fff;
@@ -13,8 +12,21 @@
     width: 100%;
     height: 100%;
     object-fit: cover;
-    fill: #000 !important;
-    stroke: #000 !important;
+  }
+
+  &[data-rounded='true'] {
+    border-radius: 100%;
+  }
+
+  &[data-transparent='true'] {
+    background: transparent;
+  }
+
+  &:not([data-transparent='true']) {
+    svg {
+      fill: #000 !important;
+      stroke: #000 !important;
+    }
   }
 
   &[data-size='2xs'] {
@@ -68,4 +80,8 @@
       transform: scale(1.15, 1.15);
     }
   }
+
+  &[data-no-padding='true'] {
+    padding: 0 !important;
+  }
 }

src/components/ImageIcon.tsx

@@ -8,6 +8,10 @@ type Props = {
   className?: string;
   fallbackIcon?: ReactNode;
   indicateParentClickable?: boolean;
+  padding?: boolean;
+  paddingFallbackIcon?: boolean;
+  rounded?: boolean;
+  transparent?: boolean;
   size?: ThemeIconSize;
   src: string | undefined;
   style?: CSSProperties;
@@ -18,6 +22,10 @@ export const ImageIcon = ({
   className = '',
   fallbackIcon,
   indicateParentClickable,
+  padding = true,
+  paddingFallbackIcon = true,
+  rounded = true,
+  transparent,
   size = 'm',
   src,
   ...props
@@ -27,6 +35,9 @@ export const ImageIcon = ({
       className={`${s.imageIcon} ${className} image-icon`}
       data-parent-clickable={indicateParentClickable}
       data-size={size}
+      data-no-padding={(!padding && !!src) || (!paddingFallbackIcon && !src)}
+      data-rounded={rounded}
+      data-transparent={transparent}
       {...props}
     >
       {src ? <img src={src} alt={alt} /> : fallbackIcon}