Merge pull request #1 from FortAwesome/component-updates

Updates to Vue component

.gitignore

@@ -1 +1,2 @@
 node_modules
+index.js

bin/setup

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+yarn install
+yarn build

example/webpack/package.json

@@ -9,8 +9,12 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "@fortawesome/fontawesome": "^0.0.4",
-    "@fortawesome/fontawesome-solid": "^0.0.4",
+    "@fortawesome/fontawesome": "^0.0.7",
+    "@fortawesome/fontawesome-brands": "^0.0.7",
+    "@fortawesome/fontawesome-light": "^0.0.7",
+    "@fortawesome/fontawesome-regular": "^0.0.7",
+    "@fortawesome/fontawesome-solid": "^0.0.7",
+    "@fortawesome/vue-fontawesome": "^0.0.2",
     "vue": "^2.3.3"
   },
   "devDependencies": {

example/webpack/src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
-    <font-awesome-icon class="test" :icon="icon" />
+    <font-awesome-icon class="test" :icon-definition="icon" />
+    <font-awesome-icon class="test" pack="fas" name="coffee" />
   </div>
 </template>
 

example/webpack/src/main.js

@@ -1,7 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
+import fontawesome from '@fortawesome/fontawesome'
+import { faCoffee } from '@fortawesome/fontawesome-solid'
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 
+fontawesome.library.add(faCoffee)
+
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 new Vue({

example/webpack/yarn.lock

@@ -2,13 +2,31 @@
 # yarn lockfile v1
 
 
-"@fortawesome/fontawesome-solid@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-solid/-/fontawesome-solid-0.0.4.tgz#94272d803fce9561efc09d346bbe64dbe13b7473"
+"@fortawesome/fontawesome-brands@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-brands/-/fontawesome-brands-0.0.7.tgz#851b9c152355b8d6a58a49cb2a68e16cfff3d404"
 
-"@fortawesome/fontawesome@^0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.4.tgz#55ba18f6b5a15431e4b1379e54ac4334b39d4b12"
+"@fortawesome/fontawesome-light@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-light/-/fontawesome-light-0.0.7.tgz#6a48e395cde1b159836ce78511e9112b1535ee24"
+
+"@fortawesome/fontawesome-regular@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-regular/-/fontawesome-regular-0.0.7.tgz#c120480fa34e59bea229ee1b1a8ca45542775d55"
+
+"@fortawesome/fontawesome-solid@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-solid/-/fontawesome-solid-0.0.7.tgz#58a6e09d3324d27853d5fd290c3b6a22959449bc"
+
+"@fortawesome/fontawesome@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.7.tgz#3253fd256d49a3f4751b25ec17f0bfb18ec92c0d"
+
+"@fortawesome/vue-fontawesome@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.0.2.tgz#435a276ac5e1dd6ed3f56ec03a0cde49a331514a"
+  dependencies:
+    camelcase "^4.1.0"
 
 abbrev@1:
   version "1.1.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/vue-fontawesome",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "main": "index.js",
   "author": "robmadole <robmadole@gmail.com>",
   "license": "MIT",
@@ -18,9 +18,10 @@
     "watch": "npm-watch",
     "test": "jest"
   },
-  "peerDependencies": {},
+  "peerDependencies": {
+    "@fortawesome/fontawesome": "^0.0.7"
+  },
   "devDependencies": {
-    "@fortawesome/fontawesome": "^0.0.3",
     "babel-jest": "^20.0.3",
     "babel-preset-env": "^1.6.0",
     "jest": "^20.0.4",

src/components/icon.js

@@ -5,20 +5,49 @@ export default {
   name: 'FontAwesomeIcon',
 
   props: {
-    icon: {
+    name: { 
+      type: String,
+      default: ''
+    },
+    pack: { 
+      type: String,
+      default: 'fa' 
+    },
+    iconDefinition: {
       type: Object,
-      required: true
+      default: null
     }
   },
 
-  render (h) {
-    const { abstract } = fontawesome.icon(this.icon)
-    const convertCurry = convert.bind(null, h)
+  data () {
+    return {
+      packNames: {
+        brands: 'fab',
+        light: 'fal',
+        regular: 'far',
+        solid: 'fas'
+      }
+    }
+  },
+
+  computed: {
+    prefix () {
+      return this.packNames[this.pack] || this.pack
+    },
+
+    iconConfig () {
+      return { prefix: this.prefix, iconName: this.name }
+    },
 
-    if (abstract.length === 1) {
-      return convertCurry(abstract[0])
-    } else {
-      return h('span', abstract.map(convertCurry))
+    icon () {
+      return fontawesome.icon(this.iconDefinition || this.iconConfig)
     }
+  },
+
+  render (createElement) {
+    const { abstract } = this.icon
+    const convertCurry = convert.bind(null, createElement)
+
+    return convertCurry(abstract[0])
   }
 }

yarn.lock

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@fortawesome/fontawesome@^0.0.3":
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.3.tgz#4e53e3485db18f9712b875c5b8450eb6604bf87a"
+"@fortawesome/fontawesome@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.7.tgz#3253fd256d49a3f4751b25ec17f0bfb18ec92c0d"
 
 abab@^1.0.3:
   version "1.0.3"