Next.js + SVGR

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

Installation

npm

npm install --save next-plugin-svgr

or yarn

yarn add next-plugin-svgr

Usage

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.

1. if using the plugin without the fileLoader option

src/typings/index.d.ts

/// <reference types="next-plugin-svgr/types/svg" />

2. If using the plugin with the fileLoader option

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