svgr

React

[React] SVG 불러오기 (Webpack5 설정 + SVGR)

개발환경React 18Typescript 4Webpack 5styled-componentsSVGR 원래는 React에서는 SVG를 사용할 때 아래와 같은 방법을 주로 사용했다.import { ReactComponent as Logo } from "assets/images/logo.svg";  그러나 Webpack5, Typescript 등 새로운 환경에서는 기존 방법이 잘 작동하지 않아 SVGR 라이브러리를 설치하여 사용하고 있다. 그러면서 아래와 같은 문법을 주로 사용하여 SVG를 호출하고 있었다.import CancelSvg from "assets/images/cancel.svg";  위와 같은 방법으로 잘 사용하고 있었으나 체트박스 컴포넌트를 만들면서 background-image에 url을 넣는 ..

React

[React] SVG 파일 index.ts에서 export 하기 - SVGR

assets 폴더에서 svg 파일들을 한번에 import 하고 싶어서 index.ts 파일을 생성하여 export를 하려고 한다.현재 svgr 라이브러리를 시용중인데 라이브러리를 사용할때와 아닐때의 방법에 차이가 있다. 일반적인 방법// src/assets/images/index.tsexport { ReactComponent as Area } from "./area.svg";export { ReactComponent as Circle } from "./circle.svg";export { ReactComponent as Draw } from "./draw.svg";export { ReactComponent as Line } from "./line.svg";export { ReactComponent as ..

캐럿노트
'svgr' 태그의 글 목록
상단으로

티스토리툴바