feat(Icon): added support for svg

TheComputerM · Aug 8, 2020 · 1e78f75 · 1e78f75
1 parent d251af2
commit 1e78f75
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/components/Icon/Icon.svelte b/src/components/Icon/Icon.svelte
@@ -2,7 +2,9 @@
   let classes = '';
   export let inactive = false;
   export let size = '24px';
-  export let md = false;
+  export let path = null;
+  export let title = null;
+  export let rotate = '0deg';
   export let style = '';
   export { classes as class };
 </script>
@@ -13,9 +15,22 @@
 
 <i
   aria-hidden="true"
-  style="font-size:{size};{style}"
+  style="font-size: {size};transform: rotate({rotate});{style}"
   class="s-icon {classes}"
-  class:material-icons={md}
+  {title}
   class:inactive>
+  {#if path}
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24">
+      <path d={path}>
+        {#if title}
+          <title>{title}</title>
+        {/if}
+      </path>
+    </svg>
+  {/if}
   <slot />
 </i>
diff --git a/src/components/Icon/index.scss b/src/components/Icon/index.scss
@@ -17,3 +17,8 @@
     color: var(--theme-icons-inactive);
   }
 }
+
+svg {
+  fill: currentColor;
+  transform: inherit;
+}