@fortawesome/vue-fontawesome 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -5,6 +5,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [0.1.2](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.2)  - 2018-10-29
+
+### Added
+* Adding ES module to package
+
+---
+
 ## [0.1.1](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.1)  - 2018-07-16
 
 ### Fixed

package/DEVELOPMENT.md

@@ -16,7 +16,8 @@ test        | Execute unit tests
 1. Update `package.json` and change `version`
 1. Update `README.md` and add any contributors
 1. Update the `CHANGELOG.md`
-1. `npm run dist`
+1. `npm publish`
+1. `git add index.js index.es.js`
 1. `git commit -a -m 'Release VERSION'`
 1. `git push`
 1. Create a [new release](https://github.com/FortAwesome/vue-fontawesome/releases/new) with CHANGELOG details

package/README.md

@@ -35,6 +35,8 @@
   * [Register your components first](#register-your-components-first)
   * [Basic](#basic)
   * [Advanced](#advanced)
+- [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)
+  * [Nuxt.js](#nuxtjs)
 - [FAQ](#faq)
   * [Why so explicit (the :icon="['far', 'coffee']" syntax)?](#why-so-explicit-the-iconfar-coffee-syntax)
     + [How about a separate property for the prefix?](#how-about-a-separate-property-for-the-prefix)
@@ -127,10 +129,10 @@ The following examples are based on a project configured with [vue-cli](https://
 import Vue from 'vue'
 import App from './App'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCoffee } from '@fortawesome/free-solid-svg-icons'
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faCoffee)
+library.add(faUserSecret)
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
@@ -149,7 +151,7 @@ new Vue({
 ```javascript
 <template>
   <div id="app">
-    <font-awesome-icon icon="coffee" />
+    <font-awesome-icon icon="user-secret" />
   </div>
 </template>
 
@@ -200,16 +202,26 @@ The `icon` property of the `FontAwesomeIcon` component can be used in the follow
 
 ```javascript
 <font-awesome-icon icon="spinner" />
+<font-awesome-icon icon="align-left" />
+
 <font-awesome-icon :icon="['fas', 'spinner']" /> # Same as above
+<font-awesome-icon :icon="['fas', 'align-left']" /> # Same as above
 ```
 
-For the above to work you must add the `spinner` icon to the library.
+For the above to work you must add the `spinner` and `align-left` icon to the library.
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { faSpinner, faAlignLeft } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faSpinner)
+library.add(faSpinner, faAlignLeft)
+```
+
+In the event that you are using an icon with a multi-word name please note that
+you would need to pass in the icon name using _kebab-case_ as opposed to _camelCase_.
+
+```javascript
+<font-awesome-icon icon="address-card" />  # import { faAddressCard } from '@fortawesome/free-solid-svg-icons'
 ```
 
 #### Explicit prefix (note the Vue bind shorthand because this uses an array)
@@ -343,7 +355,7 @@ library** before you bootstrap your Vue application.
 
 ```
 import Vue from 'vue'
-import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from 'vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
@@ -429,7 +441,7 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 ```html
 <font-awesome-layers class="fa-lg">
   <font-awesome-icon icon="circle" />
-  <font-awesome-icon icon="check" transform="shrink-6" style="color: white;" />
+  <font-awesome-icon icon="check" transform="shrink-6" :style="{ color: 'white' }" />
 </font-awesome-layers>
 ```
 
@@ -442,6 +454,49 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 </font-awesome-layers>
 ```
 
+## Integrating with other tools and frameworks
+
+### Nuxt.js
+
+Install `@fortawesome/vue-fontawesome` and `@fortawesome/fontawesome-svg-core` and any icon packages.
+
+```
+npm install --save @fortawesome/vue-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
+```
+
+Inside your Nuxt.js project add a `plugins/fontawesome.js` file.
+
+```javascript
+import Vue from 'vue'
+import { library, config } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { fas } from '@fortawesome/free-solid-svg-icons'
+
+// This is important, we are going to let Nuxt.js worry about the CSS
+config.autoAddCss = false
+
+// You can add your icons directly in this plugin. See other examples for how you
+// can add other styles or just individual icons.
+library.add(fas)
+
+// Register the component globally
+Vue.component('font-awesome-icon', FontAwesomeIcon)
+```
+
+Modify `nuxt.config.js` adding to the `css` and `plugins` sections.
+
+```javascript
+css: [
+  '@fortawesome/fontawesome-svg-core/styles.css'
+]
+```
+
+```javascript
+plugins: [
+  '~/plugins/fontawesome.js'
+]
+```
+
 ## FAQ
 
 ### Why so explicit (the :icon="['far', 'coffee']" syntax)?

package/UPGRADING.md

@@ -47,18 +47,18 @@ import solid from '@fortawesome/fontawesome-free-solid'
 import faTwitter from '@fortawesome/fontawesome-free-brands/faTwitter'
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 
-import fontaweome.library.add(solid, faTwitter)
+fontawesome.library.add(solid, faTwitter)
 ```
 
 New way:
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { fas } from '@fortawesome/fontawesome-free-solid'
+import { fas } from '@fortawesome/free-solid-svg-icons'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-import library.add(fas, faTwitter)
+library.add(fas, faTwitter)
 ```
 
 This is also a valid way to import icons that works if your tool does not support tree shaking:

package/examples/vue-cli/package.json

@@ -10,26 +10,26 @@
     "build": "node build/build.js"
   },
   "dependencies": {
-    "vue": "^2.5.16"
+    "vue": "^2.5.17"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.0",
-    "@fortawesome/free-brands-svg-icons": "^5.1.0",
-    "@fortawesome/free-regular-svg-icons": "^5.1.0",
-    "@fortawesome/free-solid-svg-icons": "^5.1.0",
-    "@fortawesome/vue-fontawesome": "^0.1.0",
-    "ajv": "^6.5.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.6",
+    "@fortawesome/free-brands-svg-icons": "^5.4.1",
+    "@fortawesome/free-regular-svg-icons": "^5.4.1",
+    "@fortawesome/free-solid-svg-icons": "^5.4.1",
+    "@fortawesome/vue-fontawesome": "^0.1.1",
+    "ajv": "^6.5.4",
     "autoprefixer": "^7.1.2",
     "babel-core": "^6.26.3",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "^7.1.5",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.4.1",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.5.3",
     "css-loader": "^0.28.11",
     "extract-text-webpack-plugin": "^3.0.0",
     "file-loader": "^1.1.4",
@@ -38,22 +38,22 @@
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
+    "portfinder": "^1.0.17",
     "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.1.5",
+    "postcss-loader": "^2.1.6",
     "postcss-url": "^7.3.2",
     "rimraf": "^2.6.0",
-    "semver": "^5.3.0",
+    "semver": "^5.6.0",
     "shelljs": "^0.7.6",
-    "uglifyjs-webpack-plugin": "^1.2.5",
+    "uglifyjs-webpack-plugin": "^1.3.0",
     "url-loader": "^0.5.8",
-    "vue-loader": "^13.7.2",
+    "vue-loader": "^13.7.3",
     "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.16",
+    "vue-template-compiler": "^2.5.17",
     "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.13.1",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
+    "webpack-dev-server": "^2.11.3",
+    "webpack-merge": "^4.1.4"
   },
   "engines": {
     "node": ">= 6.0.0",

package/examples/vue-cli/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <main class="w-100 min-vh-100 bg-gray8 white sans-serif pa6 flex flex-column justify-center items-center">
       <div class="mw8 center overflow-hidden">
-        <h2 class="tc ttu tracked3 b f2 mt0 mb2 teal0 o-30">react-fontawesome</h2>
+        <h2 class="tc ttu tracked3 b f2 mt0 mb2 teal0 o-30">vue-fontawesome</h2>
 
         <ul class="list ma0 pa0 flex flex-row flex-wrap teal4">
           <li class="pv3 ph2 ma0 link grow">