@fortawesome/vue-fontawesome 0.1.6 → 0.1.10

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,24 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Reproducible test case**
+Include a URL (codepen.io, jsfiddle.net, Git repository, codesandbox.io, stackblitz.com, etc.) that demonstrates the problem.
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Desktop (please complete the following information):**
+ - Browser [e.g. chrome, safari]
+ - Version
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/workflows/ci.yml

@@ -0,0 +1,29 @@
+name: CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [8.x, 10.x, 12.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: install, build, and test
+      run: |
+        npm install
+        npm run build
+        npm run test
+      env:
+        CI: true
+    - name: dist
+      run: |
+        npm run dist

package/.tool-versions

@@ -0,0 +1,2 @@
+nodejs 10.16.2
+python 3.7.5

package/CHANGELOG.md

@@ -5,6 +5,35 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [0.1.10](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.10)  - 2020-06-15
+
+### Fixed
+* Add TSX support to Typescript definition
+
+---
+
+## [0.1.9](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.9)  - 2019-12-13
+
+### Added
+* Counters support for the FontAwesomeLayersText component #174
+* FontAwesomeIcon now supports the "inverse" property #174
+
+---
+
+## [0.1.8](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.8)  - 2019-11-03
+
+### Fixed
+* Removed declare namespace in the TypeScript definition file #177
+
+---
+
+## [0.1.7](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.7)  - 2019-08-31
+
+### Added
+* Duotone icon support
+
+---
+
 ## [0.1.6](https://github.com/FortAwesome/vue-fontawesome/releases/tag/0.1.6)  - 2019-03-18
 
 ### Changed

package/DEVELOPMENT.md

@@ -17,6 +17,8 @@ test        | Execute unit tests
 1. Update `README.md` and `package.json`; adding any contributors
 1. Update the `CHANGELOG.md`
 1. `npm publish`
+1. `npm pack`
+1. `CLOUDSMITH_API_KEY=API_TOKEN cloudsmith upload npm fortawesome/fontawesome-pro ./fortawesome-vue-fontawesome-VERSION.tgz`
 1. `git add index.js index.es.js`
 1. `git commit -a -m 'Release VERSION'`
 1. `git push`

package/README.md

@@ -5,7 +5,7 @@
 # vue-fontawesome
 
 [![npm](https://img.shields.io/npm/v/@fortawesome/vue-fontawesome.svg?style=flat-square)](https://www.npmjs.com/package/@fortawesome/vue-fontawesome)
-[![Travis-CI](https://img.shields.io/travis/FortAwesome/vue-fontawesome/master.svg)](https://travis-ci.org/FortAwesome/vue-fontawesome)
+[![GitHub Actions Status](https://github.com/FortAwesome/vue-fontawesome/workflows/CI/badge.svg)](https://github.com/FortAwesome/vue-fontawesome/actions)
 
 > Font Awesome 5 Vue component using SVG with JS
 
@@ -21,6 +21,11 @@
 - [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
 - [Usage](#usage)
   * [Recommended](#recommended)
+    + [Using Solid icons](#using-solid-icons)
+    + [Using Brand icons](#using-brand-icons)
+    + [Using Regular icons](#using-regular-icons)
+    + [Using Light icons](#using-light-icons)
+    + [Using Duotone icons](#using-duotone-icons)
     + [Quick warning about self-closing tags](#quick-warning-about-self-closing-tags)
     + [Processing i tags into svg using Font Awesome](#processing-i-tags-into-svg-using-font-awesome)
   * [The icon property](#the-icon-property)
@@ -39,6 +44,7 @@
   * [Advanced](#advanced)
 - [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)
   * [Nuxt.js](#nuxtjs)
+  * [PurgeCSS](#purgecss)
   * [Web Components with vue-web-component-wrapper](#web-components-with-vue-web-component-wrapper)
 - [FAQ](#faq)
   * [Why so explicit (the :icon="['far', 'coffee']" syntax)?](#why-so-explicit-the-iconfar-coffee-syntax)
@@ -106,15 +112,16 @@ $ npm i --save @fortawesome/free-brands-svg-icons
 $ npm i --save @fortawesome/free-regular-svg-icons
 ```
 
-If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages.
+If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages after these [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers) are made.
 
 ```
 $ npm i --save @fortawesome/pro-solid-svg-icons
 $ npm i --save @fortawesome/pro-regular-svg-icons
 $ npm i --save @fortawesome/pro-light-svg-icons
+$ npm i --save @fortawesome/pro-duotone-svg-icons
 ```
 
-Using the Pro packages requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).
+**Duotone icons are currently in pre-release and are coming soon to this component.**
 
 Or with Yarn:
 
@@ -169,6 +176,86 @@ export default {
 </script>
 ```
 
+#### Using Solid icons
+
+```javascript
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faUserSecret)
+```
+
+```html
+<!-- The solid style is implicit -->
+<font-awesome-icon icon="user-secret" />
+
+<!-- It's better to be explicit -->
+<!-- Don't forget to bind the property with ":" (we forget all the time!) -->
+<font-awesome-icon :icon="['fas', 'user-secret']" />
+```
+
+#### Using Brand icons
+
+```javascript
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFontAwesome } from '@fortawesome/free-brands-svg-icons'
+
+library.add(faFontAwesome)
+```
+
+```html
+<!-- Don't forget to bind the property with ":" (we forget all the time!) -->
+<font-awesome-icon :icon="['fab', 'font-awesome']" />
+```
+
+#### Using Regular icons
+
+Using the Pro packages requires [additional configuration](https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers).
+
+```javascript
+import { library } from '@fortawesome/fontawesome-svg-core'
+# Note we are using the Pro style here
+import { faUserSecret } from '@fortawesome/pro-regular-svg-icons'
+
+library.add(faUserSecret)
+```
+
+```html
+<font-awesome-icon :icon="['far', 'user-secret']" />
+```
+
+#### Using Light icons
+
+```javascript
+import { library } from '@fortawesome/fontawesome-svg-core'
+# Note we are using the Pro style here
+import { faUserSecret } from '@fortawesome/pro-light-svg-icons'
+
+library.add(faUserSecret)
+```
+
+```html
+<font-awesome-icon :icon="['fal', 'user-secret']" />
+```
+
+#### Using Duotone icons
+
+```javascript
+import { library } from '@fortawesome/fontawesome-svg-core'
+# Note we are using the Pro style here
+import { faUserSecret } from '@fortawesome/pro-duotone-svg-icons'
+
+library.add(faUserSecret)
+```
+
+```html
+<font-awesome-icon :icon="['fad', 'user-secret']" />
+```
+
+You can also [import the same icon from different
+styles](#import-the-same-icon-from-different-styles) with some help from ES
+`import`.
+
 #### Quick warning about self-closing tags
 
 If you are using inline templates or HTML as templates you need to be careful to avoid self-closing tags.
@@ -251,7 +338,7 @@ library.add(faSpinner)
 ```javascript
 <template>
   <div id="app">
-    <font-awesome-icon icon="appIcon" />
+    <font-awesome-icon :icon="appIcon" />
   </div>
 </template>
 
@@ -324,8 +411,16 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCoffee as fasCoffee } from '@fortawesome/pro-solid-svg-icons'
 import { faCoffee as farCoffee } from '@fortawesome/pro-regular-svg-icons'
 import { faCoffee as falCoffee } from '@fortawesome/pro-light-svg-icons'
+import { faCoffee as fadCoffee } from '@fortawesome/pro-duotone-svg-icons'
+
+library.add(fasCoffee, farCoffee, falCoffee, fadCoffee)
+```
 
-library.add(fasCoffee, farCoffee, falCoffee)
+```html
+<font-awesome-icon :icon="['fas', 'coffee']"/>
+<font-awesome-icon :icon="['far', 'coffee']"/>
+<font-awesome-icon :icon="['fal', 'coffee']"/>
+<font-awesome-icon :icon="['fad', 'coffee']"/>
 ```
 
 #### Import entire styles
@@ -371,7 +466,7 @@ A good place to do this is in `main.js` or in the module you are calling `new
 Vue()`. **Make sure you register the component** and **have added icons to your
 library** before you bootstrap your Vue application.
 
-```
+```javascript
 import Vue from 'vue'
 import { FontAwesomeIcon, FontAwesomeLayers, FontAwesomeLayersText } from '@fortawesome/vue-fontawesome'
 
@@ -432,6 +527,18 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 <font-awesome-icon icon="spinner" pull="right" />
 ```
 
+[Inverse](https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons):
+
+```html
+<font-awesome-icon icon="spinner" inverse />
+```
+
+[Swap opacity](https://fontawesome.com/how-to-use/on-the-web/styling/duotone-icons#swapping-layers):
+
+```html
+<font-awesome-icon :icon="['fad', 'spinner']" swap-opacity />
+```
+
 ### Advanced
 
 [Power Transforms]((https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms)):
@@ -472,6 +579,15 @@ Spin and pulse [animation](https://fontawesome.com/how-to-use/on-the-web/styling
 </font-awesome-layers>
 ```
 
+[Counters](https://fontawesome.com/how-to-use/on-the-web/styling/layering):
+
+```html
+<font-awesome-layers full-width class="fa-4x">
+  <font-awesome-icon icon="envelope"/>
+  <font-awesome-layers-text counter value="1" position="top-right" />
+</font-awesome-layers>
+```
+
 ## Integrating with other tools and frameworks
 
 ### Nuxt.js
@@ -515,6 +631,18 @@ plugins: [
 ]
 ```
 
+### PurgeCSS
+
+If you use PurgeCSS, or use the nuxt.js tailwindcss module which comes with PurgeCSS prebundled, you need to add fontawesome css classes to the whitelist, as the classes only gets inserted on rendering, and PurgeCSS will treat them as unused and remove them otherwise.
+
+In your `nuxt.config.js`, add a purgeCSS config object. You may adjust the regex to your liking:
+
+```javascript
+purgeCSS: {
+  whitelistPatterns: [/svg.*/, /fa.*/]
+},
+```
+
 ### Web Components with vue-web-component-wrapper
 
 The Vue [project provides a wrapper](https://github.com/vuejs/vue-web-component-wrapper)
@@ -707,12 +835,15 @@ The following contributors have either hepled to start this project, have contri
 code, are actively maintaining it (including documentation), or in other ways
 being awesome contributors to this project. **We'd like to take a moment to recognize them.**
 
-|                                                            | Name           | GitHub                                             |
-| :--------------------------------------------------------: | -------------- | -------------------------------------------------- |
-| <img src="https://github.com/SirLamer.png?size=72" />      | SirLamer       | [@SirLamer](https://github.com/SirLamer)           |
-| <img src="https://github.com/meteorlxy.png?size=72" />     | Liu Xinyu      | [@meteorlxy](https://github.com/meteorlxy)         |
-| <img src="https://github.com/schulz3000.png?size=72" />    | Xaver Schulz   | [@schulz3000](https://github.com/schulz3000)       |
-| <img src="https://github.com/ihmels.png?size=72" />        | Yannick Ihmels | [@ihmels](https://github.com/ihmels)               |
+|                                                             | Name           | GitHub                                               |
+| :--------------------------------------------------------:  | -------------- | ---------------------------------------------------- |
+| <img src="https://github.com/SirLamer.png?size=72" />       | SirLamer       | [@SirLamer](https://github.com/SirLamer)             |
+| <img src="https://github.com/meteorlxy.png?size=72" />      | Liu Xinyu      | [@meteorlxy](https://github.com/meteorlxy)           |
+| <img src="https://github.com/schulz3000.png?size=72" />     | Xaver Schulz   | [@schulz3000](https://github.com/schulz3000)         |
+| <img src="https://github.com/ihmels.png?size=72" />         | Yannick Ihmels | [@ihmels](https://github.com/ihmels)                 |
+| <img src="https://github.com/btaens.png?size=72" />         | btaens         | [@btaens](https://github.com/btaens)                 |
+| <img src="https://github.com/david-driscoll.png?size=72" /> | David Driscoll | [@david-driscoll](https://github.com/david-driscoll) |
+| <img src="https://github.com/tyranteon.png?size=72" />      | Tyranteon      | [@tyranteon](https://github.com/tyranteon)           |
 
 If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.