platypusrexNext.js + SVGR
Flexible Next.js plugin for transforming svg's into react components using the svgr library
Installation
npm
npm install --save next-plugin-svgror yarn
yarn add next-plugin-svgrUsage
Create a next.config.js in your project
// next.config.js
const withSvgr = require('next-plugin-svgr');
module.exports = withSvgr();Optionally add Next.js configuration as a parameter
// 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
// 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
import Icon from './icon.svg';
export default () => (
<div>
<Icon />
</div>
);Options
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:
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.
// .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]',
}module.exports = withSvgr({
fileLoader: true,
svgrOptions: {
...options
},
});module.exports = withSvgr({
fileLoader: {
limit: 16384,
name(resourcePath, resourceQuery) {
if (process.env.NODE_ENV === 'development') {
return '[path][name].[ext]';
}
return '[contenthash].[ext]';
}
},
svgrOptions: {
...options
},
});import url, { ReactComponent as Icon } from './icon.svg';
export default () => (
<div>
<Icon title="my awesome icon" />
<img src={url} alt="my awesome image" />
</div>
);Typescript
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.
- if using the plugin without the
fileLoaderoption
src/typings/index.d.ts
/// <reference types="next-plugin-svgr/types/svg" />- If using the plugin with the
fileLoaderoption
src/typings/index.d.ts
/// <reference types="next-plugin-svgr/types/svgFileLoader" />Contributors
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT