Clean Figma SVG Code
Into Pristine React Components.
Lumist Vector is a client-side parser that strips illustrator namespace wrappers, optimizes vector precision, and outputs highly extensible React components.
Namespace Sanitization
Instantly strip figma layout attributes, XML namespaces, sodipodi namespaces, and unneeded nested groupings from nested XML trees.
Coordinate Precision Clamping
Truncate coordinates with excessive decimal parameters to significantly decrease file sizes while maintaining exact path visual rendering.
React Normalization
Auto-convert kebab-case parameters like stroke-width to jsx strokeWidth, inject parent prop-spreading, and select your forwardRef preference.
Under the Hood
The front-end parsing architecture of Lumist Vector.
Client-Side DOM Sanitization
Vector leverages the browser's built-in `DOMParser` to load the SVG string directly into an sandboxed virtual document. This allows us to systematically strip, modify, and inspect nodes safely without standard server-side Node.js compilation.
Precision Coordinate Math
Figma often exports curves with highly redundant coordinates (e.g. `23.400000000000002`). Vector implements regex capture nodes that safely parse float values in path vectors, limiting precision boundaries to cut bundle file size while preventing clipping issues.
React Normalization Map
We maintain an optimized lookup dictionary translating complex XML namespace attributes into React JSX camelCase properties, so you can paste compiled modules directly into Next.js.
Component Signature Wrapping
Vector wraps your optimized SVGs dynamically. It handles options to export standard functional components or components with robust React `forwardRef` signatures, allowing animation libraries to hook into the canvas.
Frequently Asked Questions
Are my vector graphics uploaded to a remote server?
No. Vector is built with Lumist's local-first approach. All XML reading, AST purging, and JSX serialization are calculated entirely in memory inside your browser. No files or code snippets are ever transmitted.
Why should I strip width and height dimensions?
Hardcoded sizing attributes on root SVG nodes prevent CSS-driven layout calculations from styling icons properly. By stripping explicit sizing and forcing the container to rely on `viewBox`, your component scales natively to whatever parent boundaries you set.
How does precision coordinate clamping reduce file size?
Complex vector paths contain thousands of numerical parameters representing Bezier curve points. Restricting these calculations to 2 decimal places instead of 16 significantly cuts the underlying code characters, resulting in a lighter React bundle weight.