pluginReactSVG

Rspack plugin that adds support of importing .svg files as React-components. It uses @svgr/webpack so this package should be installed in your project.

The @svgr/webpack is optional peer dependency of this package, so you need to install it.

npm install --save-dev @svgr/webpack

You can use this plugin like regular plugins.

import { pluginReactSVG } from '@krutoo/utils/rspack';

export default {
  plugins: [
    // just use plugin function
    pluginReactSVG(),
  ],
};

Rule insertion

Under the hood this plugin adds item to module.rules in your configuration.

You can configure how to add rule by set ruleInsert option:

import { pluginReactSVG } from '@krutoo/utils/rspack';

export default {
  plugins: [
    pluginReactSVG({
      // 'to-start' | 'to-end', default: 'to-end'
      ruleInsert: 'to-end',
    }),
  ],
};

Tip: TypeScript definitions

To provide information for the TypeScript about imported React-components from svg-files, you can manually add type declarations like this:

declare module '*.svg' {
  import type { ComponentType, SVGProps } from 'react';

  const Component: ComponentType<SVGProps<SVGSVGElement>>;

  export default Component;
}

Or you can use ready declarations from this package as described here: Type declarations