@fortawesome/react-native-fontawesome에서 fontSize가 안먹히는 이유

 

React Native에서 FontAwesome 아이콘을 사용할 때, 아이콘의 크기를 아래와 같이 조절하려고 하면 에러가 퍼퍼펑 터져버린다

import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faPlus } from "@fortawesome/pro-regular-svg-icons";

const styles = StyleSheet.create({
  icon: {
    fontSize: 22,
  },
});

<FontAwesomeIcon icon={faPlus} style={styles.icon} />

Type '{ fontSize: number; }' is not assignable to type 'FontAwesomeIconStyle | undefined'.ts(2322)
index.d.ts(25, 3): The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & Props'
(property) Props.style?: FontAwesomeIconStyle | undefined

뭐 대충 위와 같은 에러가 터지는데 

fontSize : number 유형은 FontAwesomeIconStyle 유형에 할당할 수 없다~ 블라블라 대충 정의되지 않는 다는 내용임. 

🥲 왜 안먹힘?ㅠ

@fortawesome/react-native-fontawesome < 에서 제공하는 FontAwesomeIcon 는 실제로는 SVG 기반으로, 일반적인 Text 처럼 동작하지 않기 때문에 fontSize나 lineHeight 같은 텍스트 스타일 속성은 무시된다

✅ 대신 이렇게 지정하세요

<FontAwesomeIcon icon={faPlus} size={22} color="#000" />

🫵 주의

style prop은 margin, padding, alignSelf 등 뷰 관련 속성에 대해서는 적용되지만, fontSize처럼 svg 내부 렌더링에는 영향을 주지 않음/ 만약 text 처럼 fontSize 등을 스타일로 조절하고 싶은 경우 react-native-vector-icons 같은 라이브러리를 사용하는 것도 좋다