-
React Native에서 SVG 이미지 사용하기React Native 2021. 7. 22. 17:35728x90
// expo일 때 expo install react-native-svg // expo가 아닐 때 npm i react-native-svg cd ios pod install
설치한 뒤 공통으로 종속성 하나를 더 설치한 뒤 metro.config.js를 수정한다.
npm i -D react-native-svg-transformer const { getDefaultConfig } = require('expo/metro-config'); // expo일 때 const { getDefaultConfig } = require('metro-config'); // expo 아닐 때 module.exports = (async () => { const { resolver: { sourceExts, assetExts }, } = await getDefaultConfig(__dirname); return { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), }, resolver: { assetExts: assetExts.filter((ext) => ext !== 'svg'), sourceExts: [...sourceExts, 'svg'], }, }; })();
여기에 TS를 이용중이라면
React Native에서 이미지 import로 불러오기 :: Kir의 개발 낙서장 (tistory.com)
이 글을 참고하여 선언을 추가해준다.
이런 식으로 svg파일을 import해 이용할 수 있다.
import Logo from '@assets/logo.svg'; <Logo width={24} height={24} />
width, height 값은 필수 값은 아님.
'React Native' 카테고리의 다른 글
React Native WebView Google Login Authorization Error 403: disallowed_useragent Error 해결법 (0) 2022.03.23 React Native에서 Custom Font 적용하기 (0) 2021.07.29 앱 기획부터 출시까지(일기장) - 2 (종속성 설치 및 설정들) (0) 2021.07.22 React Native에서 이미지 import로 불러오기 (0) 2021.07.21 앱 기획부터 출시까지(일기장) - 1 (사용 기술 정하기 및 프로젝트 생성) (0) 2021.07.21