[ React Native Expo ] SVG Icons 사용

react에서 svg 아이콘 사용

 

<Scan width={120} height={40} fill={"black"}/>

 

해당 gitHub를 참고하여 사용

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

GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in

 

우선 사용할 svg 파일을 다운

https://www.svgrepo.com

SVG Repo - Free SVG Vectors and Icons

---

Setup

우선 svg를 사용하기 위해 react-native-svg를 설치

npx expo install react-native-svg

 

react-native-svg-transformer를 설치

npm install react-native-svg-transformer

 

metro.config.js 파일을 생성하여 아래의 코드를 작성

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

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

    const { transformer, resolver } = config;

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

    return config;
})();

 

만약 타입스크립트를 사용한다면 

declarations.d.ts 파일을 만들어 해당 코드를 추가 

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

 

svg에 색깔을 넣기 위해서 

.svgrrc 파일을 생성하여 해당 코드를 추가

{
  "replaceAttrValues": {
    "#000": "{props.fill}"
  }
}

 

여기서 #000 : props.fill을 하는 이유는 원하는 색으로 해당 컴포넌트에서 편하게 변경하기 위해서 이렇게 작성

 

svg 파일은 이처럼 svg fill="#000000" 이렇게 코드로 작성되어있는데

이 부분에 props.fill로 넣은 코드가 들어가게 된다. 따라서 svg파일안의 fill의 기본값을 다른 값으로 바꾸면 

.svgrrc에서도 마찬가지로 해당 키값으로 바꿔주어야한다.

<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
</svg>

 

 

그럼 컴포넌트에서 이렇게 사용이 가능하다.

<Logo width={120} height={40} fill={"any color"} />

 

---

Useage

해당 svg파일을 사용할 컴포넌트에 import를 해준다.

 

import Scan from '../assets/icons/scan.svg'

그러면 해당 컴포넌트에 아래처럼 width 값과 height값을 지정해주고 fill에 색을 입력하여 사용할 수 있다.

<Scan width={120} height={40} fill={"black"}/>

 

[ 전체 코드 ]

import {StyleSheet, Text, TouchableOpacity, Image, View} from "react-native";
import Scan from '../assets/icons/scan.svg'
import ScreenInner from "../component/screen_inner";

export default function Home() {

    return(
        <ScreenInner>
            <TouchableOpacity style={styles.button} onPress={handleNavigatorQRcode}>
                <Scan width={120} height={40} fill={"black"}/>
                <Text style={styles.text}>QR CODE</Text>
            </TouchableOpacity>
        </ScreenInner>
    )
}

const styles = StyleSheet.create({
    button: {
        paddingVertical: 20,
        backgroundColor: '#FFCCEA',
        borderRadius: 5,
    },
    text: {
        textAlign: 'center',
        fontWeight: 'bold',
        color: '#333333'
    }
})