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.

Edit this page on GitHub