An SWC enabled solution for Inline SVGs

[boennemann]

Turning this into a separate discussion from: #30174 (comment)

Seeing lots of upvotes, but I'm not sure it gets in front of people who could help.

I feel like I am missing something very obvious, but I can't find out what, so please excuse me asking:
We're down to inline-react-svg being our last babel plugin. Inlining SVGs is necessary to modify the SVGs with CSS/props as far as I know. It's very important for us to use SVGs for icons/interface components, and to be able to pretty much just copy them from Figma.
Now I only see a few people in here using this plugin. I don't see any mention on the official Next.js docs how to use SVGs, other than <Image src="/icon.svg" />.
It's also not mentioned in the original post as something being on the roadmap for the swc based compiler.
That leaves me wondering, whether we're doing something completely outdated. How are you dealing with icons, if not SVGs? Is this really not covered by Next.js (without babel/webpack) somewhere?
How would we make this work with swc?
The only option I see right now is converting the svgs to jsx and then inlining them into the source code. Is that really the way to go?
Helpful for any hint. We really want to move to swc 🤞

[kylemh]

see #26167

[OscarBarrett]

Using @svgr/webpack and the following config works without babel:

config.module.rules.push({
  test: /\.svg$/,
  issuer: /\.tsx?$/,
  include: [options.dir],
  use: [
    'next-swc-loader',
    {
      loader: '@svgr/webpack',
      options: { babel: false }
    }
  ],
});

In your component:

import Image from './image.svg';

....
<Image />

In a skeleton app with one svg import I'm not seeing a performance hit to builds. Not sure how well it scales.

[elliott-w]

This no longer works in Next.js v13 (I'm on 13.0.2), getting:

TypeError: The "from" argument must be of type string. Received undefined

@kylemh any ideas why?

My current workaround is setting the config to:

config.module.rules.push({
  test: /\.svg$/,
  issuer: /\.tsx?$/,
  include: [options.dir],
  use: ['@svgr/webpack']
})

But I'm fairly sure it now uses babel to compile those .tsx files that contain .svg imports rather than swc.

[kylemh]

I never tried using next-swc-loader with @svgr/webpack. 🤷‍♂️

[fakundo]

This no longer works in Next.js v13 (I'm on 13.0.2), getting:

TypeError: The "from" argument must be of type string. Received undefined

Seems I found a workaround by using defaultLoaders from options.

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

For me options.defaultLoaders.babel actually returns configured next-swc-loader.

[vincentvella]

I was still having some issues with the above so I created a plugin that's easy to use with next-compose-plugins:

const withSVGR = (nextConfig) => {
  nextConfig.webpack = (config, options) => {
    config.module.rules.map((rule) => {
      if (rule.test !== undefined && rule.test.source.includes('|svg|')) {
        rule.test = new RegExp(rule.test.source.replace('|svg|', '|'));
      }
    });
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    return config;
  };
  return nextConfig;
};

[LeVuMinhHuy]

you are my hero @fakundo !

[rtatarinov]

@fakundo @OscarBarrett @elliott-w it seems any of solution doesn't work with 13.4.3. When I use next-swc-loader I still have TypeError: The "from" argument must be of type string. Received undefined. Any other config returns You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Any workaround to fix it?

[webfoe]

I use nx, the error I was getting: Invalid tag: data:image/svg+xml;base64...
and only the following worked for me:

1. move the config to a custom plugin (thanks @vincentvella);
2. put the plugin after withNx (this was crucial);

no extra workarounds were necessary in my case, v14.0.4;

const withSvgr = (nextConfig) => {
  nextConfig.webpack = (config) => {
    config.module.rules.push({
      test: /\.svg$/i,
      use: ['@svgr/webpack']
    })
    return config
  }
  return nextConfig
}

const nextConfig = {
  nx: {
    svgr: true // doesn't seem to affect anything
  },
  //
}

const plugins = [
  withNx,
  withSvgr
]

module.exports = composePlugins(...plugins)(nextConfig)