티스토리 뷰

Next.js

[Next.js] svg 사용법

도옹건 2023. 11. 15. 00:58

SVG 사용방법

 

Next.js에서 svg를 사용할 수 있는 방법 중 가장 쉬운 방법은 svgr 라이브러리를 사용하는 것입니다.

npm install -D @svgr/webpack

 

 

그 후 next.config.js에 아래와 같이 추가합니다.

next.config.js

module.exports = { 
    webpack: (config) => { 
        config.module.rules.push({ 
        test: /\.svg$/,
        use: ['@svgr/webpack'], 
        }); 

    return config; }, 
};

 

 

그러면 이제 import를 통해 컴포넌트처럼 사용하실 수 있습니다.

import HtmlSvg from "../../public/icons/html5-color.svg";

 

SVG 크기 및 색 수정

 

svg 크기 및 색을 수정하기 위해서는 svg width, height, fill을 current로 바꿔줍니다.

<svg fill="current" role="img" width='current' height='current' xmlns="http://www.w3.org/2000/svg">

 

<HtmlSvg width='70' height='70' fill='red' />
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/07   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함