feat: add spin property

README.md

@@ -32,12 +32,13 @@ Example.vue:
 ```vue
 <template>
   <div>
-    My hand is a <hook-icon />
+    My hand is a <HookIcon />
   </div>
 </template>
 
 <script>
-import HookIcon from 'mdi-vue/Hook' // works without an extension too
+import HookIcon from 'mdi-vue/Hook.vue' // raw vue component
+// import HookIcon from 'mdi-vue/Hook[.js]' // transpiled component
 
 export {
   components: [
@@ -47,6 +48,21 @@ export {
 </script>
 ```
 
+## Props
+### width and height (Numeric)
+```
+  <Icon :width="30" :height="30 />
+```
+
+### spin (boolean; default: false)
+Applies a css spin animation to the icon
+```
+  <CogIcon spin />
+  // or
+  <CogIcon :spin="true" />
+```
+
+
 ## Global imports
 
 Just as any component, icons can be registered globally using `Vue.component` as in the following example.

dist/icons.css

@@ -1,3 +1,34 @@
 .mdi > svg {
   vertical-align: middle;
 }
+
+.mdi.mdi-spin > svg {
+  -webkit-animation: mdi-spin 2s infinite linear;
+     -moz-animation: mdi-spin 2s infinite linear;
+          animation: mdi-spin 2s infinite linear;
+}
+
+@-webkit-keyframes mdi-spin {
+  0% {
+      -webkit-transform: rotate(0deg);
+         -moz-transform: rotate(0deg);
+              transform: rotate(0deg);
+  }
+  100% {
+      -webkit-transform: rotate(360deg);
+         -moz-transform: rotate(360deg);
+              transform: rotate(360deg);
+  }
+}
+@keyframes mdi-spin {
+  0% {
+      -webkit-transform: rotate(0deg);
+         -moz-transform: rotate(0deg);
+              transform: rotate(0deg);
+  }
+  100% {
+      -webkit-transform: rotate(360deg);
+         -moz-transform: rotate(360deg);
+              transform: rotate(360deg);
+  }
+}

template.js

@@ -2,7 +2,7 @@
 
 module.exports = (name, path, ariaLabel) => `<template functional>
   <span
-    :class="[data.staticClass, 'mdi', 'mdi-${name}']"
+    :class="[data.staticClass, 'mdi', 'mdi-${name}', props.spin ? 'mdi-spin' : undefined]"
     :role="props.role"
     :aria-label="props.ariaLabel"
   >
@@ -50,6 +50,10 @@ export default {
     title: {
       type: String,
       required: false
+    },
+    spin: {
+      type: Boolean,
+      default: false
     }
   }
 }