svg 이미지 불러오기

• 참고블로그 : https://blog.usejournal.com/how-to-use-svg-in-react-native-e581eca59534

[1] 설치

1) react-native-svg 설치

• https://github.com/react-native-svg/react-native-svg

$ yarn add react-native-svg
$ npx pod-install

2) react-native-svg-transformer 설치

• https://github.com/kristerkari/react-native-svg-transformer

$ yarn add --dev react-native-svg-transformer

metro.config.js 파일 수정 (없다면 생성)

const { getDefaultConfig } = require("metro-config");

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

[2] svg 불러오기

• 이제 import 해서 컴포넌트처럼 쓰면 됨.

• width, height 지정도 가능

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Award from './src/assets/images/award.svg';

export default class App extends React.Component {
	render() {
		return (
			<View style={styles.container}>
				<Award /> 
				{/* Provide height and width props as per your need. */}
				<Award height={400} width={300} />
			</View>

		);
	}
};

const styles = StyleSheet.create({
	container: {
		flex: 1,
		flexDirection: 'column',
		justifyContent: 'center', 
		alignItems: 'center'
	},
});

색상 설정하기

• 참고 : https://stackoverflow.com/questions/49660912/react-native-how-to-use-local-svg-file-and-color-it

1. svg 파일의 fill 또는 stroke 속성값을 currentColor로 바꾼다.

<polygon fill="currentColor" ...>

2. 컴포넌트 호출 시 style={{color:'#색상값'}}으로 색상을 지정한다.

<Code
  width={30}
  height={30}
  style={color: '#fff'}
/>

<PlusIcon  width={30} height={30} color='white' />;

stroke, fill, color 등의 옵션으로도 색상을 변경할 수 있다.

[TypeScript] declaration.d.ts

• 공식 깃헙 : https://github.com/kristerkari/react-native-svg-transformer#using-typescript

declare module "*.svg" {
  import React from 'react';
  import { SvgProps } from "react-native-svg";
  const content: React.FC<SvgProps>;
  export default content;
}

[TypeScript] Custom.d.ts

custom.d.ts 작성

declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

tsconfig 수정 (선택)

"include": ["src/components", "src/custom.d.ts"]