react-icons 패키지에서 글꼴 표시 아이콘을 확대(크게)하는 방법

react-icons 패키지에서 글꼴 표시 아이콘을 확대(크게)하는 방법

저는 marvelouse react-icons 패키지(http://gorangajic.github.io/react-icons/fa.html),를 사용하고 있으며, 특히 폰트 awesome 패키지를 사용하고 있습니다.

이것이 반응하지 않으면 태그에 다음과 같은 속성을 추가합니다.

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

단, Fa-5x를 FaFolderOpen 태그에 추가하면 아무것도 동작하지 않습니다.보시는 바와 같이 리액트 부트스트랩을 사용하여 아이콘을 버튼(블록으로 해야 합니까?

이전에 물어본 적이 있는 것 같지만, 검색으로는 찾을 수 없었습니다.

이렇게 생겼는데 더 크게 하고 싶어요.

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>

5x 아이콘 크기를 원하는 경우 리액트 클래스에 전달해야 합니다.size

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

<FaFolderOpen size={70} />

매번 14씩 뛰면

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>

reactjs에서는size = 'with your preferred size which be from sm to lg or 1x to 10x'

이것은 리액트의 폰트 awesome 5의 예시입니다.

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

여러 아이콘을 동시에 스타일링해야 하는 경우 IconContext로 래핑할 수 있습니다.프로바이더

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

명확한 접근법이 아닌 접근법은 문서(@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;
}

기본 사이즈는 1em 입니다.다음과 같이 변경할 수 있습니다.

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

보완하기 위해 다른 방법으로 할 수 있었기 때문에 CSS 속성을 사용할 수도 있습니다.font-size또는fontSizeJSON 표기의 경우.

외부 파일에서의 CSS 사용:

/* style.css */
.bigIcon {
   font-size: 25px;
}

// index.jsx
import { FiPackage } from 'react-icons/fi';
import './style.css';
(...)
<FiPackage className="bigIcon" />

또는 (JSON 구문)

// index.jsx
import { FiPackage } from 'react-icons/fi';
(...)
<FiPackage style={{fontSize:'25px'}} />

FontAwesome의 사이즈 옵션 중 하나와 항상 일치하지 않는 픽셀 사이즈를 제공하는 디자이너가 있습니다.그래서 나는 CSS 높이를 설정하고 있다.

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

React-Icons에는 원하는 크기로 설정할 수 있는 size라는 소품이 있는데, react-icon 라이브러리에서 react-icon을 가져오면 이와 같은 작업을 쉽게 할 수 있습니다.

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

다음을 사용할 수 있습니다.

<FaFolderOpen size="4x" />

언급URL : https://stackoverflow.com/questions/43768629/how-to-scale-large-font-awesome-icons-from-the-react-icons-package