Using @neodx/svg with Figma (via @neodx/figma)

This guide explains how to export SVG icons from Figma using @neodx/figma and integrate them with @neodx/svg.

1. Install @neodx/figma

npm install -D @neodx/figma
# or
yarn add -D @neodx/figma

2. Configure your Figma export

Create a figma.config.js (or .cjs) file in your project root. Example:

const { formatExportFileName } = require('@neodx/figma');

/**
 * @type {import('@neodx/figma').Configuration}
 */
module.exports = {
  export: {
    fileId: 'YOUR_FIGMA_FILE_ID_OR_LINK',
    output: 'src/shared/ui/icon/assets',
    collect: {
      target: [
        { type: 'CANVAS', filter: 'Icons' },
        { type: 'COMPONENT', filter: /32\/.*/ }
      ]
    },
    // Optional: customize file names
    getExportFileName({ format, node }, root) {
      return formatExportFileName(`${node.source.name}.${format}`);
    }
  }
};

For advanced collection and naming, see the figma example on GitHub and export-file-assets example on GitHub.

3. Export icons from Figma

Get your Figma personal access token and run:

yarn figma export --token <your_token>
# or
npx figma export --token <your_token>

This will export SVGs to src/shared/ui/icon/assets (or your configured output).

4. Use exported SVGs with @neodx/svg

Configure @neodx/svg in your vite.config.ts to use the exported SVGs:

import svg from '@neodx/svg/vite';

export default defineConfig({
  plugins: [
    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
    })
  ]
});

No manual optimization is needed—@neodx/svg handles it for you.

5. Advanced usage

See the Figma docs and real-world example on GitHub for advanced config, filtering, and automation.