svg
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
[React] svg 파일 → 리액트 컴포넌트 변환하기 - React SVGR
2024.05.12기본 사용법설치yarn add "@svgr/cli"yarn add -D "@svgr/webpack" CLI 명령어💡 경로만 입력하면 svg path를 지정하는 것과 동일. -- double dash는 커맨드 옵션이 끝난다는걸 의미하므로(참고글) -- 뒤에 경로를 입력하면 svg path가 지정됨(옵션이 없다면 굳이 안붙여도 됨).# config 파일이 없을 때 # svgr -d svgr ./assets/icons/raw/bulb.svg -d ./assets/icons/dist# config 파일이 있을 때# svgr --config-file -d svgr --config-file ./svgr.config.js ./assets/icons/raw/bulb.svg -d ./assets/icons/dis..
[React] 리액트에서 SVG 사용법
[React] 리액트에서 SVG 사용법
2024.04.25💡 SVG는 색상, 크기 등을 동적으로 조절할 수 있는 장점이 있다 방법 1 — src 속성에 svg 경로 입력 💡 파일 경로 지정 참고 내용JSX 엘리먼트 속성의 루트 기준은 public 폴더. 만약 태그의 src 속성(JSX 태그 속성)에 src 폴더에 있는 이미지 파일을 지정하려면…파일 최상단에서 불러온 이미지 파일을 src 속성에 할당하거나,src 속성 안에서 require() 사용 예: CSS 파일 루트 폴더 기준은 src 폴더파일 최상단 import 구문에선 src 폴더만 처리 가능(public 폴더에 있는 파일은 불가) 태그의 src 속성에 svg 파일 경로를 적어준다. 경로를 적을 때 public 폴더에 있는 파일은 public 경로명을 적지 않아도 된다. 간편하긴 하지만 상황..