Merge pull request #4 from FortAwesome/adding-transform

Adding transform ability
This commit is contained in:
Travis Chase 2017-08-29 11:03:03 -05:00 committed by GitHub
commit f9e14bb71c
6 changed files with 53 additions and 29 deletions

View File

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

View File

@ -26,6 +26,14 @@
</ul> </ul>
</p> </p>
</div> </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> </div>
</template> </template>

View File

@ -2,25 +2,25 @@
# yarn lockfile v1 # yarn lockfile v1
"@fortawesome/fontawesome-brands@^0.0.7": "@fortawesome/fontawesome-brands@^0.0.8":
version "0.0.7" version "0.0.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-brands/-/fontawesome-brands-0.0.7.tgz#851b9c152355b8d6a58a49cb2a68e16cfff3d404" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-brands/-/fontawesome-brands-0.0.8.tgz#4ccc06989e7716ae63e8097b830c73a480e64265"
"@fortawesome/fontawesome-light@^0.0.7": "@fortawesome/fontawesome-light@^0.0.8":
version "0.0.7" version "0.0.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-light/-/fontawesome-light-0.0.7.tgz#6a48e395cde1b159836ce78511e9112b1535ee24" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-light/-/fontawesome-light-0.0.8.tgz#489e62b06d577887175410803c9767dc2116ceaf"
"@fortawesome/fontawesome-regular@^0.0.7": "@fortawesome/fontawesome-regular@^0.0.8":
version "0.0.7" version "0.0.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-regular/-/fontawesome-regular-0.0.7.tgz#c120480fa34e59bea229ee1b1a8ca45542775d55" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-regular/-/fontawesome-regular-0.0.8.tgz#6144c4b9fbc4a1abce2c872b1c3cbcc50268d828"
"@fortawesome/fontawesome-solid@^0.0.7": "@fortawesome/fontawesome-solid@^0.0.8":
version "0.0.7" version "0.0.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-solid/-/fontawesome-solid-0.0.7.tgz#58a6e09d3324d27853d5fd290c3b6a22959449bc" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-solid/-/fontawesome-solid-0.0.8.tgz#d00fa1c357ffb72326e0d35b094c6da1c886b84c"
"@fortawesome/fontawesome@^0.0.7": "@fortawesome/fontawesome@^0.0.8":
version "0.0.7" version "0.0.8"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.7.tgz#3253fd256d49a3f4751b25ec17f0bfb18ec92c0d" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome/-/fontawesome-0.0.8.tgz#3424a17b01abb14a7912fab041c658d9f9f21c94"
abbrev@1: abbrev@1:
version "1.1.0" version "1.1.0"

View File

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

View File

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

View File

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