Adding the rest of the CSS features

bin/dev

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+yarn watch

example/webpack/bin/dev

@@ -1,4 +1,3 @@
 #!/bin/bash
 
-yarn build
+yarn watch
-yarn dev

example/webpack/package.json

@@ -8,6 +8,7 @@
     "build": {
       "patterns": [
         "src/**/*.js",
+        "src/**/*.vue",
         "../../index.js"
       ]
     }

example/webpack/src/library.js

@@ -2,9 +2,9 @@ import Vue from 'vue'
 import App from './library/App.vue'
 import fontawesome from '@fortawesome/fontawesome'
 import brands from '@fortawesome/fontawesome-brands'
-import { faCoffee, faCog } from '@fortawesome/fontawesome-solid'
+import { faCoffee, faCog, faSpinner, faQuoteLeft, faSquare, faCheckSquare } from '@fortawesome/fontawesome-solid'
 
-fontawesome.library.add(brands, faCoffee, faCog)
+fontawesome.library.add(brands, faCoffee, faCog, faSpinner, faQuoteLeft, faSquare, faCheckSquare)
 
 new Vue({
   el: '#app',

example/webpack/src/library/App.vue

@@ -4,7 +4,28 @@
       <font-awesome-icon pack="fab" name="font-awesome" />
       <font-awesome-icon pack="fas" name="coffee" />
       <font-awesome-icon pack="fas" name="cog" :spin="true" :fixed-width="false" />
+      <font-awesome-icon pack="fab" name="fort-awesome" size="4x" />
+      <font-awesome-icon pack="fas" name="spinner" :pulse="true" :fixed-width="true" />
+      <font-awesome-icon pack="fab" name="fort-awesome" :rotation="90" />
+      <font-awesome-icon pack="fab" name="internet-explorer" flip="both" />
     </h1>
+    <div>
+      <p>
+        <font-awesome-icon pack="fas" name="quote-left" size="2x" :border="true" pull="left" />...tomorrow we 
+        will run faster, stretch out our arms farther...And then one fine morning&mdash; So we beat on, boats 
+        against the current, borne back ceaselessly into the past.
+      </p>
+    </div>
+    <div>
+      <p>
+        <ul class="fa-ul">
+          <li><font-awesome-icon pack="fas" name="check-square" :list-item="true" />List icons</li>
+          <li><font-awesome-icon pack="fas" name="check-square" :list-item="true" />can be used</li>
+          <li><font-awesome-icon pack="fas" name="square" :list-item="true" />as bullets</li>
+          <li><font-awesome-icon pack="fas" name="square" :list-item="true" />in lists</li>
+        </ul>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -24,8 +45,14 @@ export default {
 #app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #2c3e50;
   margin-top: 60px;
+  text-align: center;
+}
+
+p {
+  display: inline-block;
+  width: 250px;
+  text-align: left;
 }
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/vue-fontawesome",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "main": "index.js",
   "author": "robmadole <robmadole@gmail.com>",
   "license": "MIT",

src/components/icon.js

@@ -5,23 +5,55 @@ export default {
   name: 'FontAwesomeIcon',
 
   props: {
-    name: {
+    border: {
-      type: String,
+      type: Boolean,
-      default: ''
+      default: false
     },
-    pack: {
+    fixedWidth: {
+      type: Boolean,
+      default: false
+    },
+    flip: {
       type: String,
-      default: 'fa'
+      default: null,
+      validator: (value) => ['horizontal', 'vertical', 'both'].indexOf(value) > -1
     },
     iconDefinition: {
       type: Object,
       default: null
     },
-    spin: {
+    listItem: {
       type: Boolean,
       default: false
     },
-    fixedWidth: {
+    pack: {
+      type: String,
+      default: 'fa'
+    },
+    pull: {
+      type: String,
+      default: null,
+      validator: (value) => ['right', 'left'].indexOf(value) > -1
+    },
+    pulse: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+    rotation: {
+      type: Number,
+      default: null,
+      validator: (value) => [90, 180, 270].indexOf(value) > -1
+    },
+    size: {
+      type: String,
+      default: null,
+      validator: (value) => ['lg', 'xs', 'sm', '1x', '2x', '3x', '4x', '5x', '6x', '7x', '8x', '9x', '10x'].indexOf(value) > -1
+    },
+    spin: {
       type: Boolean,
       default: false
     }
@@ -50,7 +82,15 @@ export default {
     classList () {
       let classes = {
         'fa-spin': this.spin,
-        'fa-fw': this.fixedWidth
+        'fa-pulse': this.pulse,
+        'fa-fw': this.fixedWidth,
+        'fa-border': this.border,
+        'fa-li': this.listItem,
+        'fa-flip-horizontal': this.flip === 'horizontal' || this.flip === 'both',
+        'fa-flip-vertical': this.flip === 'vertical' || this.flip === 'both',
+        [`fa-${this.size}`]: this.size !== null,
+        [`fa-rotate-${this.rotation}`]: this.rotation !== null,
+        [`fa-pull-${this.pull}`]: this.pull !== null
       }
 
       return Object.keys(classes)