2.0.0

Author: Justineo

.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }]
+  ],
+  "plugins": [
+    "add-module-exports"
+  ]
+}

CHANGELOG.md

@@ -1,3 +1,8 @@
+2.0.0
+* Switch to Vue.js dependency to `2.0`.
+* Added support for users to specify used icons to reduce bundle size.
+* Bump major version to 2.
+
 0.3.0
 * Supported registering custom icons.
 

README.md

@@ -2,10 +2,16 @@
 
 > Font Awesome component for Vue.js, using inline SVG.
 
-Vue-Awesome is built upon [Font Awesome](https://github.com/FortAwesome/Font-Awesome) `v4.5.0` and depends on [Vue.js](https://vuejs.org/) `v1.0.17`+.
+Vue-Awesome is built upon [Font Awesome](https://github.com/FortAwesome/Font-Awesome) `v4.5.0` and depends on [Vue.js](https://vuejs.org/) `v2.0.1`+.
 
 ## Installation
 
+### npm (**Recommended**)
+
+```bash
+$ npm install vue-awesome
+```
+
 ### manual
 
 Just download `dist/vue-awesome.js` and include it in your HTML file:
@@ -14,12 +20,6 @@ Just download `dist/vue-awesome.js` and include it in your HTML file:
 <script src="path/to/vue-awesome/dist/vue-awesome.js"></script>
 ```
 
-### npm 
-
-```bash
-$ npm install vue-awesome
-```
-
 ### bower
 
 ```bash
@@ -38,16 +38,32 @@ $ bower install vue-awesome
 <icon name="repo-forked" label="Forked Repository"></icon>
 ```
 
-### CommonJS
+### ES Modules with vue-loader (**Recommended**)
 
 ```js
-var Vue = require('path/to/vue')
+import Vue from 'vue'
+import Icon from 'path/to/vue-awesome/src/components/Icon.vue'
+
+// Pick one way betweem the 2 following ways
+
+// only import the icons you use to reduce bundle size
+import 'path/to/vue-awesome/src/icons/flag'
+
+// or import all icons if you don't care about bundle size
+import 'path/to/vue-awesome/src/icons'
+```
+
+
+### CommonJS with NPM
+
+```js
+var Vue = require('vue')
 
 // requiring the UMD module
-var Icon = require('path/to/vue-awesome/dist/vue-awesome')
+var Icon = require('vue-awesome')
 
 // or with vue-loader you can require the src directly
-var Icon = require('path/to/vue-awesome/src/components/Icon.vue')
+var Icon = require('vue-awesome/src/components/Icon.vue')
 
 // register component to use
 ```
@@ -57,7 +73,7 @@ var Icon = require('path/to/vue-awesome/src/components/Icon.vue')
 ```js
 require.config({
   paths: {
-    'vue-awesome': 'path/to/vue-conticon/dist/vue-awesome'
+    'vue-awesome': 'path/to/vue-awesome'
   }
 })
 
@@ -79,12 +95,17 @@ $ npm run dev
 
 Open `http://localhost:8080/demo` to see the demo.
 
+### Updating icons
+
+Don't touch files in `src/icons` but Update `assets/icons.json` instead and run `npm run icons` to re-generate icon module files.
+
 ## Customize
 
 You can register custom icons like this:
 
 ```js
-var Icon = require('path/to/vue-awesome/src/components/Icon.vue')
+// ES Modules with vue-loader
+import Icon from 'vue-awesome/src/components/Icon.vue'
 
 Icon.register({
   taobao: {

src/assets/icons.js renamed to assets/icons.json

@@ -1,4 +1,4 @@
-module.exports = {
+{
   "500px": {
     "width": 1536,
     "height": 1792,

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-awesome",
-  "version": "0.3.0",
+  "version": "2.0.0",
   "homepage": "https://github.com/Justineo/vue-awesome",
   "authors": [
     "Justineo <[email protected]>"

build/icon.tpl

@@ -0,0 +1,3 @@
+import Icon from '../components/Icon.vue'
+
+Icon.register(${icon})

build/icons.js

@@ -0,0 +1,18 @@
+var fs = require('fs')
+var path = require('path')
+var icons = require('../assets/icons.json')
+
+var moduleTpl = fs.readFileSync(path.resolve(__dirname, './icon.tpl'), 'utf8')
+var ICON_PATH = path.resolve(__dirname, '../src/icons')
+
+var indexModule = ''
+var names = Object.keys(icons)
+names.forEach(function (name) {
+    var icon = {}
+    icon[name] = icons[name]
+    fs.writeFileSync(ICON_PATH + '/' + name + '.js', moduleTpl.replace('${icon}', JSON.stringify(icon)))
+    indexModule += 'import \'./' + name + '\'\n'
+})
+
+fs.writeFileSync(ICON_PATH + '/index.js', indexModule)
+console.log(names.length + ' icon modules generated.')

demo/Demo.vue

@@ -1,37 +1,39 @@
 <template>
-  <figure id="logo" @mouseenter="toggle" @mouseleave="toggle" @click="change" :title="logo"><icon :name="logo" scale="4"></icon></figure>
-  <h1><a href="https://github.com/Justineo/vue-awesome">Vue-Awesome</a></h1>
-  <p class="desc">Font Awesome component for Vue.js, using inline SVG.</p>
-
-  <h2>Basic</h2>
-  <p><icon name="flag"></icon></p>
-  <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&lt;/icon&gt;</code></pre></figure>
-
-  <h2>Scale</h2>
-  <p><icon name="language" scale="3"></icon></p>
-  <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&lt;/icon&gt;</code></pre></figure>
-
-  <h2>Spin</h2>
-  <p><icon name="refresh" spin></icon></p>
-  <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&lt;/icon&gt;</code></pre></figure>
-
-  <h2>Flip</h2>
-  <p><icon name="signal" flip="horizontal"></icon></p>
-  <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&lt;/icon&gt;</code></pre></figure>
-
-  <h2>Label</h2>
-  <p><small>Accessible for screen readers, etc.</small></p>
-  <p><icon name="code" label="Source Code"></icon></p>
-  <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&lt;/icon&gt;</code></pre></figure>
-
-  <h2>Custom icons</h2>
-  <p><small>You can register your own icons.</small></p>
-  <p><icon name="taobao"></icon></p>
-  <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"taobao"</span>&gt;&lt;/icon&gt;</code></pre></figure>
-
-  <footer>
-    <a href="//github.com/Justineo">@Justineo</a>|<a href="//github.com/Justineo/vue-awesome/blob/master/LICENSE">MIT License</a>|<a href="//github.com/Justineo/vue-awesome">View on GitHub</a>
-  </footer>
+  <main>
+    <figure id="logo" @mouseenter="toggle" @mouseleave="toggle" @click="change" :title="logo"><icon :name="logo" scale="4"></icon></figure>
+    <h1><a href="https://github.com/Justineo/vue-awesome">Vue-Awesome</a></h1>
+    <p class="desc">Font Awesome component for Vue.js, using inline SVG.</p>
+
+    <h2>Basic</h2>
+    <p><icon name="flag"></icon></p>
+    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"flag"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+
+    <h2>Scale</h2>
+    <p><icon name="language" scale="3"></icon></p>
+    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"language"</span> <span class="attr">scale</span>=<span class="val">"3"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+
+    <h2>Spin</h2>
+    <p><icon name="refresh" spin></icon></p>
+    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"refresh"</span> <span class="attr">spin</span>&gt;&lt;/icon&gt;</code></pre></figure>
+
+    <h2>Flip</h2>
+    <p><icon name="signal" flip="horizontal"></icon></p>
+    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"signal"</span> <span class="attr">flip</span>=<span class="val">"horizontal"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+
+    <h2>Label</h2>
+    <p><small>Accessible for screen readers, etc.</small></p>
+    <p><icon name="code" label="Source Code"></icon></p>
+    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"code"</span> <span class="attr">label</span>=<span class="val">"Source Code"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+
+    <h2>Custom icons</h2>
+    <p><small>You can register your own icons.</small></p>
+    <p><icon name="taobao"></icon></p>
+    <figure><pre><code>&lt;icon <span class="attr">name</span>=<span class="val">"taobao"</span>&gt;&lt;/icon&gt;</code></pre></figure>
+
+    <footer>
+      <a href="//github.com/Justineo">@Justineo</a>|<a href="//github.com/Justineo/vue-awesome/blob/master/LICENSE">MIT License</a>|<a href="//github.com/Justineo/vue-awesome">View on GitHub</a>
+    </footer>
+  </main>
 </template>
 
 <style>
@@ -157,29 +159,30 @@ footer a:hover {
 </style>
 
 <script>
-import icons from '../src/assets/icons';
-const keys = Object.keys(icons);
+import Icon from '../src/components/Icon.vue'
+import '../src/icons'
+const keys = Object.keys(Icon.icons);
 
 function randomIcon() {
   return keys[Math.floor(Math.random() * keys.length)];
 }
 
 export default {
-  data: function () {
+  data() {
     return {
       logo: randomIcon(),
       running: true
     }
   },
   methods: {
-    change: function () {
+    change() {
       this.logo = randomIcon()
     },
     toggle: function () {
       this.running = !this.running
     }
   },
-  ready: function () {
+  mounted() {
     setInterval(() => {
       if (this.running) {
         this.change()

demo/bundle.js

@@ -7,7 +7,7 @@
 <link href="//fonts.googleapis.com/css?family=Dosis:300,500&amp;text=Vue-Awesome" rel="stylesheet">
 </head>
 <body>
-<demo></demo>
+<div id="demo"></div>
 <script src="bundle.js"></script>
 </body>
 </html>

demo/index.html

@@ -1,6 +1,6 @@
-var Vue = require('vue')
-var Demo = require('./Demo.vue')
-var Icon = require('../src/components/Icon.vue')
+import Vue from 'vue'
+import Demo from './Demo.vue'
+import Icon from '../src/components/Icon.vue'
 
 Vue.component('icon', Icon)
 
@@ -13,8 +13,9 @@ Icon.register({
 })
 
 new Vue({
-  el: 'body',
+  el: '#demo',
   components: {
     demo: Demo
-  }
+  },
+  render: h => h(Demo)
 })

demo/demo.js renamed to demo/index.js

@@ -1,33 +1,33 @@
 {
   "name": "vue-awesome",
-  "version": "0.3.1",
+  "version": "2.0.0",
   "description": "Font Awesome component for Vue.js, using inline SVG.",
   "main": "dist/vue-awesome.js",
   "scripts": {
-    "dev": "webpack-dev-server --inline --hot",
-    "build": "webpack -p"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "icons": "node build/icons.js"
   },
   "keywords": [
     "Font Awesome",
     "Vue.js"
   ],
   "author": "Justineo ([email protected])",
   "license": "MIT",
-  "devDependencies": {
-    "babel-core": "^6.7.2",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.6.0",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-runtime": "^6.6.1",
-    "css-loader": "^0.23.1",
-    "vue-hot-reload-api": "^1.3.2",
-    "vue-html-loader": "^1.2.0",
-    "vue-loader": "^8.2.1",
-    "vue-style-loader": "^1.0.0",
-    "webpack": "^1.12.14",
-    "webpack-dev-server": "^1.14.1"
-  },
   "dependencies": {
-    "vue": "^1.0.17"
+    "vue": "^2.0.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-preset-es2015": "^6.16.0",
+    "cross-env": "^3.1.1",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "vue-loader": "^9.5.1",
+    "webpack": "2.1.0-beta.22",
+    "webpack-dev-server": "^2.1.0-beta.8",
+    "webpack-merge": "^0.14.1"
   }
 }