:rocket: next-inline-svg

SVGR takes a raw SVG and transforms it into a ready-to-use React component.

Installation

1npm i next-inline-svg -D
2# or with yarn
3yarn add next-inline-svg -D

Then, import the library in your next.config.js file.

1const withSvgr = require("next-inline-svg")();
2
3// Example with options:
4const withSvgr = require("next-inline-svg")({
5  titleProp: true,
6  icon: true,
7  svgProps: {
8    height: "auto",
9  },
10});

Options

The plugins supports all available options of svgr webpack loader. Check out the svgr documentation for the full list of options.

Usage

You can now start importing your SVG files as if they were components:

1import MyIcon from "./myicon.svg";
2
3export default () => (
4  <div>
5    <MyIcon />
6  </div>
7);

Sample next.config.js

1/** @type {import("next").NextConfig} */
2const nextConfig = {
3  reactStrictMode: true,
4}
5
6const withInlineSvg = require("next-inline-svg")();
7
8module.exports = (_phase, { defaultConfig }) => {
9  const plugins = [withInlineSvg]
10  return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...nextConfig })
11}