Merge pull request #86 from supabase/feature/icon-svg-import

feat: added new `src` prop, for inserting SVG files into `<Icon>`
supabase · Jan 18, 2021 · 1d47dc0 · 1d47dc0
2 parents 6007315 + e11e0a4
commit 1d47dc0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -48,3 +48,23 @@ IconList.args = {
   size: 16,
   strokeWidth: 2,
 }
+
+const SvgMessagesIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
+    />
+  </svg>
+)
+
+export const IconWithSVG = (args: any) => (
+  <Icon {...args} src={<SvgMessagesIcon />} />
+)
+
+IconWithSVG.args = {
+  size: 'xxxlarge',
+  strokeWidth: 4,
+}
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -29,6 +29,7 @@ interface Props {
     | 'indigo'
     | 'purple'
     | 'pink'
+  src?: React.ReactNode
 }
 
 interface StringMap {
@@ -44,6 +45,7 @@ function Icon({
   fill = undefined,
   stroke = undefined,
   background,
+  src,
   ...props
 }: Props) {
   return (
@@ -100,14 +102,33 @@ function Icon({
           />
         )
 
+        const Icon = src ? (
+          // custom SVG file
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            color={!noColor ? color : 'currentColor'}
+            fill={!noColor ? (fill ? fill : 'none') : 'none'}
+            stroke={!noColor ? stroke : 'currentColor'}
+            className={`${className}`}
+            width={iconSize}
+            height={iconSize}
+          >
+            {src}
+          </svg>
+        ) : (
+          // feather icon
+          <IconComponent />
+        )
+
         return background ? (
           <div
+            // circle coloured background
             className={`sbui-icon-container sbui-icon-container--${background}`}
           >
-            <IconComponent />
+            {Icon}
           </div>
         ) : (
-          <IconComponent />
+          Icon
         )
       }}
     </IconContext.Consumer>