feat(icon): added icon storybook

chakra-ui · Oct 27, 2019 · a789119 · a789119
1 parent 844bcfb
commit a789119
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -1,16 +1,18 @@
 import { configure, addDecorator } from '@storybook/vue';
 import ThemeProvider from '../src/components/ThemeProvider'
 import theme from '../src/lib/theme'
+import icons from '../src/lib/plugin/iconsPaths'
 
 addDecorator(() => ({
   template: `
-    <ThemeProvider :theme="theme" color-mode="light">
+    <ThemeProvider :theme="theme" :icons="icons" color-mode="light">
       <story/>
     </ThemeProvider>
   `,
   data() {
     return {
-      theme
+      theme,
+      icons
     }
   },
   components: { ThemeProvider }

diff --git a/stories/4-Icon.stories.js b/stories/4-Icon.stories.js
@@ -8,17 +8,17 @@ storiesOf('UI | Icon', module)
     components: { Icon },
     template: `
       <div>
-        <Icon name="star" color="blue.400" size="4" />
-        <Icon name="email" color="yellow.400" size="5" />
-        <Icon name="phone" color="green.400" size="6" />
+        <Icon name="star" mx="2" color="yellow.400" size="4" />
+        <Icon name="email" mx="2" color="indigo.400" size="5" />
+        <Icon name="phone" mx="2" color="green.400" size="6" />
       </div>
     `
   }))
   .add('Custom Icon eg FA', () => ({
     components: { Icon },
     template: `
       <div>
-        <Icon name="Search" color="blue.400" size="10" />
+        <Icon name="ambulance" color="blue.400" size="10" />
       </div>
     `
   }))