turbopack-inline-svg-loader

A Turbopack loader for importing SVGs as optimized data URIs with dimensions. The imported object has the same shape as external image ({ src, width, height }) and can be passed directly to the Next.js <Image /> component.

Example

import myIcon from './icon.svg';

return <Image src={myIcon} alt="my icon" />;

/*
myIcon is an object like:
{
  src: 'data:image/svg+xml,...',
  width: 32,
  height: 32,
}
*/

Why inline SVG?

Inlining small SVGs is beneficial because it eliminates additional HTTP requests, resulting in faster page loads and instant rendering. The slight increase in JavaScript bundle size is usually outweighed by the overall performance gains.

Why not SVGR?

Check out this article.

Installation

Install via any package manager:

# NPM
npm i -D turbopack-inline-svg-loader

# PNPM
pnpm add -D turbopack-inline-svg-loader

# Yarn
yarn add -D turbopack-inline-svg-loader

Configuration

Add the loader configuration to next.config.js. Since Next.js v16, you can conditionally apply a loader only to SVGs smaller than a given size:

const nextConfig = {
  turbopack: {
    rules: {
      '*.svg': {
        loaders: ['turbopack-inline-svg-loader'],
        condition: {
          content: /^[\s\S]{0,4000}$/, // <-- Inline SVGs smaller than ~4Kb (since Next.js v16)
        },
        as: '*.js',
      },
    },
  },
  // ...
};

Usage

Statically import an SVG file and pass it to the <Image/> component:

import Image from 'next/image';
import myIcon from './icon.svg';

export default function Page() {
  return <Image src={myIcon} alt="my icon" />;
}

How to change size?

You can change the image size via the CSS style prop or className:

// Set size via style
return <Image src={myIcon} style={{ width: 64, height: 64 }} alt="my icon" />;

// Set size with Tailwind
return <Image src={myIcon} className="size-64" alt="my icon" />;

How to change color?

For monochrome icons, you can change the color using the CSS mask technique. To achieve this, create a helper component Icon.tsx that renders the SVG as a mask:

/**
 * A component for rendering monochrome SVG icons using the current text color.
 */
import { type ComponentProps } from 'react';
import { type StaticImageData } from 'next/image';

type IconProps = Omit<ComponentProps<'img'>, 'src'> & {
  src: StaticImageData;
};

const EMPTY_SVG = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E`;

export default function Icon({ src, width, height, style, ...props }: IconProps) {
  return (
    <img
      width={width ?? src.width}
      height={height ?? src.height}
      src={EMPTY_SVG}
      style={{
        ...style,
        backgroundColor: `currentcolor`,
        mask: `url("${src.src}") no-repeat center / contain`,
      }}
      {...props}
    />
  );
}

Now you can render colored icons:

import Icon from './Icon';
import myIcon from './icon.svg';

// Set color with style
return <Icon src={myIcon} style={{ color: 'green' }} />;

// Set color with Tailwind
return <Icon src={myIcon} className="text-green-600" />;

TypeScript

By default, Next.js imports *.svg assets as the any type to avoid conflicts with SVGR. To make *.svg imports behave like other images ({ src, width, height }), create the following svg.d.ts file in the project root:

declare module '*.svg' {
  const content: import('next/image').StaticImageData;
  export default content;
}

and add it to tsconfig.json before next-env.d.ts:

"include": [
+ "svg.d.ts",
  "next-env.d.ts",
  ...
],

Now your SVG imports will be resolved as { src, width, height }.

References

Here are some great resources to dive deep into the rabbit hole of SVGs in modern frontend development:

• A guide to using SVGs in React
• Breaking Up with SVG-in-JS
• Introducing @svg-use

Feedback

Feel free to share your feedback and suggestions in the issues.

License

MIT