diff --git a/src/feather.vue b/src/feather.vue
new file mode 100644
index 0000000..00fa1c5
--- /dev/null
+++ b/src/feather.vue
@@ -0,0 +1,161 @@
+<script>
+import feather from 'feather-icons';
+
+export default {
+  name: 'Feather',
+
+  props: {
+    animation: {
+      type: String,
+      default: undefined,
+    },
+
+    animationSpeed: {
+      type: String,
+      default: undefined,
+    },
+
+    fill: {
+      type: String,
+      default: 'none',
+    },
+
+    size: {
+      type: [Number, String],
+      default: 24,
+    },
+
+    stroke: {
+      type: String,
+      default: 'currentColor',
+    },
+
+    strokeLinecap: {
+      type: String,
+      default: 'round',
+    },
+
+    strokeLinejoin: {
+      type: String,
+      default: 'round',
+    },
+
+    strokeWidth: {
+      type: [Number, String],
+      default: 2,
+    },
+
+    tag: {
+      type: String,
+      default: 'i',
+    },
+
+    type: {
+      type: String,
+      required: true,
+      validator(type) {
+        if (!feather.icons[type]) {
+          throw new Error(`"${type}" is not an available icon type.`);
+        }
+
+        return true;
+      },
+    },
+  },
+
+  render(createElement) {
+    const {
+      animation,
+      animationSpeed,
+      size,
+      type,
+    } = this;
+    const icon = feather.icons[type];
+
+    return createElement(
+      this.tag,
+
+      {
+        attrs: {
+          'data-name': type,
+          'data-tags': icon ? icon.tags : '',
+          'data-type': type,
+        },
+
+        class: {
+          feather: true,
+          [`feather--${type}`]: type,
+          [`feather--${animation}`]: animation,
+          [`feather--${animationSpeed}`]: animationSpeed,
+        },
+
+        on: this.$listeners,
+      },
+
+      [
+        icon ? createElement(
+          'svg',
+
+          {
+            attrs: {
+              ...icon.attrs,
+              fill: this.fill,
+              height: size,
+              stroke: this.stroke,
+              'stroke-linecap': this.strokeLinecap,
+              'stroke-linejoin': this.strokeLinejoin,
+              'stroke-width': this.strokeWidth,
+              width: size,
+            },
+
+            class: [icon.attrs.class, 'feather__content'],
+
+            domProps: {
+              innerHTML: icon.contents,
+            },
+          },
+        ) : '',
+      ],
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  @keyframes feather--spin {
+    from {
+      transform: rotate(0);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .feather {
+    display: inline-block;
+    overflow: hidden;
+
+    &--spin {
+      animation: feather--spin 2s linear infinite;
+    }
+
+    &--pulse {
+      animation: feather--spin 2s infinite steps(8);
+    }
+
+    &--slow {
+      animation-duration: 3s;
+    }
+
+    &--fast {
+      animation-duration: 1s;
+    }
+
+    &__content {
+      display: block;
+      height: inherit;
+      width: inherit;
+    }
+  }
+</style>
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..2750290
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,7 @@
+import Feather from './feather.vue';
+
+Feather.install = (Vue) => {
+  Vue.component(Feather.name, Feather);
+};
+
+export default Feather;
diff --git a/src/index.vue b/src/index.vue
deleted file mode 100644
index da4fc10..0000000
--- a/src/index.vue
+++ /dev/null
@@ -1,154 +0,0 @@
-<script>
-  import feather from 'feather-icons';
-
-  export default {
-    name: 'feather',
-
-    props: {
-      animation: String,
-      animationSpeed: String,
-
-      fill: {
-        type: String,
-        default: 'none',
-      },
-
-      size: {
-        type: [Number, String],
-        default: 24,
-      },
-
-      stroke: {
-        type: String,
-        default: 'currentColor',
-      },
-
-      strokeLinecap: {
-        type: String,
-        default: 'round',
-      },
-
-      strokeLinejoin: {
-        type: String,
-        default: 'round',
-      },
-
-      strokeWidth: {
-        type: [Number, String],
-        default: 2,
-      },
-
-      tag: {
-        type: String,
-        default: 'i',
-      },
-
-      type: {
-        type: String,
-        required: true,
-        validator(type) {
-          if (!feather.icons[type]) {
-            throw new Error(`"${type}" is not an available icon type.`);
-          }
-
-          return true;
-        },
-      },
-    },
-
-    render(createElement) {
-      const {
-        animation,
-        animationSpeed,
-        size,
-        type,
-      } = this;
-      const icon = feather.icons[type];
-
-      return createElement(
-        this.tag,
-
-        {
-          attrs: {
-            'data-name': type,
-            'data-tags': icon ? icon.tags : '',
-            'data-type': type,
-          },
-
-          class: {
-            feather: true,
-            [`feather--${type}`]: type,
-            [`feather--${animation}`]: animation,
-            [`feather--${animationSpeed}`]: animationSpeed,
-          },
-
-          on: this.$listeners,
-        },
-
-        [
-          icon ? createElement(
-            'svg',
-
-            {
-              attrs: {
-                ...icon.attrs,
-                fill: this.fill,
-                height: size,
-                stroke: this.stroke,
-                'stroke-linecap': this.strokeLinecap,
-                'stroke-linejoin': this.strokeLinejoin,
-                'stroke-width': this.strokeWidth,
-                width: size,
-              },
-
-              class: [icon.attrs.class, 'feather__content'],
-
-              domProps: {
-                innerHTML: icon.contents,
-              },
-            },
-          ) : '',
-        ],
-      );
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  @keyframes feather--spin {
-    from {
-      transform: rotate(0);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .feather {
-    display: inline-block;
-    overflow: hidden;
-
-    &--spin {
-      animation: feather--spin 2s linear infinite;
-    }
-
-    &--pulse {
-      animation: feather--spin 2s infinite steps(8);
-    }
-
-    &--slow {
-      animation-duration: 3s;
-    }
-
-    &--fast {
-      animation-duration: 1s;
-    }
-
-    &__content {
-      display: block;
-      height: inherit;
-      width: inherit;
-    }
-  }
-</style>