title: How to use layers with react-fontawesome
body: <p>Since I am currently using GatsbyJS to build with I figured I'd give <code>react-fontawesome</code> a whirl. In old react projects I'd used a CDN and fontawesome v4 at the time with stacks to achieve putting one icon inside another and realized in the docs now layers are used in v5.</p>
  
  <p>However, there does not seem to be anything in <code>react-fontawesome</code> that allows you to use layers in the FontAwesomeIcon component.</p>
  
  <p>I can't really go back to a CDN since the static.html (which contains the head) in GatsbyJS gets refreshed every time and will get wiped whenever it's reloaded. Similarly, manually importing font awesome files into the JS file I'm using is undesired.</p>
  
  <p>Here's a snippet showing what I currently have (obviously the icons and side by side and not one inside another).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import FontAwesomeIcon from '@fortawesome/react-fontawesome'
  import { faChevronDown } from '@fortawesome/fontawesome-free-solid'
  import { faCircle } from '@fortawesome/fontawesome-free-regular'
  
  const IndexPage = () =&gt; (
      &lt;div&gt;
          &lt;FontAwesomeIcon icon={faChevronDown} size='lg' /&gt;
          &lt;FontAwesomeIcon icon={faCircle} size='lg' /&gt;
      &lt;/div&gt;
  )
  
  export default IndexPage</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is a short snippet showing what the desired result would have looked like using font awesome v4 regularly with a CDN (non react version)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span className="fa-stack fa-lg"&gt;
      &lt;i className="fa fa-circle-thin fa-stack-2x icon-background" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;i className="fa fa-chevron-down fa-stack-1x" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>