[Next] SVGR 로더를 이용해서 SVG 파일 불러오기

[Next] SVGR 로더를 이용해서 SVG 파일 불러오기

2022. 12. 24. 01:05ㆍStudy/React

사건 발생

Figma에서 사용한 아이콘을 svg 파일로 다운받아 사용하려고 했다. 어떻게 하면 깔끔하게 사용할 수 있을까?

Install

svgr loader를 설치한다.

npm install @svgr/webpack --save-dev

next.config.js 설정을 변경한다.

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

module.exports = nextConfig;

svg 파일을 추가한다

나는 public에 svg 파일을 모았다. 이걸 바로 pages 하위에 바로 사용하면!! 다음과 같은 에러가 뜬다.

왜 뜰까? 페이지에 바로 넣으려면 컴포넌트를 따로 만들어서 불러야 한다!

타입 선언한다

// custom.d.ts

declare module '*.svg' {
  import React from 'react';
  const svg: React.FC<React.SVGProps<SVGSVGElement>>;
  export default svg;
}

  // tsconfig.json
  
  "include": [
    "custom.d.ts",
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "postcss.config.js"
  ],

아이콘을 한 파일에 모아서 관리하고 불러온다

// components/icon.tsx

import Student from 'public/Student.svg';

export function StudentIcon() {
  return (
    <>
      <Student />
    </>
  );
}

아이콘 불러서 사용하기

import { StudentIcon } from '../components/icon';

끝!!

Reference

저작자표시 비영리 변경금지 (새창열림)

온의 IT 농사직설