如何从 react-icons 包中缩放（大）字体真棒图标答案

【问题标题】：how to scale (large) font-awesome icons from the react-icons package如何从 react-icons 包中缩放（大）字体真棒图标
【发布时间】：2022-05-19 14:17:39
【问题描述】：

我正在使用 marvelouse react-icons 包 (http://gorangajic.github.io/react-icons/fa.html)，特别是 font awesome 包。

如果这不是反应，那么I would just add an attribute to the tag，如：

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

【问题讨论】：

试试这个：<i className="fa fa-camera-retro fa-5x"></i> 它应该可以工作，因为class 是保留关键字，所以要应用css class，我们需要使用className。
但是 JSX 对象包含在你的建议对非反应应用程序有好处
你想放大还是缩小？
我想要更大的

标签： reactjs font-awesome react-bootstrap

【解决方案1】：

如果你想要一个 5 倍的图标大小，你需要将它作为 size 传递给 react 类

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

<FaFolderOpen size={70} />

如果你注意到它每次跳 14 次

from the github readme 它显示所有内容都被内联覆盖。它渲染一个 svg，所以你不能使用 5x 你必须使用像素大小

编辑

几年后回到这个问题，对于较新版本的 FontAwesome/ReactIcons，处理不同大小的推荐方法是使用它们的图标提供程序，该提供程序利用 React Context API。这需要 React v16.3+

import { IconContext } from "react-icons";

<IconContext.Provider value={{ className: "shared-class", size: 70 }}>
  <>
    <FaFolder />
    <FaBeer />
  </>
</IconContext.Provider>

【讨论】：

【解决方案2】：

在 reactjs 中你可以使用size = 'with your preferred size which be from sm to lg or 1x to 10x'

这是 react 中字体 awesome 5 的示例

<FontAwesomeIcon icon={faBars} size = '10x'/>

【讨论】：

【解决方案3】：

如果您需要同时设置多个图标的样式，可以将它们包装到 IconContext.Provider。

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

【讨论】：

【解决方案4】：

一种不是很明确的方法来自docs（接近@Raimo Haikari）：

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

【讨论】：

【解决方案5】：

默认大小为 1em。你可以这样改变它：

import { FcSurvey } from 'react-icons/fc';
<FcSurvey size={'2em'} />

【讨论】：

【解决方案6】：

我有一个设计师给我的像素尺寸并不总是对应于 FontAwesome 的尺寸选项之一。所以我正在设置 CSS 高度。

<FontAwesomeIcon icon={faBars} style={{ height: "20px" }} />

【讨论】：

【解决方案7】：

React-Icons 有一个叫做 size 的道具，可以用来设置你想要的任何尺寸。从 react-icon 库中导入 react-icon 后，你可以轻松地做这样的事情。

<FaUsers size={'4rem'} />

【讨论】：

【解决方案8】：

你可以用这个：

<FaFolderOpen size="4x" />

【讨论】：