Setup @neodx/svg
with Vite
Example repository
You can visit apps/examples/svg/vite-react 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.
typescript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svg from '@neodx/svg/vite';
export default defineConfig({
plugins: [
react(),
svg({
inputRoot: 'src/shared/ui/icon/assets',
output: 'public/sprites',
fileName: '{name}.{hash:8}.svg',
metadata: 'src/shared/ui/icon/sprite.gen.ts'
})
]
});
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:
tsx
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
tsx
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