@svgr/webpack 설치

@svgr/webpack 깃헙

npm i -D @svgr/webpack

• svg파일을 react or next프로젝트에서 사용하자! 먼저 npm에서 svg 로더를 받아야 한다.

설정

next에서 사용

next는 next.config.js를 프로젝트 루트에 작성하여 기존 설정을 수정할 수 있게 함

//  `next.config.js` 작성하기
module.exports = {
  webpack(config) {
    config.module.rules.push({ // 웹팩설정에 로더 추가함
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
      },
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

react에서 사용

webpack.config.js

module.exports = {
  // ...생략
  module: {
    rules: [
      //... 로더 생략
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
 // ... 생략
};

svgr로더만 설정했을때는 .SVG 파일을 컴포넌트로 가져와서 사용할수 있게된다.

import Star from './star.svg' // 이미지를 불러오면 컴포넌트에 담김!

const App = () => (
  <div>
    <Star /> // 컴포넌트로 사용
  </div>
)

url-loader 와 함께쓰기

url로 설정하고싶다면 url-loader 추가
물론 url-loader 설치할 것!
npm i -D url-loader file-loader
공식문서에는 file-loader도 설정하라고 되어 있는데, 🧐 같이 쓰니적용이 안되는 듯허이... url-loader만 적용
file-loader의 확장자 목록에 추가해봐도 적용 안됨

// webpack.confign.js

module.exports = {
  // ...생략
  module: {
    rules: [
      //... 로더 생략
      {
        test: /\.svg$/,
        use: ['@svgr/webpack','url-loader'], // file-loader는 적용안됨..
      },
    ],
  },
 // ... 생략
};

url/파일명.svg 사용하기

import starUrl, { ReactComponent as StarComponent } from './star.svg'

const App = () => (
  <div>
    <StarComponent /> // 기본 svgr-컴포넌트 방식  
    // url-loader & file-loader 동시 적용 후
    <img src={starUrl} alt="star" /> // img파일 불러와서 요소에 url적용
    <StarImage> // style속성에 url적용
  </div>
)
const StarImage = styled.div`
  background-image: url('/svg-file.svg');
`;

svgr-로더만 설정했을때

• style속성 url()경로 설정가능 : 정적파일제공 폴더인 public경로 이하만 작성 /파일명.svg
• 컴포넌트형으로 이미지 삽입가능

url-loader 설정후

• 태그 요소에 src속성에 url 입력가능

file-loader 는 설정 적용이 안되서 확인안됨