[React-Native] svg 사용

1.설치

npm install react-native-svg

npm install --dev react-native-svg-transformer

2. metro.config

module.exports = (() => {
    const config = getDefaultConfig(__dirname);

    const { transformer, resolver } = config;

    config.transformer = {
      ...transformer,
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    };
    config.resolver = {
      ...resolver,
      assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...resolver.sourceExts, "svg"],
    };

    return config;
  })();

3.root에 declarations.d.ts 파일 생성

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

declare module '@env' {
    export const ENV: string;
    export const NODE_ENV: string;
    export const ENV_FILE: string;
    export const API_URL: string;
    export const SEND_BIRD_APP_ID: string;
}

<참고>
https://ricale.kr/blog/posts/220409-react-native-svg-icon-component/