Install the svgMagic Package

user@system path %pnpm i svgmagic

1. To install svgMagic, run the installation command for the package manager of your choice in your project directory:

npm install svgmagic

2. Run the interactive svgm-setup interactive post-install script

svgm-setup

• If desired, change your default directory.
• If you choose not to scaffold the sample .svg files you will need to point your component into a directory with your .svg files. Running the script and choosing to copy the sample .svg files should not overwrite your existing files, unless you have matching filenames and have edited your files, in which case the samples will overwrite.
• Always save your artwork outside of your project directory to back it up, or use a source manager just in case.

Project Configuration

For information on preparing your .svg file and SVG code for use with SVGM to dynamically apply CSS styles like currentColor, see Basic Styling

Ensure SVGR is Installed

SVGM uses SVGR to transform svg into React components. SVGR is a peer dependency and should be installed automatically. If not, you can install it manually:

 npm install @svgr/webpack

Configure SVGR in Next.js

Add the following configuration to your next.config.js to enable SVGR:

module.exports = {
    webpack(config) {
        config.module.rules.push({
            test: /.svg$/,
            use: ['@svgr/webpack'],
        });
        
        return config;
    },
};