🚀 next-inline-svg

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

Installation

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

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

const withSvgr = require("next-inline-svg")();

// Example with options:
const withSvgr = require("next-inline-svg")({
  titleProp: true,
  icon: true,
  svgProps: {
    height: "auto",
  },
});

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:

import MyIcon from "./myicon.svg";

export default () => (
  <div>
    <MyIcon />
  </div>
);

Sample next.config.js

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

const withInlineSvg = require("next-inline-svg")();

module.exports = (_phase, { defaultConfig }) => {
  const plugins = [withInlineSvg]
  return plugins.reduce((acc, plugin) => plugin(acc), { ...defaultConfig, ...nextConfig })
}