forwarding ref to Svg component

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015", "react", "stage-3"]
+  "presets": ["env", "react", "stage-3"]
 }

.prettierignore

@@ -0,0 +1 @@
+/index.*

UPGRADING.md

@@ -0,0 +1,115 @@
+# Upgrading Guide
+
+See the [CHANGELOG.md](./CHANGELOG.md) for detailed information about what has changed between versions.
+
+This guide is useful to figure out what you need to do between breaking changes.
+
+As always, [submit issues](https://github.com/FortAwesome/react-fontawesome/issues/new) that you run into with this guide or with these upgrades to us.
+
+## 0.0.x to 0.1.0
+
+### Renamed packages
+
+The following packages have been renamed as part of 5.1.0 of Font Awesome.
+
+_All packages are in the [@fortawesome NPM scope](https://www.npmjs.com/search?q=scope:fortawesome&page=1&ranking=optimal)_
+
+| Old package(1)           | New package            |
+| ------------------------ | ---------------------- |
+| fontawesome              | fontawesome-svg-core   |
+| fontawesome-free-solid   | free-solid-svg-icons   |
+| fontawesome-free-regular | free-regular-svg-icons |
+| fontawesome-free-brands  | free-brands-svg-icons  |
+| fontawesome-pro-solid    | pro-solid-svg-icons    |
+| fontawesome-pro-regular  | pro-regular-svg-icons  |
+| fontawesome-pro-light    | pro-light-svg-icons    |
+
+(1) Old packages have now been deprecated. They are still available but will only receive high priority patch release fixes.
+
+**You'll need to update your package.json file with the renamed packages and new versions.**
+
+### No more default imports
+
+Recently we spent a good deal of time supporting TypeScript to enable us to
+create the Angular Font Awesome component. During that adventure we
+[were](https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html)
+[convinced](https://blog.neufund.org/why-we-have-banned-default-exports-and-you-should-do-the-same-d51fdc2cf2ad)
+that we were going to remove default exports from all of our components,
+libraries, and packages. This is complete with the umbrella release of `5.1.0` of Font Awesome.
+
+What does that mean?
+
+~~Old way:~~
+
+```javascript
+import fontawesome from '@fontawesome/fontawesome'
+import solid from '@fortawesome/fontawesome-free-solid'
+import faTwitter from '@fortawesome/fontawesome-free-brands/faTwitter'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+
+import fontaweome.library.add(solid, faTwitter)
+```
+
+New way:
+
+```javascript
+import { library } from '@fontawesome/fontawesome-svg-core'
+import { fas } from '@fortawesome/fontawesome-free-solid'
+import { faTwitter } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import library.add(fas, faTwitter)
+```
+
+This is also a valid way to import icons that works if your tool does not support tree shaking:
+
+```javascript
+import { faTwitter } from '@fortawesome/free-brands-svg-icons/faTwitter'
+```
+
+### Improved support for tree shaking
+
+Tree shaking is now functional by default and no additional configuration is required to make it work.
+
+The `shakable.es.js` module has been removed and is no longer needed.
+
+If you've previously configured tree shaking by modifying your webpack or rollup you can safely remove these.
+
+**We recommend that you check your bundle size after upgrading an ensure that file sizes are as you would expect.**
+
+```javascript
+module.exports = {
+  // ...
+  resolve: {
+    alias: {
+      '@fortawesome/fontawesome-free-solid$':
+        '@fortawesome/fontawesome-free-solid/shakable.es.js'
+    }
+  }
+}
+```
+
+```javascript
+const alias = require('rollup-plugin-alias')
+
+rollup({
+  // ...
+  plugins: [
+    alias({
+      '@fortawesome/fontawesome-free-solid':
+        'node_modules/@fortawesome/fontawesome-free-solid/shakable.es.js'
+    })
+  ]
+})
+```
+
+### Mixed modes with automatic replacement of `<i>` tags to `<svg>`
+
+If you were previously relying on Font Awesome to replace any `<i>` tags in
+your page or app with `<svg>` you'll need to explicitly control that now.
+
+```javascript
+import { watch } from '@fortawesome/fontawesome-svg-core'
+
+watch() // This will kick of the replacement of i tags and configure a MutationObserver
+```

examples/create-react-app-typescript/README.md

@@ -0,0 +1,8 @@
+This project was bootstrapped with [TypeScript React Starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
+
+```
+yarn install
+yarn start
+```
+
+NOTE: `yarn test` doesn't seem to be working right now.

examples/create-react-app-typescript/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "typescript",
+  "version": "0.1.1",
+  "private": true,
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.0-7",
+    "@fortawesome/free-brands-svg-icons": "5.1.0-4",
+    "@fortawesome/free-solid-svg-icons": "^5.1.0-4",
+    "@fortawesome/react-fontawesome": "^0.1.0-6",
+    "prop-types": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-scripts-ts": "2.8.0"
+  },
+  "scripts": {
+    "start": "react-scripts-ts start",
+    "build": "react-scripts-ts build",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject"
+  },
+  "devDependencies": {
+    "@types/jest": "^21.1.9",
+    "@types/node": "^8.5.2",
+    "@types/prop-types": "^15.5.2",
+    "@types/react": "^16.0.31",
+    "@types/react-dom": "^16.0.3"
+  }
+}

examples/library/public/index.html → examples/create-react-app-typescript/public/index.html

@@ -10,6 +10,7 @@
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link href="https://static.fontawesome.com/css/fontawesome-app.css" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -19,9 +20,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Library Example</title>
+    <title>React App</title>
   </head>
   <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

examples/external/public/manifest.json → examples/create-react-app-typescript/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "External Example",
-  "name": "External usage of React component",
+  "short_name": "React App",
+  "name": "Create React App Sample",
   "icons": [
     {
       "src": "favicon.ico",

examples/create-react-app-typescript/src/App.test.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import App from './App'
+
+it('renders without crashing', () => {
+  const div = document.createElement('div')
+  ReactDOM.render(<App />, div)
+})

examples/create-react-app-typescript/src/App.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+
+// Importing types from the API library along with other exports
+import {
+  IconLookup,
+  IconDefinition,
+  findIconDefinition,
+  library
+} from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { fab } from '@fortawesome/free-brands-svg-icons'
+import {
+  faCoffee,
+  faCog,
+  faSpinner,
+  faQuoteLeft,
+  faSquare,
+  faCheckSquare
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  fab,
+  faCoffee,
+  faCog,
+  faSpinner,
+  faQuoteLeft,
+  faSquare,
+  faCheckSquare
+)
+
+// We're only adding faCoffee to the library so we can look it up.
+// And we're only doing that to demonstrate how the API types might be used.
+// This is not a realistic scenario. You wouldn't normally do things in such a round about way.
+// It's really just to demonstrate use of the types.
+library.add(faCoffee)
+const coffeeLookup: IconLookup = { prefix: 'fas', iconName: 'coffee' }
+const coffeeIconDefinition: IconDefinition = findIconDefinition(coffeeLookup)
+
+export class App extends React.Component {
+  render() {
+    return (
+      <div id="app">
+        <main className="w-100 min-vh-100 bg-gray8 white sans-serif pa6 flex flex-column justify-center items-center">
+          <div className="mw8 center overflow-hidden">
+            <h2 className="tc ttu tracked3 b f2 mt0 mb2 teal0 o-30">
+              react-fontawesome (TypeScript edition)
+            </h2>
+
+            <ul className="list ma0 pa0 flex flex-row flex-wrap teal4">
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon icon={['fab', 'font-awesome']} size="4x" />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon icon={coffeeIconDefinition} size="4x" />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon
+                  icon={['fas', 'cog']}
+                  spin
+                  fixedWidth={false}
+                  size="4x"
+                />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon
+                  icon={['fas', 'spinner']}
+                  pulse
+                  fixedWidth
+                  size="4x"
+                />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon
+                  icon={['fab', 'fort-awesome']}
+                  rotation={90}
+                  size="4x"
+                />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon
+                  icon={['fab', 'internet-explorer']}
+                  flip="both"
+                  size="4x"
+                />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon
+                  icon={['fab', 'fort-awesome']}
+                  inverse
+                  size="4x"
+                />
+              </li>
+              <li className="pv3 ph2 ma0 link grow">
+                <FontAwesomeIcon
+                  icon={['fab', 'font-awesome']}
+                  size="4x"
+                  transform="left-1 rotate-15"
+                />
+              </li>
+            </ul>
+          </div>
+        </main>
+      </div>
+    )
+  }
+}
+
+export default App

examples/create-react-app-typescript/src/index.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import App from './App'
+import registerServiceWorker from './registerServiceWorker'
+import './index.css'
+
+ReactDOM.render(<App />, document.getElementById('root') as HTMLElement)
+registerServiceWorker()