Setup @neodx/svg with Vite

Example repository

You can visit "examples/svg-vite" project in our repository to see how it works.

1. Configure your assets

Add @neodx/svg/vite plugin to vite.config.ts and describe your svg assets location and output.

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svg from '@neodx/svg/vite';

export default defineConfig({
  plugins: [
    react(),
    svg({
      // A "root" directory will be used to search for svg files
      root: 'assets/icons',
      output: 'public'
    })
  ]
});

2. Create your Icon component

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

The simplest variant of 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={`/sprite.svg#${name}`} />
    </svg>
  );
}

3. Use your Icon component

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

export function SomeComponent() {
  return <Icon name="my-icon-name" />;
}

Next steps

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