@fortawesome/vue-fontawesome 3.0.0-3 → 3.0.0

package/CHANGELOG.md

@@ -5,6 +5,37 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ---
 
+## [3.0.0](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0) - 2022-06-07
+
+### Added
+
+*  New animations for bounce and shake
+*  Feature to call icons using a string format
+
+### Fixed
+
+*  Animations for beat, fade, beat-fade, flash, spin-pulse, and spin-reverse
+*  Tee-shirt sizes to include 2xs, lg, xl, and 2xl
+*  Flip animation when used by itself
+
+---
+
+## [3.0.0-5](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-5) - 2021-10-18
+
+### Fixed
+
+* Include 1.3.0-beta versions in peer dependencies
+
+---
+
+## [3.0.0-4](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-4) - 2021-05-23
+
+### Fixed
+
+* Fix reactivity #297
+
+---
+
 ## [3.0.0-3](https://github.com/FortAwesome/vue-fontawesome/releases/tag/3.0.0-3) - 2020-12-09
 
 ### Fixed

package/README.md

@@ -21,7 +21,6 @@
 <!-- toc -->
 
 - [Introduction](#introduction)
-  * [CodeSandbox Starter Sample 🚀](#codesandbox-starter-sample-%F0%9F%9A%80)
   * [Upgrading Font Awesome?](#upgrading-font-awesome)
   * [Get started](#get-started)
   * [Learn about our new SVG implementation](#learn-about-our-new-svg-implementation)
@@ -69,10 +68,6 @@
 
 Hey there! We're glad you're here...
 
-### CodeSandbox Starter Sample 🚀
-
-Here's a [CodeSandbox Starter Sample](https://codesandbox.io/s/github/FortAwesome/vue-fontawesome/tree/master/examples/vue-cli-webpack) on how to display Solid, Regular, and Brand icons [using the Icon Library](https://github.com/FortAwesome/vue-fontawesome#usage).
-
 ### Upgrading Font Awesome?
 
 If you've used Font Awesome in the past (version 4 or older) there are some
@@ -109,17 +104,15 @@ $ yarn add @fortawesome/fontawesome-svg-core
 $ yarn add @fortawesome/free-solid-svg-icons
 ```
 
-**Using Vue 2.x**
+**Install this Vue component**
 
 ```
-$ npm i --save @fortawesome/vue-fontawesome@latest
+$ npm i --save @fortawesome/vue-fontawesome@prerelease
 ```
 
-**Using Vue 3.x**
+The `prerelease` tag is compatible with Vue 3 but not Vue 2.
 
-```
-$ npm i --save @fortawesome/vue-fontawesome@prerelease
-```
+If you are still using Vue 2.x you can [read about usage here](https://github.com/FortAwesome/vue-fontawesome/tree/2.x).
 
 ## Add more styles or Pro icons
 
@@ -148,27 +141,23 @@ $ npm i --save @fortawesome/pro-duotone-svg-icons
 
 The following examples are based on a project configured with [vue-cli](https://github.com/vuejs/vue-cli).
 
+**Registering the component**
+
 `src/main.js`
 
 ```javascript
-import Vue from 'vue'
-import App from './App'
+import { createApp } from 'vue'
+import App from './App.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faUserSecret } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(faUserSecret)
 
-Vue.component('font-awesome-icon', FontAwesomeIcon)
-
-Vue.config.productionTip = false
 
-/* eslint-disable no-new */
-new Vue({
-  el: '#app',
-  components: { App },
-  template: '<App/>'
-})
+createApp(App)
+.component('font-awesome-icon', FontAwesomeIcon)
+.mount('#app')
 ```
 
 `src/App.vue`
@@ -225,7 +214,7 @@ Using the Pro packages requires [additional configuration](https://fontawesome.c
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-# Note we are using the Pro style here
+// Note we are using the Pro style here
 import { faUserSecret } from '@fortawesome/pro-regular-svg-icons'
 
 library.add(faUserSecret)
@@ -239,7 +228,7 @@ library.add(faUserSecret)
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-# Note we are using the Pro style here
+// Note we are using the Pro style here
 import { faUserSecret } from '@fortawesome/pro-light-svg-icons'
 
 library.add(faUserSecret)
@@ -253,7 +242,7 @@ library.add(faUserSecret)
 
 ```javascript
 import { library } from '@fortawesome/fontawesome-svg-core'
-# Note we are using the Pro style here
+// Note we are using the Pro style here
 import { faUserSecret } from '@fortawesome/pro-duotone-svg-icons'
 
 library.add(faUserSecret)
@@ -309,8 +298,8 @@ The `icon` property of the `FontAwesomeIcon` component can be used in the follow
 <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
+<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` and `align-left` icon to the library.
@@ -326,7 +315,7 @@ 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'
+<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)
@@ -857,6 +846,7 @@ being awesome contributors to this project. **We'd like to take a moment to reco
 | <img src="https://github.com/tyranteon.png?size=72" />       | Tyranteon       | [@tyranteon](https://github.com/tyranteon)             |
 | <img src="https://github.com/rigma.png?size=72" />           | Romain Failla   | [@rigma](https://github.com/rigma)                     |
 | <img src="https://github.com/viniciuslrangel.png?size=72" /> | Vinicius Rangel | [@viniciuslrangel](https://github.com/viniciuslrangel) |
+| <img src="https://github.com/otijhuis.png?size=72" />        | Okke Tijhuis    | [@otijhuis](https://github.com/otijhuis)               |
 
 If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.
 

package/index.d.ts

@@ -3,7 +3,7 @@ import { ComponentPublicInstance } from 'vue'
 interface FontAwesomeIconProps {
   border: boolean
   fixedWidth: boolean
-  flip: 'horizontal' | 'vertical' | 'both' | null
+  flip: boolean | 'horizontal' | 'vertical' | 'both'
   icon: object | Array<string> | string
   mask: object | Array<string> | string | null
   listItem: boolean