SVG (2) 썸네일형 리스트형 [Next.js] svg component in Next 1. webpack 설치 npm install -D @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"], }); return config; }, }; 3. 프로젝트 루트 폴더에 custom.d.ts 파일 생성 declare module "*.svg" { import React from "react"; const svg: React.FC; export default svg; } 4. tsconfig.json 수정 "include": ["custom.d.ts", "next-env.d.ts", "**/*.ts", "*.. styled-components svg 스타일링하기 import ArrowIcon from '/assets/icons/header/downArrow.svg'; ... ... // styled-components의 확장 기능을 사용해서 svg 스타일링 const Arrow = styled(ArrowIcon)` path { stroke: blue; fill: blue; } &:hover { path { stroke: red; fill: red; } } `; 이전 1 다음