Initial
This commit is contained in:
robmadole
commit
fa89ab8bcc
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", {
|
||||
"targets": {
|
||||
"node": "current"
|
||||
}
|
||||
}]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
node_modules
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"presets": [
|
||||
["env", { "modules": false }]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
dist/
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
# webpack
|
||||
|
||||
> A Vue.js project
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build for production with minification
|
||||
npm run build
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>webpack</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="/dist/build.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../..
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
{
|
||||
"name": "webpack",
|
||||
"description": "A Vue.js project",
|
||||
"version": "1.0.0",
|
||||
"author": "robmadole <robmadole@gmail.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
|
||||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome": "^0.0.4",
|
||||
"@fortawesome/fontawesome-solid": "^0.0.4",
|
||||
"vue": "^2.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-preset-env": "^1.5.1",
|
||||
"cross-env": "^3.0.0",
|
||||
"css-loader": "^0.25.0",
|
||||
"file-loader": "^0.9.0",
|
||||
"vue-loader": "^12.1.0",
|
||||
"vue-template-compiler": "^2.3.3",
|
||||
"webpack": "^2.6.1",
|
||||
"webpack-dev-server": "^2.4.5"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<font-awesome-icon class="test" :icon="icon" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import solid from '@fortawesome/fontawesome-solid'
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
|
||||
data () {
|
||||
return {
|
||||
msg: 'Welcome to Your Vue.js App'
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
icon () {
|
||||
return solid.faUser
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,10 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
|
||||
|
||||
Vue.component('font-awesome-icon', FontAwesomeIcon)
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
var path = require('path')
|
||||
var webpack = require('webpack')
|
||||
|
||||
module.exports = {
|
||||
entry: './src/main.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
publicPath: '/dist/',
|
||||
filename: 'build.js'
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader',
|
||||
options: {
|
||||
loaders: {
|
||||
}
|
||||
// other vue-loader options go here
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel-loader',
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|svg)$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]?[hash]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'vue$': 'vue/dist/vue.esm.js'
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
historyApiFallback: true,
|
||||
noInfo: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
},
|
||||
devtool: '#eval-source-map'
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports.devtool = '#source-map'
|
||||
// http://vue-loader.vuejs.org/en/workflow/production.html
|
||||
module.exports.plugins = (module.exports.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true
|
||||
})
|
||||
])
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "@fortawesome/vue-fontawesome",
|
||||
"version": "0.0.1",
|
||||
"main": "index.js",
|
||||
"author": "robmadole <robmadole@gmail.com>",
|
||||
"license": "MIT",
|
||||
"watch": {
|
||||
"build": {
|
||||
"patterns": [
|
||||
"src/**/*.js"
|
||||
],
|
||||
"delay": 2000
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rollup -c rollup.config.js",
|
||||
"dist": "npm build",
|
||||
"watch": "npm-watch",
|
||||
"test": "jest"
|
||||
},
|
||||
"peerDependencies": {},
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome": "^0.0.3",
|
||||
"babel-jest": "^20.0.3",
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"jest": "^20.0.4",
|
||||
"npm-watch": "^0.2.0",
|
||||
"regenerator-runtime": "^0.10.5",
|
||||
"rollup": "^0.45.2",
|
||||
"rollup-plugin-buble": "^0.15.0",
|
||||
"rollup-plugin-commonjs": "^8.1.0",
|
||||
"rollup-plugin-node-resolve": "^3.0.0",
|
||||
"vue": "^2.4.2",
|
||||
"vue-template-compiler": "^2.4.2",
|
||||
"vue-template-es2015-compiler": "^1.5.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"camelcase": "^4.1.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import resolve from 'rollup-plugin-node-resolve'
|
||||
import commonJs from 'rollup-plugin-commonjs'
|
||||
import buble from 'rollup-plugin-buble'
|
||||
|
||||
export default {
|
||||
entry: 'src/index.js',
|
||||
dest: 'index.js',
|
||||
external: [
|
||||
'@fortawesome/fontawesome'
|
||||
],
|
||||
globals: {
|
||||
'@fortawesome/fontawesome': 'FontAwesome'
|
||||
},
|
||||
moduleName: 'vue-fontawesome',
|
||||
format: 'umd',
|
||||
plugins: [
|
||||
resolve({
|
||||
jsnext: true,
|
||||
main: true
|
||||
}),
|
||||
commonJs(),
|
||||
buble()
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import fontawesome from '@fortawesome/fontawesome'
|
||||
import convert from '../converter'
|
||||
|
||||
export default {
|
||||
name: 'FontAwesomeIcon',
|
||||
|
||||
props: {
|
||||
icon: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
render (h) {
|
||||
const { abstract } = fontawesome.icon(this.icon)
|
||||
const convertCurry = convert.bind(null, h)
|
||||
|
||||
if (abstract.length === 1) {
|
||||
return convertCurry(abstract[0])
|
||||
} else {
|
||||
return h('span', abstract.map(convertCurry))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import Vue from 'vue'
|
||||
import Icon from './icon'
|
||||
import fontawesome from '@fortawesome/fontawesome'
|
||||
|
||||
const icon = {
|
||||
iconName: 'mock',
|
||||
prefix: 'fa',
|
||||
icon: [
|
||||
512, 512,
|
||||
[],
|
||||
"f001",
|
||||
"M"
|
||||
]
|
||||
}
|
||||
|
||||
function mount (propsData = {}) {
|
||||
const Ctor = Vue.extend(Icon)
|
||||
return new Ctor({ propsData }).$mount()
|
||||
}
|
||||
|
||||
test('something', () => {
|
||||
expect(mount({ icon })).toBeTruthy()
|
||||
})
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import camelCase from 'camelcase'
|
||||
|
||||
function styleToObject (style) {
|
||||
return style.split(';')
|
||||
.map((s) => { s.trim() })
|
||||
.reduce((acc, pair) => {
|
||||
const i = pair.indexOf(':')
|
||||
const prop = pair.slice(0, i)
|
||||
const value = pair.slice(i + 1).trim()
|
||||
return acc[camelCase(prop)] = value
|
||||
}, {})
|
||||
}
|
||||
|
||||
function classToObject (cls) {
|
||||
return cls.split(/\s+/)
|
||||
.reduce((acc, c) => {
|
||||
acc[c] = true
|
||||
return acc
|
||||
}, {})
|
||||
}
|
||||
|
||||
function convert (h, element, props = {}) {
|
||||
const children = (element.children || []).map(convert.bind(null, h))
|
||||
|
||||
const mixins = Object.keys(element.attributes).reduce((acc, key) => {
|
||||
const val = element.attributes[key]
|
||||
|
||||
switch (key) {
|
||||
case 'class':
|
||||
acc['class'] = classToObject(val)
|
||||
break
|
||||
case 'style':
|
||||
acc['style'] = styleToObject(val)
|
||||
break
|
||||
default:
|
||||
acc.attrs[key] = val
|
||||
}
|
||||
|
||||
return acc
|
||||
}, { 'class': {}, style: {}, attrs: {} })
|
||||
|
||||
return h(
|
||||
element.tag,
|
||||
{
|
||||
class: mixins.class,
|
||||
style: mixins.style,
|
||||
attrs: mixins.attrs,
|
||||
props
|
||||
},
|
||||
children
|
||||
)
|
||||
}
|
||||
|
||||
export default convert
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import icon from './components/icon'
|
||||
|
||||
export default icon
|
||||
Loading…
Reference in New Issue