Description
A tool that takes raw SVG code and outputs optimized variants for different developer needs: a clean React component, a CSS Data URI, or a CSS Mask.
Rationale
Frontend developers constantly move SVGs from design tools into code. Automating the cleanup (removing metadata) and conversion to JSX/CSS saves significant manual effort.
Expected Behavior
Input: Raw SVG string or file upload.
Output Tabs:
React: Optimized SVG wrapped in a functional component.
CSS: background-image: url("data:image/svg+xml,...").
Mask: mask-image syntax for icon styling.
Options to set default width, height, and "currentColor" for fills.
Implementation Tasks
Create svgConverter.tsx.
Integrate svgo (if possible in browser) or basic regex-based cleanup.
Implement conversion logic for Data URIs.
Description
A tool that takes raw SVG code and outputs optimized variants for different developer needs: a clean React component, a CSS Data URI, or a CSS Mask.
Rationale
Frontend developers constantly move SVGs from design tools into code. Automating the cleanup (removing metadata) and conversion to JSX/CSS saves significant manual effort.
Expected Behavior
Input: Raw SVG string or file upload.
Output Tabs:
React: Optimized SVG wrapped in a functional component.
CSS: background-image: url("data:image/svg+xml,...").
Mask: mask-image syntax for icon styling.
Options to set default width, height, and "currentColor" for fills.
Implementation Tasks
Create svgConverter.tsx.
Integrate svgo (if possible in browser) or basic regex-based cleanup.
Implement conversion logic for Data URIs.