@fortawesome/vue-fontawesome - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

CHANGELOG.md

@@ -8,2 +8,9 @@ # Change Log
 
+## [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
@@ -10,0 +17,0 @@

DEVELOPMENT.md

@@ -19,5 +19,6 @@ # Developing vue-fontawesome
 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

examples/vue-cli/package.json

@@ -13,15 +13,15 @@ {
   "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",
@@ -33,3 +33,3 @@ "babel-plugin-transform-runtime": "^6.22.0",
     "chalk": "^2.4.1",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.5.3",
     "css-loader": "^0.28.11",
@@ -43,18 +43,18 @@ "extract-text-webpack-plugin": "^3.0.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"
   },
@@ -61,0 +61,0 @@ "engines": {

package.json

 {
   "name": "@fortawesome/vue-fontawesome",
   "description": "Official Vue component for Font Awesome 5",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "index.js",
@@ -26,3 +26,6 @@ "module": "index.es.js",
   "lint-staged": {
-    "README.md": ["markdown-toc -i", "git add"]
+    "README.md": [
+      "markdown-toc -i",
+      "git add"
+    ]
   },
@@ -43,4 +46,4 @@ "peerDependencies": {
     "humps": "^2.0.1",
-    "husky": "^0.14.3",
-    "jest": "^22.4.3",
+    "husky": "^1.1.2",
+    "jest": "^23.6.0",
     "lint-staged": "^7.0.1",
@@ -47,0 +50,0 @@ "markdown-toc": "^1.2.0",

README.md

@@ -38,2 +38,4 @@ <a href="https://fontawesome.com">
   * [Advanced](#advanced)
+- [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)
+  * [Nuxt.js](#nuxtjs)
 - [FAQ](#faq)
@@ -131,6 +133,6 @@ * [Why so explicit (the :icon="['far', 'coffee']" syntax)?](#why-so-explicit-the-iconfar-coffee-syntax)
 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)
 
@@ -154,3 +156,3 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
   <div id="app">
-    <font-awesome-icon icon="coffee" />
+    <font-awesome-icon icon="user-secret" />
   </div>
@@ -206,14 +208,24 @@ </template>
 <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)
@@ -350,3 +362,3 @@
 import Vue from 'vue'
-import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from 'vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
 
@@ -437,3 +449,3 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
   <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>
@@ -451,2 +463,45 @@ ```
 
+## 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
@@ -453,0 +508,0 @@

UPGRADING.md

@@ -50,3 +50,3 @@ # Upgrading Guide
 
-import fontaweome.library.add(solid, faTwitter)
+fontawesome.library.add(solid, faTwitter)
 ```
@@ -58,7 +58,7 @@
 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)
 ```
@@ -65,0 +65,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317947

increased by22.55%

Lines of code

1949

increased by22.35%

Number of lines in readme file

652

increased by9.21%

No dependency changes