Setup @neodx/svg with Next.js

Example repository

You can visit apps/examples/svg/next project in our repository to see how it works.

WARNING

We don't provide a specific adapter for Next.js, so @neodx/svg/webpack plugin will be used.

1. Configure your assets

Add @neodx/svg/webpack plugin to next.config.js and describe your SVG assets location and output.

next.config.js

const svg = require('@neodx/svg/webpack');

module.exports = {
  webpack: (config, { isServer }) => {
    // Prevent doubling svg plugin, let's run it only for client build
    if (!isServer) {
      config.plugins.push(
        svg({
          inputRoot: 'src/shared/ui/icon/assets',
          output: 'public/sprites',
          fileName: '{name}.{hash:8}.svg',
          metadata: 'src/shared/ui/icon/sprite.gen.ts',
          group: true
        })
      );
    }
    return config;
  }
};

2. Create your Icon component

Visit our Writing Icon component guide to see detailed instructions for creating an Icon component.

A simple variant of the Icon component will look like this:

import clsx from 'clsx';

export function Icon({ name, className, ...props }) {
  return (
    <svg
      className={clsx('select-none fill-current inline-block text-inherit box-content', className)}
      focusable="false"
      aria-hidden
      {...props}
    >
      <use href={`/sprites/sprite.svg#${name}`} />
    </svg>
  );
}

3. Use your Icon component

import { Icon } from '@/shared/ui/icon';

export function SomeComponent() {
  return <Icon name="common:groups" />;
}

Next steps

• Read about Grouping icons and Generating metadata
• Learn about Writing Icon component in detail