@mcansh/next-svgr
Use @svgr/webpack with Next.js
Installation
npm install @mcansh/next-svgr
or
yarn add @mcansh/next-svgr
Usage
Create a next.config.js in your project
// next.config.js
const withSVG = require("@mcansh/next-svgr")();
module.exports = withSVG();Optionally you can provide options:
// next.config.js
const withSVG = require("@mcansh/next-svgr")({
native: true,
svgoConfig: {
removeViewBox: true,
},
});
module.exports = withSVG();Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withSVG = require("@mcansh/next-svgr")();
module.exports = withSVG({
webpack(config, options) {
return config;
},
});TypeScript
TypeScript doesn't know how interpret imported svgs.
you need to add reference to our types (third line) into your next-env.d.ts file.
/// <reference types="next" />
/// <reference types="next/types/global" />
+ /// <reference types="@mcansh/next-svgr" />