Svg - React (SvgR)

About

Svgr is a library that transforms a svg file into a React component

Steps

Installation

yarn add @svgr/webpack -dev

Configuration

Nextjs

For nextjs / webpack adapted from svgr doc

module.exports = {
    /* config options here */
    webpack(config) {

        // Doc
        // https://react-svgr.com/docs/webpack/
        config.module.rules.push({
            test: /\.svg$/,
            issuer: {
                // Strict these svg as component only for svgs that are imported from js / ts files. 
                // It allows to configure other behaviour for svgs that are imported from other file types (such as .css)
                test: /\.(js|ts)x?$/,
            },
            // Passing options
            use: [
                {
                    loader: '@svgr/webpack',
                    // https://react-svgr.com/docs/options/
                    options: {
                        native: true,
                        replaceAttrValues: { old: 'new' }
                    },
                },
            ],
        });

        return config;
    },
};

Usage

import StarIcon from './star.svg';

With material ui, you can wrap it up in a SvgIcon

<SvgIcon component={StarIcon} viewBox="0 0 600 476.6" />

Documentation / Reference


Powered by ComboStrap