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()` 사용 ex) ``❷ CSS 파일 루트 폴더 기준은 `src` 폴더❸ 파일 최상단 `import` 구문에선 `src` 폴더만 처리 가능(`public` 폴더에 있는 파일은 불가) 태그 src 속성에 svg 파일 경로를 적어준다. 경로를 적을 때 public 폴더에 있는 파일은 public..