How to svg icon systems in next.js: from export to production component
- Step 1Export and clean icons from Figma — In Figma, select all icon frames and export as SVG. Run them through the JAD Metadata Scrubber and Minifier. Store cleaned SVGs in src/assets/icons/.
- Step 2Generate components with @svgr — Configure .svgrrc with typescript: true, svgo: true, ref: true. Run npx svgr --out-dir src/components/icons src/assets/icons. Each icon becomes a typed TSX component.
- Step 3Expose via typed barrel export — Generate index.ts with: export { default as SearchIcon } from './SearchIcon'. Add this to your package.json exports field for consumers to import { SearchIcon } from '@company/icons'.
Frequently asked questions
Should Next.js icons be Server Components or Client Components?+
SVG icon JSX components are pure rendering — no hooks, no interactivity. They work as Server Components by default, which is better for performance. Only add 'use client' if you need onClick handlers.
How do I handle icon sizing in a design system?+
Accept a size prop that maps to Tailwind classes or CSS custom properties: <SearchIcon size={24} /> should set width and height on the SVG element. Provide sensible defaults.
Can I use the same icon library across React Native?+
Not directly — React Native uses react-native-svg, which has slightly different prop names. You can write a shared SVG component that outputs the appropriate variant for web vs. native.
How do I automate icon regeneration when Figma designs change?+
Use the Figma API (figma.com/api) to detect changed frames on a trigger (webhook or cron). Export changed icons, run the JAD cleanup pipeline, and regenerate components via @svgr in a GitHub Action.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.