Next.js

Configure your Next.js project to import SVG as React components in your application.

Install

npm install --save-dev @svgr/webpack
# or use yarn
yarn add --dev @svgr/webpack

Usage

Using SVGR into Next.js is possible by configuring @svgr/webpack.

next.config.js

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

Your code

import Star from './star.svg'

const Example = () => (
  <div>
    <Star />
  </div>
)

Please refer to SVGR webpack guide for advanced use cases.