How to use layers with react-fontawesome

Question

Since I am currently using GatsbyJS to build with I figured I'd give react-fontawesome 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.

However, there does not seem to be anything in react-fontawesome that allows you to use layers in the FontAwesomeIcon component.

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.

Here's a snippet showing what I currently have (obviously the icons and side by side and not one inside another).

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 = () => (
    <div>
        <FontAwesomeIcon icon={faChevronDown} size='lg' />
        <FontAwesomeIcon icon={faCircle} size='lg' />
    </div>
)

export default IndexPage

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

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)

<span className="fa-stack fa-lg">
    <i className="fa fa-circle-thin fa-stack-2x icon-background" aria-hidden="true"></i>
    <i className="fa fa-chevron-down fa-stack-1x" aria-hidden="true"></i>
</span>

Answer 1

You can implement it using css classes in wrapping element like this:

<span className="fa-layers fa-fw">
  <FontAwesomeIcon icon={faChevronDown} size='lg' />
  <FontAwesomeIcon icon={faCircle} size='lg' />
</span>