feat: add component for icon & image

.storybook/preview-head.html

@@ -0,0 +1 @@
+<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>

components/base/VIcon.vue

@@ -0,0 +1,87 @@
+<template>
+  <i
+    :class="[
+      'icon',
+      color ? COLOR[color] : '',
+      size ? SIZE[size] : '',
+    ]"
+    @click="$emit('click', $event)"
+  >
+    <span class="iconify" :data-icon="name" data-inline="false" />
+  </i>
+</template>
+
+<script>
+export const COLOR = {
+  primary: 'is-primary',
+}
+export const SIZE = {
+  small: 'is-small',
+  medium: 'is-medium',
+}
+
+export default {
+  name: 'VIcon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: undefined,
+      validator (value) {
+        return Object.keys(SIZE).includes(value)
+      }
+    },
+    color: {
+      type: String,
+      default: undefined,
+      validator (value) {
+        return Object.keys(COLOR).includes(value)
+      }
+    },
+  },
+  data () {
+    return {
+      COLOR,
+      SIZE,
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  color: inherit;
+  line-height: 1;
+  vertical-align: top;
+  transition: inherit;
+
+  /deep/ {
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.is-primary /deep/ {
+    .iconify {
+      color: $primary;
+    }
+  }
+
+  &.is-small {
+    width: 20px;
+    height: 20px;
+  }
+
+  &.is-medium {
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>

components/base/VImage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="image">
+    <div
+      v-if="backgroundImage"
+      v-lazy:background-image="src"
+      class="image__background-image"
+    />
+    <img v-lazy="src" :alt="alt">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VImage',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    backgroundImage: Boolean,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.image {
+  border-radius: inherit;
+
+  &__background-image {
+    display: block;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    background-position: center;
+    background-size: cover;
+    background-color: $gray-400;
+    background-repeat: no-repeat;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+}
+</style>

nuxt.config.js

@@ -15,6 +15,11 @@ export default {
     ],
     link: [
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ],
+    script: [
+      {
+        src: 'https://code.iconify.design/1/1.0.7/iconify.min.js', body: true,
+      }
     ]
   },
 
@@ -45,7 +50,7 @@ export default {
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: [
-    '@/components/global'
+    '@/components/base'
   ],
 
   // Modules: https://go.nuxtjs.dev/config-modules

stories/global/VButton.stories.js → stories/base/VButton.stories.js

@@ -1,15 +1,15 @@
 import base, { filename } from 'paths.macro'
 import { argEvents, dirnameTitle } from '@/.storybook/utils'
-import VButton from '@/components/global/VButton.vue'
+import VButton from '@/components/base/VButton.vue'
 
 export default {
   title: dirnameTitle(base, filename),
   component: VButton,
 }
 
-const Template = ({ 'v-model': model, slot, onlyIcon, ...restProps }, { argTypes }) => ({
+const Template = ({ 'v-model': model, slot, ...restProps }, { argTypes }) => ({
   props: {
-    args: { default: () => ({ model, slot, onlyIcon, restProps }) },
+    args: { default: () => ({ model, slot, restProps }) },
     events: { default: () => argEvents(argTypes) }
   },
   components: { VButton },

stories/base/VIcon.stories.js

@@ -0,0 +1,29 @@
+import base, { filename } from 'paths.macro'
+import { argEvents, dirnameTitle, controlOptions } from '@/.storybook/utils'
+import VIcon, { SIZE, COLOR } from '@/components/base/VIcon.vue'
+
+export default {
+  title: dirnameTitle(base, filename),
+  component: VIcon,
+  argTypes: {
+    size: controlOptions(Object.keys(SIZE)),
+    color: controlOptions(Object.keys(COLOR)),
+  }
+}
+
+const Template = ({ 'v-model': model, slot, ...restProps }, { argTypes }) => ({
+  props: {
+    args: { default: () => ({ model, slot, restProps }) },
+    events: { default: () => argEvents(argTypes) }
+  },
+  components: { VIcon },
+  template: `
+    <v-icon v-model="args.model" v-bind="args.restProps" v-on="events"></v-icon>
+  `
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  name: 'ant-design:home-filled',
+  color: 'primary',
+}

stories/base/VImage.stories.js

@@ -0,0 +1,24 @@
+import base, { filename } from 'paths.macro'
+import { argEvents, dirnameTitle } from '@/.storybook/utils'
+import VImage from '@/components/base/VImage.vue'
+
+export default {
+  title: dirnameTitle(base, filename),
+  component: VImage,
+}
+
+const Template = ({ 'v-model': model, slot, ...restProps }, { argTypes }) => ({
+  props: {
+    args: { default: () => ({ model, slot, restProps }) },
+    events: { default: () => argEvents(argTypes) }
+  },
+  components: { VImage },
+  template: `
+    <v-image class="w-1/2" v-model="args.model" v-bind="args.restProps" v-on="events"></v-image>
+  `
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  src: 'https://fakeimg.pl/250x200',
+}