React 아이콘 크기 업데이트

아이콘이 있는 HTML 구성 요소는 복잡한 앱을 만들 때 드문 일이 아닙니다. 아이콘을 사용하고 아이콘 크기를 설정하는 구문은 HTML 및 CSS에 익숙하다면 익숙할 것입니다.

이 기사에서는 아이콘 크기를 업데이트하여 ReactJS에서 이를 수행하는 방법을 배웁니다.

React 아이콘 크기 업데이트

대부분의 React 개발자는 간단한 구성 요소 정의를 만들기 위한 고유한 구문인 JSX를 사용합니다. 구문이 HTML과 유사하기 때문에 대부분의 React 엔지니어가 선호합니다.

의심할 여지 없이 클래스를 사용하여 HTML에서 아이콘 크기를 변경하는 데 익숙합니다. JSX의 size 속성은 숫자로 설정되어야 합니다.

size 속성을 사용한 쉬운 정의는 다음과 같습니다.

<FaBeer size={24} />

정수를 생성하는 JavaScript 표현식을 사용하여 size 속성을 해당 값으로 설정할 수 있습니다. 표현식을 중괄호로 묶어 JavaScript 코드로 올바르게 인식되도록 하면 도움이 됩니다.

아래 그림을 살펴보겠습니다.

import {FaBeer} from 'react-icons/fa';
const sizeValue = 14 * 5;
<FaBeer size={sizeValue} />
<FaFacebook size={sizeValue}></FaFacebook>

이 그림에서는 표준 아이콘 크기를 변수에 동적으로 저장할 수 있는 정수 값과 결합합니다. 방정식을 평가한 후 크기 속성은 정수 70과 같습니다.

이제 React.js와 호환되는 Replit에서 위의 코드 줄을 실행합니다. 다음과 같은 결과가 표시됩니다. 데모도 여기에서 찾을 수 있습니다.

출력:

반응 아이콘에 대한 자세한 정보는 여기에서 확인할 수 있습니다.