[React] svg파일 사용법 (with. create-react-app)

png, jpeg 등의 파일 외 svg파일을 사용하면 이미지가 깨지지않고 용량이 적으며 출력이 빠르다.

또한, 수정과 애니메이션이 가능하다는 장점이 있다. 

 

0. 가장 베이직한 방법

기본적으로는 img의 src로 svg를 넣어줄 수 있다. 

import Reservation from 'assets/icon-24-reservation.svg'

<img src={Reservation}>

 

1. svg 파일을 react component처럼 사용하는 방법 

1. svg 파일 주소를 복사한다. 
2. src 폴더(보통 src > assets > images)에 svg 확장자명의 파일(e.g. MySvg.svg)을 만들어 추가한다. 
3. something.svg 파일에 복사한 주소를 붙여넣는다. 
4. svg 파일을 component로 불러온다. (이때 { ReactComponent as OOO }의 이름으로 import 해와야 한다.) 

import {ReactComponent as MySvg} from "../../assets/images/MySvg.svg";

이제 컴포넌트처럼 사용하면 된다.

1-2. svg 컴포넌트의 width, height 변경하기 

.svg 파일을 열어 코드를 확인하면 width와 height가 설정된 부분이 있는데 가로와 너비를 변경하고 싶을 때 직접 하드코딩해도 되지만 width와 height값을 "current"로 변경한 뒤, 해당 svg컴포넌트에서 width와 height를 props로 전달해주는 방법도 있다. 

<svg 
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet" 
focusable="false" 
style="pointer-events: none; display: block;
width: "current"; //"current"로 수정
height: "current"; //"current"로 수정
" 
>
<g>
    <path d="M21,6H3V5h18V6z M21,11H3v1h18V11z M21,17H3v1h18V17z" ></path>
</g>
</svg>

import {ReactComponent as MySvg} from "../../assets/images/MySvg.svg";

const Header = () => {
return (
	<Container>
		<MySvg width="24px" height="24px" /> //props로 내려준다
	</Container>
);
};

const Container = styled.div``;
export default Header;

2. svg 파일을 함수처럼 사용하는 방법 

1번처럼 component로 사용하는 방법 외에 svg를 호출하는 함수를 만들어 사용하는 방법도 있다. 

함수를 만들어 그 안에 svg파일 주소를 붙여넣는다.

이때 svg파일에 기본적으로 설정된 style 부분은 모두 삭제해야 한다. svg 파일에 class가 설정되어 있는 경우, jsx에서는 className만 인식하므로 삭제하는 게 좋다. 

아래의 코드처럼 중괄호 안에 icon함수를 ()로 호출해준다. 

const Header = () => {
  
   const icon = ()=>(
    <svg 
    viewBox="0 0 24 24" 
    preserveAspectRatio="xMidYMid meet" 
    focusable="false" 
    >
    <g><path d="...">
     </path>
     </g>
     </svg> 
 )
  
  
  return (
        <Icon>
    		{icon()}
        </Icon>
);
};

const Icon = styled.div``
export default Header;

2-1 svg파일을 여러개 사용해야 하는 경우 

수십개의 svg 파일을 불러와야 하는 경우를 생각해보자

그렇게되면 import를 30번 하거나 함수를 30번 만들어야 하는데, component 코드가 난잡해지게될 것이다. 

이럴 경우엔 해당 데이터를 따로 만들어 사용하면 된다. 

 

src >component > data 단계로 폴더를 생성하고 data폴더에 000.js파일을 만든다. 

000.js파일은 작업하는 component에서 map함수를 돌려 불러올 데이터를 저장해놓는 곳이라고 생각하면 된다.

export const firstList = [
  {
    name: "홈",
    icon: () => (
      <svg
        viewBox="0 0 24 24"
        preserveAspectRatio="xMidYMid meet"
        focusable="false" 
        //style 속성 제거 필수
      >
        <g>
          <path d="M4,10V21h6V15h4v6h6V10L12,3Z"></path>
        </g>
      </svg>
    ),
  },
  {
    name: "탐색",
    icon: () => (
      <svg
        viewBox="0 0 24 24"
        preserveAspectRatio="xMidYMid meet"
        focusable="false"
      >
        <g>
          <path d="..."></path>
        </g>
      </svg>
    ),
  },
  {
    name: "Shorts",
    icon: () => (
      <svg
        viewBox="0 0 24 24"
        preserveAspectRatio="xMidYMid meet"
        focusable="false"
      >
        <g height="24" viewBox="0 0 24 24" width="24">
          <path d="..."></path>
        </g>
      </svg>
    ),
  },
  ... //생략
]

이제 작업하고 있는 component에서 위의 데이터 파일을 불러온다. 

import styled from "styled-components";
import {firstList} from "../../data/youtube/sidebar";

const SideBar = () => {
  return (
      <Container>
        <List>
            {firstList.map(({ name, icon }) => (
            <Item>
              <IconWrapper>{icon()}</IconWrapper> //icon 함수 호출
              <Name>{name}</Name>
            </Item>
          	))}
        </List>
      </Container>
);
};
const Container = styled.div``
const List = styled. div``
const Item = styled. div``
const IconWrapper = styled.div``
const Name = styled.span``

 

ref: 

React.js - svg 다루기

React에서 svg파일 사용하는 법 (create-react-app)