@fortawesome/react-fontawesome - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

CHANGELOG.md

@@ -9,2 +9,10 @@ # Change Log
 
+## [0.1.8](https://github.com/FortAwesome/react-fontawesome/releases/tag/0.1.8) - 2019-12-06
+
+### Fixed
+
+- Add swapOpacity to Typescript definitions #308
+
+---
+
 ## [0.1.7](https://github.com/FortAwesome/react-fontawesome/releases/tag/0.1.7) - 2019-10-19
@@ -11,0 +19,0 @@

index.d.ts

@@ -43,2 +43,3 @@ /// <reference types="react" />
   title?: string;
-}
+  swapOpacity?: boolean;
+}

package.json

 {
   "name": "@fortawesome/react-fontawesome",
   "description": "Official React component for Font Awesome 5",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "index.js",
@@ -25,3 +25,3 @@ "module": "index.es.js",
     "Bill Parrott <github.com/chimericdream>",
-    "baelec <github.com/baelec>"
+    "Mike Lynch <github.com/baelec>"
   ],
@@ -28,0 +28,0 @@ "license": "MIT",

README.md

@@ -29,2 +29,4 @@ <a href="https://fontawesome.com">
   * [TypeScript](#typescript)
+- [Integrating with other tools and frameworks](#integrating-with-other-tools-and-frameworks)
+  * [Next.js](#nextjs)
 - [Frequent questions](#frequent-questions)
@@ -79,2 +81,6 @@ * [How do I import the same icon from two different styles?](#how-do-i-import-the-same-icon-from-two-different-styles)
 ```
+or
+```
+$ npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
+```
 
@@ -88,2 +94,6 @@ Or with Yarn:
 ```
+or
+```
+$ yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome
+```
 
@@ -537,2 +547,94 @@ ## Add more styles or Pro icons
 
+## Integrating with other tools and frameworks
+
+### Next.js
+
+Next.js projects will experience an icon that is very large when the page first
+loads. The reason this occurs is that the necessary CSS has not been loaded
+before the icon is displayed.
+
+To fix this we need to make sure the CSS for Font Awesome is bundled with the
+Next.js app.
+
+Install `@zeit/next-css`:
+
+```
+npm install --save-dev @zeit/next-css
+```
+
+You may want to use `--save` instead of `--save-dev` depending on how your `package.json` is organized.
+
+Create or edit `next.config.js` in the root of your project:
+
+```javascript
+const withCSS = require('@zeit/next-css')
+module.exports = withCSS({
+  /* config options here */
+})
+```
+
+Create or edit `./pages/_app.js`:
+
+```javascript
+import React from 'react'
+import App, { Container } from 'next/app'
+
+import { config } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css' // Import the CSS
+config.autoAddCss = false // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp
+```
+
+You may also wish to include your library calls in the `_app.js` code.
+
+```javascript
+import React from 'react'
+import App, { Container } from 'next/app'
+
+import { config, library } from '@fortawesome/fontawesome-svg-core'
+import '@fortawesome/fontawesome-svg-core/styles.css'
+config.autoAddCss = false
+
+import { faBars, faUser } from '@fortawesome/free-solid-svg-icons'
+import { faTwitter, faFacebook } from '@fortawesome/free-brands-svg-icons'
+
+library.add(faBars, faUser, faTwitter, faFacebook)
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp
+```
+
+You can also use [explicit import](#explicit-import) instead of using the `library`.
+
+Create a new page:
+
+```javascript
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faThumbsUp } from '@fortawesome/free-solid-svg-icons'
+
+const Index = () => (
+  <div>
+    <p>
+      <FontAwesomeIcon icon={faThumbsUp} /> Hello Next.js
+    </p>
+  </div>
+)
+
+export default Index
+```
+
 ## Frequent questions
@@ -582,3 +684,3 @@
 | <img src="https://github.com/chimericdream.png?size=72" /> | Bill Parrott   | [@chimericdream](https://github.com/chimericdream) |
-|    <img src="https://github.com/baelec.png?size=72" />     | baelec         | [@baelec](https://github.com/baelec)               |
+|    <img src="https://github.com/baelec.png?size=72" />     | Mike Lynch     | [@baelec](https://github.com/baelec)               |
 
@@ -585,0 +687,0 @@ If we've missed someone (which is quite likely) submit a Pull Request to us and we'll get it resolved.

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

Improved metrics

Total package byte prevSize

54471

increased by5.48%

Lines of code

636

increased by0.32%

Number of lines in readme file

696

increased by17.17%

No dependency changes