[CSS] Next.js에서 svg 사용하는 방법

svg를 적용하는 방법에는 크게 두가지가 있다.

 

1. svg 코드를 HTML 부분에 삽입한다.

2. svg 파일을 생성하고 svg 코드를 삽입한 후 해당 .svg를 import 받아 삽입한다.

 

이 과정에서 발생한 오류은 아래에서 정리했다.

---

1, 2번 공통 오류

선과 배경색이 black으로 설정 되어 있어서 구분이 안갔는 데 strock(선 속성) 사용해서 해결했다.

[HTML기초문법] 15강 SVG태그 Stroke속성 - 오쌤의 니가스터디

---

2번 오류 

[nextjs] next.js에서 svg를 import하는 방법

 

2번 오류 해결 과정 1

1) @svgs/webpack 라이브러리 설치

$ npm install --save-dev @svgr/webpack

 

2) next.config.js 수정

(export object 안에 webpack 함수를 추가한다.)

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

    return config;
  }
};

 

3) component에서 import 받아서 사용

import Github from '../github.svg';

const Contact: React.FC = () => {
  return (
    <div>
      <div className='card-title'>CONTACT</div>
      <Github />
      <div>https://github.com/devstefancho</div>
    </div>
  );
};
export default Contact;

[nextjs] next.js에서 svg를 import하는 방법

 

2번 오류 해결 과정 2

해결 과정 1번에서 설치한 @svgr/webpack v6의 문제로 인해 발생한 오류였다.

→ 버전을 v5.5.0으로 다운그레이드 시킨 후 실행하면 정상적으로 작동한다.

[Storybook] storybook @svgr/webpack 에러 해결방법

<svg className="home-svg" role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="homeAltIconTitle">
    <title id="homeAltIconTitle">Home</title>
    <path d="M3 10.182V22h18V10.182L12 2z" />
    <rect width="6" height="8" x="9" y="14" />
</svg>

svg {
      width: 28px;
      height: 28px;
      // stroke : 선 속성
      stroke: #777777;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      margin: 2px 25px;
}

---

[Storybook] storybook @svgr/webpack 에러 해결방법