What is the right way to use SVG icons with Next.js ?

[chawax]

Summary

Hi,

We use Next.js in SSG mode to generate a static site. We have a lot of SVG icons in our application. We use svgr configuration to include them as React components. And we have a generic Icon component with a name props to include icons in our pages an easy way.

Something like this :

<Icon name="myIcon" size="small" color="primary" />

But this way all icons are bundled in JS files so app weight comes heavy.

Is there a way to have tree shaking for this and have only the icons included in every page ?

I also thought about using SVG as standard images and using Next.js Image component, but it makes it more complicated to deploy icons (we want to share these icons as a NPM library) and I am not sure about performance (many requests).

Any good practice about SVG here ?

Additional information

No response

Example

No response

[icyJoseph]

I think in this case you wanna do a sort of, inversion of control pattern (pardon the bad naming):

const StyledIcon = ({ icon, size, color }) => {
  const classname = getStyles({size, color});
  
  const Icon = icon // or in the parameters: ({ icon: Icon, size, color}) => etc etc
   
  return <Icon className={className} />;
}

So now your component is agnostic to the SVG injected in, AKA, the list of SVG icons doesn't have to be included here. Instead you can import them where you need them.

// Purchase.tsx
import { Cart } from 'somewhere-in-the-project';

<Button><StyledIcon icon={Cart} size="small" color="primary" /> Purchase</Button>

You kind of give up a bit of control, because, there's no telling what type of icons end up in element, but this way you'd be able to break apart the SVG import monolith.

Alternatively, dynamic is another escape-hatch, where every icon would be its own bundle...

[eric-gitta-moore]

Yes, we have the same idea. Are there any best practices for using svg in nextjs.

I recently tried using svg-sprite-loader and unfortunately it failed. I can't get the plugin to extract all the icons used and inject the svg into the html.

Found that someone had tried it before, there was an npm package called next-svg-sprites. But stopped updating with two years ago. I also tried it with next14, and it apparently didn't work.

However, the vercel website also uses svgr, filling svg directly into html.

---

I've been trying to figure this out for hours. I'm starting to see things now. Why didn't vercel use svg sprite? And svg-sprite-loader and @svgr/webpack don't have the same number of downloads. Why do people prefer svgr? I think there are the following aspects

1. svgr uses the svgo tool to compress the original svg, which is actually not much more than a few characters
2. If the situation is extreme. If there are billions of identical svg in a table, the html will grow. At this time, sprite is dominant
3. If the table is a lazy component based on 2, you're wasting some traffic loading useless svg
4. If, on a basis of 3, this table has billions of different svgs and is a lazy component, it will waste more traffic loading useless svg

So in fact, the simpler the better

In fact, I think sprite has another solution that should consistently outperform svgr: Cluster svg by chunk.

However, coding the webpack plugin will become more difficult. It should work in theory.

---

Look at vue's svg scheme, except for svg-sprite-loader. There are also unplugin-icons, vite-plugin-svg-icons. In terms of the number of stars, unplugin-icons win, and unplugin-icons also directly insert svg code into html

ref: https://github.com/unplugin/unplugin-icons/blob/main/examples/README.md

[ivanmeda993]

try with "@svgr/webpack" and in next.config add

  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "@svgr/webpack",
          options: {
            icon: true,
          },
        },
      ],
    });

    return config;
  },

[Artz8489]

Worked for me

[ornakash]

Thanks - it doesnt work anymore for nextjs 16, do you know why?

[icyJoseph]

If you upgraded, you are likely running on Turbopack now. There's a way to do this in Turbopack, let me fetch it for ya.

[icyJoseph]

IIRC something like this in your Next Config file ought to do the trick. Please report back 🙏

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        as: '*.js',
        loaders: ['@svgr/webpack'],
      },
    },
  },
}

[ornakash]

IIRC something like this in your Next Config file ought to do the trick. Please report back 🙏

module.exports = {
  turbopack: {
    rules: {
      '*.svg': {
        as: '*.js',
        loaders: ['@svgr/webpack'],
      },
    },
  },
}

Thanks for the super quick response, it works perfectly!

[robahtou]

Had the exact same issue with our SVGs. Our solution was to use sprites. And the sprites would be 'per page' instead of having them ALL in a single sprite. Our icon signature is <Icon name="down-chevron">. And to change the styles we either throw in a className or styles attribute.