Svg - React (SvgR)

1 - About

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

3 - Steps

3.1 - Installation


yarn add @svgr/webpack -dev

3.2 - Configuration

3.2.1 - 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;
    },
};

3.2.2 - 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" />

4 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap