Как использовать слои с React-fontawesome

Поскольку в настоящее время я использую GatsbyJS для сборки, я решил, что react-fontawesome встряхну. В старых проектах React я использовал CDN и fontawesome v4 в то время со стеками, чтобы добиться помещения одного значка внутри другого и реализовано в документах, теперь слои используются в v5.

Однако в react-fontawesome нет ничего, что позволяло бы использовать слои в компоненте FontAwesomeIcon.

Я действительно не могу вернуться к CDN, так как static.html (содержащий заголовок) в GatsbyJS обновляется каждый раз и стирается всякий раз, когда он перезагружается. Точно так же нежелательно вручную импортировать файлы с потрясающими шрифтами в файл 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>

Это короткий фрагмент, показывающий, как бы выглядел желаемый результат при регулярном использовании font awesome v4 с CDN (нереагирующая версия).

<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>


reactjs gatsby font-awesome
person MarceDev    schedule 06.01.2018    source источник
comment
Каков твой вопрос?   -  person chmac    schedule 19.02.2018

Ответы (1)


arrow_upward
26
arrow_downward

Вы можете реализовать это, используя классы css в элементе упаковки следующим образом:

<span className="fa-layers fa-fw">
  <FontAwesomeIcon icon={faChevronDown} size='lg' />
  <FontAwesomeIcon icon={faCircle} size='lg' />
</span>
person alykoshin    schedule 04.03.2018
comment
Вы можете установить размер в диапазоне вместо значков, чтобы иметь более согласованный размер. Кроме того, вы можете уменьшить передний значок: ‹span className = fa-Layers fa-fw fa-2x› ‹FontAwesomeIcon icon = {faCircle} /› ‹FontAwesomeIcon icon = {faChevronDown} transform = {'shrink-6'} /> - person Jose; 16.11.2020