Merge pull request #4 from FortAwesome/adding-transform
Adding transform ability
This commit is contained in:
commit
f9e14bb71c
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
}, {})
|
}, {})
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue