Figma로 svg 추출하여 react 컴포넌트로 사용하기

가지고 있는 png 파일을 svg 파일로 추출하고자 fimga 의 export를 이용했다.

1. 피그마로 svg 파일 ✨export 하기

피그마의 design 메뉴 하단에 위치한 export 탭에서 + 클릭하여 추출목록을 생성한다.

변환하고자하는 확장자(SVG)를 선택한 후 파일을 다운로드한다.

2. 추출된 svg 코드 정리하기

SVG 코드 정리

위 사이트에 다운받은 SVG 파일을 업로드 한 후 아래와 같이 설정해주면 된다.

화면 내 코드복사 아이콘 클릭하면 따로 저장할 필요없이 바로 vscode 내 붙여 사용할 수 있다 !

3. react 컴포넌트로 사용하기

사용하고자 하는 이름으로 함수형 컴포넌트 생성 후 return문 내 복사한 코드를 입력해준다.
참고로 본인의 경우 xmlns:xlink와 같은 속성이 리액트 형식의 속성명이 아닌채 복사되어 경고가 발생했는데, xmlnsXlink 와 같이 대문자로 변경해주니 해결되었다!😀

원하는 곳에 컴포넌트를 불러와 사용해주면 끝이다!