如何使用 react-fontawesome 的图层

Question

因为我目前正在使用 GatsbyJS 进行构建，所以我想我会试一试 react-fontawesome。在旧的 React 项目中，我当时使用 CDN 和 fontawesome v4 以及堆栈来实现将一个图标放入另一个图标并在文档中实现，现在层在 v5 中使用。

但是，react-fontawesome 中似乎没有任何内容允许您在 FontAwesomeIcon 组件中使用图层。

我真的不能回到 CDN，因为 GatsbyJS 中的 static.html（包含头部）每次都会刷新，并且在重新加载时会被擦除。同样，手动将字体真棒文件导入我正在使用的 JS 文件也是不受欢迎的。

这是显示我当前拥有的内容的片段（显然是图标并排放置，而不是一个嵌入另一个）。

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>

这是一个简短的片段，展示了使用 CDN（非 React 版本）定期使用 font awesome v4 时预期的结果

<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

您可以在包装元素中使用 css 类实现它，如下所示：

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

如何使用 react-fontawesome 的图层

How to use layers with react-fontawesome

font-awesome

reactjs

gatsby