🔍 SVG란 ?

: 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어

🤔 why use SVG ?

• SVG는 크기를 어떤 사이즈로 변경하던, 품질을 유지한다.
• 도형과 선으로 이루어져있고, html & css로 수정또한 가능하다.

휴대폰마다 크기가 다르고 "flex" 로 박스사이징을 할 것이기 때문에 svg를 import해서 퀄리티
저하없이 아이콘 이미지들을 사용하려한다.

⚙️ Usage

• 리액트에선 간단하게 import로 불러와 사용 가능했지만, 리액트 네이티브는 다르다.

  적용 순서

1. 필수 라이브러리 설치
expo install react-native-svg

2. SVG 파일을 assets 폴더에 추가

3. 프로젝트 루트폴더에 example.js 파일 추가

• example.js

import React from "react"
import { SvgXml } from "react-native-svg";

export default function Svg(){
 
  return()
}

4. svg 파일의 모든 코드를 copy & paste

const logo = `
<svg width="72" height="37" viewBox="0 0 72 37" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="36.5355" width="20" height="5" rx="2.5" transform="rotate(45 36.5355 0)" fill="#70AFAF" fill-opacity="0.85"/>
    <rect x="33" y="25.1422" width="20" height="5" rx="2.5" transform="rotate(-45 33 25.1422)" fill="#85B2D2"/>
    <rect x="36.1421" y="28.6777" width="20" height="5" rx="2.5" transform="rotate(-135 36.1421 28.6777)" fill="#70AF7E" fill-opacity="0.85"/>
    <rect x="22" y="14.1422" width="20" height="5" rx="2.5" transform="rotate(-45 22 14.1422)" fill="#DFA2A2"/>
    </svg>
`

5. SvgXml 컴포넌트 생성

const LogoSvg = ()=> <SvgXml xml={logo} width="30%" height="30%" />

6. 리턴해주기

• example.js

import React from "react"
import { SvgXml } from "react-native-svg";

export default function Svg(){
 const logo = `
<svg width="72" height="37" viewBox="0 0 72 37" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect x="36.5355" width="20" height="5" rx="2.5" transform="rotate(45 36.5355 0)" fill="#70AFAF" fill-opacity="0.85"/>
    <rect x="33" y="25.1422" width="20" height="5" rx="2.5" transform="rotate(-45 33 25.1422)" fill="#85B2D2"/>
    <rect x="36.1421" y="28.6777" width="20" height="5" rx="2.5" transform="rotate(-135 36.1421 28.6777)" fill="#70AF7E" fill-opacity="0.85"/>
    <rect x="22" y="14.1422" width="20" height="5" rx="2.5" transform="rotate(-45 22 14.1422)" fill="#DFA2A2"/>
    </svg>
`
 const LogoSvg = ()=> <SvgXml xml={logo} width="30%" height="30%" />
   
   
  return <LogoSvg/>
}

7. 컴포넌트 import 후 사용

App.js

import React from "react"
import { Image, ImageBackground, StyleSheet, Text, View } from "react-native";
import LogoSvg from "./example";

export default function App() {
 return (
  <View style={styles.container}>
        <View style={styles.logoContainer}>
          <LogoSvg />
        </View>    
    </View>
   
 ) 
}

https://levelup.gitconnected.com/how-to-use-svgs-in-react-native-with-expo-ec34f085f5e0

끝 👍