svg 파일 사용 관련

[codmoni]

- src/assets/icons.svg 생성

- src/components/shared/SvgIcon.jsx 생성

사용 방법.

1. 새로운 svg 파일 추가
   (1) svg sprites( https://svgsprit.es/ )에 들어가서 사용할 파일을 드래그앤드롭하여 svg 파일을 생성합니다.
   
   이런 식으로 svg 파일을 제공받으면 왼쪽에 있는 코드에서 양 끝의 <svg>태그는 제외하고 <symbol>~</symbol>까지 복사합니다.

(2) src/assets/icons.svg에 붙여넣으시면 됩니다. 무슨 이미지인지 주석도 함께 넣어주시면 좋습니다.

2. svg 파일 사용하기
   SvgIcon.jsx는 id를 사용해 하나의 svg 파일을 불러오는 컴포넌트입니다.
   icons.svg에서 <symbol> 태그 내 정의되어 있는 id가 각 파일의 식별자가 되고, SvgIcon 컴포넌트 사용 시 name props에 id를 작성하시면 됩니다. size와 color도 필요 시 props로 설정 가능합니다.

import SvgIcon from '../../shared/SvgIcon';

const App =()=>{
   return(
       <>
           <SvgIcon name="close" size={20} color="#999">
       </>
   )
}

덧)

icons.svg로 한데 모아 관리하면 로딩시간 최적화에 도움이 된다고 합니다..
맡고 있는 코드에서 svg를 사용하고 있다면 리팩토링 부탁드려요~

[yeondub1121]

귯