Merge pull request #4 from FortAwesome/adding-transform

Adding transform ability

example/webpack/package.json

@@ -20,12 +20,11 @@
     "watch.static": "static -H '{\"Cache-Control\": \"no-cache, must-revalidate\"}'"
   },
   "dependencies": {
-    "@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",
-    "node-static": "^0.7.9",
+    "@fortawesome/fontawesome": "^0.0.8",
+    "@fortawesome/fontawesome-brands": "^0.0.8",
+    "@fortawesome/fontawesome-light": "^0.0.8",
+    "@fortawesome/fontawesome-regular": "^0.0.8",
+    "@fortawesome/fontawesome-solid": "^0.0.8",
     "vue": "^2.3.3"
   },
   "devDependencies": {
@@ -35,6 +34,7 @@
     "concurrently": "^3.5.0",
     "css-loader": "^0.28.5",
     "file-loader": "^0.11.2",
+    "node-static": "^0.7.9",
     "npm-watch": "^0.2.0",
     "vue-loader": "^13.0.4",
     "vue-template-compiler": "^2.3.3",

example/webpack/src/library/App.vue

@@ -26,6 +26,14 @@
         </ul>
       </p>
     </div>
+    <div>
+      <span>
+        <font-awesome-icon pack="fab" name="font-awesome" transform="grow-40 left-4 rotate-15" />
+      </span>
+      <span style="padding-left: 50px">
+        <font-awesome-icon pack="fab" name="font-awesome" :transform="{ flipX: false, flipY: false, rotate: 15, size: 56, x: -4, y: 0 }" />
+      </span>
+    </div>
   </div>
 </template>
 

example/webpack/yarn.lock

@@ -2,25 +2,25 @@
 # yarn lockfile v1
 
 
-"@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-brands@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-brands/-/fontawesome-brands-0.0.8.tgz#4ccc06989e7716ae63e8097b830c73a480e64265"
 
-"@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-light@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-light/-/fontawesome-light-0.0.8.tgz#489e62b06d577887175410803c9767dc2116ceaf"
 
-"@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-regular@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-regular/-/fontawesome-regular-0.0.8.tgz#6144c4b9fbc4a1abce2c872b1c3cbcc50268d828"
 
-"@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-solid@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-solid/-/fontawesome-solid-0.0.8.tgz#d00fa1c357ffb72326e0d35b094c6da1c886b84c"
 
-"@fortawesome/fontawesome@^0.0.7":
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.7.tgz#3253fd256d49a3f4751b25ec17f0bfb18ec92c0d"
+"@fortawesome/fontawesome@^0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.8.tgz#3424a17b01abb14a7912fab041c658d9f9f21c94"
 
 abbrev@1:
   version "1.1.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fortawesome/vue-fontawesome",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "index.js",
   "author": "robmadole <robmadole@gmail.com>",
   "license": "MIT",
@@ -18,7 +18,7 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome": "^0.0.7"
+    "@fortawesome/fontawesome": "^0.0.8"
   },
   "devDependencies": {
     "babel-jest": "^20.0.3",

src/components/icon.js

@@ -56,6 +56,10 @@ export default {
     spin: {
       type: Boolean,
       default: false
+    },
+    transform: {
+      type: [String, Object],
+      default: null
     }
   },
 
@@ -98,10 +102,17 @@ export default {
         .filter(key => key)
     },
 
+    transformDirectives () {
+      return (typeof this.transform === 'string') ? fontawesome.parse.transform(this.transform) : this.transform
+    },
+
     icon () {
-      return fontawesome.icon(this.iconDefinition || this.iconConfig, {
-        classes: this.classList
-      })
+      let params = Object.assign({},
+        this.classList.length > 0 && {classes: this.classList},
+        this.transformDirectives && {transform: this.transformDirectives}
+      )
+
+      return fontawesome.icon(this.iconDefinition || this.iconConfig, params)
     }
   },
 

src/converter.js

@@ -2,12 +2,16 @@ import camelCase from 'camelcase'
 
 function styleToObject (style) {
   return style.split(';')
-    .map((s) => { s.trim() })
+    .map(s => s.trim() )
+    .filter(s => s)
     .reduce((acc, pair) => {
       const i = pair.indexOf(':')
-      const prop = pair.slice(0, i)
+      const prop = camelCase(pair.slice(0, i))
       const value = pair.slice(i + 1).trim()
-      return acc[camelCase(prop)] = value
+      
+      acc[prop] = value
+
+      return acc
     }, {})
 }
 
@@ -15,6 +19,7 @@ function classToObject (cls) {
   return cls.split(/\s+/)
     .reduce((acc, c) => {
       acc[c] = true
+      
       return acc
     }, {})
 }