Next.js + SVGR


Flexible Next.js plugin for transforming svg's into react components using the svgr library

$3

npm

``
npm install --save next-plugin-svgr
`

or yarn

`
yarn add next-plugin-svgr
`


$3

Create a next.config.js in your project

`js
// next.config.js
const withSvgr = require('next-plugin-svgr');

module.exports = withSvgr();
`

Optionally add Next.js configuration as a parameter

`js
// next.config.js
const withSvgr = require('next-plugin-svgr');

module.exports = withSvgr({
webpack(config, options) {
return config;
},
});
`

Or with next-compose-plugins when composing multiple plugins

`js
// next.config.js
const withPlugins = require("next-compose-plugins");
const withSvgr = require("next-plugin-svgr");

module.exports = withPlugins([
withSvgr
// your other plugins here
]);
`

And now in your components you can use the svg as a component

`js
import Icon from './icon.svg';

export default () => (



);
`

$3

#### svgrOptions

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

Example with options:

`js
module.exports = withSvgr({
svgrOptions: {
titleProp: true,
icon: true,
svgProps: {
height: 'auto',
},
},
});
`

You can optionally specify a project configuration file. SVGR uses
cosmiconfig for configuration file support,
which means that any file type accepted by cosmicconfig is supported.

* .svgrrc file, written in YAML or JSON, with optional extensions: .yaml/.yml/.json/.js.
* A svgr.config.js file that exports an object.
* A "svgr" key in your package.json file.

note: The plugin will automatically detect your config file so you shouldn't have to include the configFile
property in svgrOptions. The option to specify exists and can be accomplished following the example below.

`js
// .svgrrc.js
module.exports = {
icon: true,
expandProps: false,
};

// next.config.js
module.exports = withSvgr({
svgrOptions: {
configFile: path.resolve(__dirname, '.svgrrc.js'),
},
});

// or with next-compose-plugins
module.exports = withPlugins([
withGraphql,
[withSvgr, {
svgrOptions: {
configFile: path.resolve(__dirname, '.svgrrc.js'),
},
}],
]);
`

#### fileLoader

If you would like to use the svgr webpack loader with file-loader.
Accepts a boolean or all available options for file-loader.

The fileLoader option is undefined by default. If defined, it will apply the options below.

note: If using file-loader and typescript remember to reference the svgr/file-loader types. See below.

Default options:

`
{
limit: 8192,
publicPath: ${assetPrefix ?? ''}/_next/${path},
outputPath: ${isServer ? '../' : ''}${path},
name: '[path][name].[hash].[ext]',
}
`

`js
module.exports = withSvgr({
fileLoader: true,
svgrOptions: {
...options
},
});
`

`js
module.exports = withSvgr({
fileLoader: {
limit: 16384,
name(resourcePath, resourceQuery) {
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[contenthash].[ext]';
}
},
svgrOptions: {
...options
},
});
`

`js
import url, { ReactComponent as Icon } from './icon.svg';

export default () => (



);
`

$3

Typescript is unable to interpret imported svg files, so next-plugin-svgr includes definitions
for svg modules depending on your use case. Per the recommendations of the Next.js maintainers you
should no longer reference these types in the next-env.d.ts file. You can instead create a typings
directory inside your src directory. Then simple create a definitions file (ie: index.d.ts) and
reference any of the definitions there. There shouldn't be any need to adjust your tsconfig.json
for your project.

1. if using the plugin without the fileLoader option

src/typings/index.d.ts
`js
///
`

2. If using the plugin with the fileLoader option

src/typings/index.d.ts
`js
///
``

$3

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT