[+61] [기업협업] import svg

위코드 9주차, 기업협업을 시작하고 페이지를 만들기 시작하는데
1. next.js를 쓰고
2. next.js와 잘 맞는다는 jsx style로 쓴다.
3. 한 페이지 당 2명씩 짝을 지어 페이지를 만든다.

라는 진행사항이 있었다.

svg import 시키기.

svg란?

확장 가능한 벡터 그래픽(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어다. SVG는 코드로 수정할 수 있기 때문에 (텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능) 다른 이미지 형식보다 강력한 기능을 가지고 있다.

장점으로는 확대, 축소 등 어떤 환경에서도 깨지지 않기 때문에 모바일, 웹 등 다양한 환경에서 유저는 깔끔한 이미지를 볼 수 있다.
그래서 png보다는 svg선호!

나의 환경

webpack을 사용하고 입맛대로 추가할 수 있다는 next.js를 사용하고 있고
페이지를 만들고 있는데 기업 로고가 svg파일이었다.
여태까지는 svg를 잘 안썼어서 조금 헤매었기 때문에 블로깅을 하고자 한다.

설치

npm install @svgr/webpack
(설치 된 것은 package.json에서 확인 가능)

프로젝트에 저장

public에 images라는 폴더를 만들어서 그 안에 svg파일을 넣어주면 된다.

이렇게 넣어두고 import할 필요도 없이

 <img src="/images/chevron_left_24px.svg" />

라고 쓰면 된다.

import해서 사용한다면

import MainIcon from '위치';

<MainIcon />

이렇게 써도 된다.

혹시 안된다면
next.config.js에

 },
 //이전에 있던 module뒤에 webpack넣어주기 위해서 , 찍기
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    return config;
  }

를 추가해주자.