Skip to content

next.js 에서 svg 사용방법 #4

@c0c0pang

Description

@c0c0pang
  1. npm i -D @svgr/webpack 설치
  2. next.config.js 설정
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;
  1. 컴포넌트 형식으로 사용가능
import BUS from './image/bus.svg'
...
        <BUS />
...

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions