как масштабировать (большие) значки шрифтов из пакета react-icons

Я использую пакет реактивных значков marvelouse (http://gorangajic.github.io/react-icons/fa.html), в частности пакет font awesome.

Если бы это не было реакцией, то я бы просто добавил атрибут к тегу, например:

<i class="fa fa-camera-retro fa-5x"></i>

Однако, если я добавлю fa-5x в тег FaFolderOpen, это ничего не сделает. Как видите, я использую react-bootstrap и помещаю значок в кнопку (должен ли это быть блок)?

Я должен поверить, что об этом спрашивали раньше, но я не нашел его через поиск.

Вот как это выглядит, и я хочу, чтобы это было больше:

введите описание изображения здесь

const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

<Button type="button" bsStyle="success" block onClick={(e) => folderChooser(e)}>
     <FaFolderOpen />
</Button>

reactjs react-bootstrap font-awesome
person Dr.YSG    schedule 03.05.2017    source источник
comment
попробуйте это: <i className="fa fa-camera-retro fa-5x"></i> должно работать, потому что class является зарезервированным ключевым словом, поэтому для применения css class нам нужно использовать className.   -  person Mayank Shukla    schedule 03.05.2017
comment
Но объект JSX содержится в ‹FaFolderOpen/› То, что вы предлагаете, хорошо подходит для нереагирующих приложений.   -  person Dr.YSG    schedule 03.05.2017
comment
вы пытаетесь масштабировать его больше или меньше?   -  person John Ruddell    schedule 03.05.2017
comment
я хочу больше   -  person Dr.YSG    schedule 04.05.2017

Ответы (5)


arrow_upward
45
arrow_downward

если вам нужен размер значка 5x, вам нужно передать его классу реакции как size

// Font awesome pixel sizes relative to the multiplier. 
// 1x - 14px
// 2x - 28px
// 3x - 42px
// 4x - 56px
// 5x - 70px

<FaFolderOpen size={70} />

если вы заметите, что он подскакивает на 14 каждый раз

из readme github показывает, что все переопределено в строке. он отображает svg, поэтому вы не можете использовать 5x, вам нужно использовать размер в пикселях

person John Ruddell    schedule 03.05.2017

arrow_upward
19
arrow_downward

В реакции вы можете использовать size = 'with your preferred size which be from sm to lg or 1x to 10x'

это пример шрифта awesome 5 в реакции

<FontAwesomeIcon icon={faBars} size = '10x'/>
person solomon njobvu    schedule 08.12.2019

arrow_upward
1
arrow_downward

Если вам нужно стилизовать несколько значков одновременно, вы можете обернуть их в IconContext.Provider.

<IconContext.Provider value={{color: 'navy', size: 42}}>
   <FaFacebook />
   <FaGithub />
   <FaLinkedin />
</IconContext.Provider>
person Raimo Haikari    schedule 29.01.2021

arrow_upward
0
arrow_downward

Подход, который не очень явно исходит из документов (близких к @Raimo Хайкари):

App.jsx

import {IconContext} from "react-icons";
import { FaBeer } from 'react-icons/fa';
import './App.css'

class App extends component {

return (
  <div>
    <IconContext.Provider value={{ className="myReact-icons"}}>
      <FaBeer />
    </IconContext.Provider>
  </div>);  
}

App.css

.myreact-icons {
  color: red;
  height: 2em;
}
person Roman    schedule 13.03.2021

arrow_upward
-5
arrow_downward

Вы можете использовать это:

<FaFolderOpen size="4x" />
person Kanwar Pal Singh    schedule 04.09.2019