SVG Component — Securely render and style any SVG code

Features:

• Secure Rendering: Uses a custom parser and sanitizer to safely convert SVG code into React elements without dangerouslySetInnerHTML.

• Theme Overrides: Automatically detects unique colors in your SVG and lets you override them with Framer’s color pickers.

• Dual-Mode Styling: Seamlessly toggle between "Solid" (fill) and "Outline" (stroke) logic for any vector.

• Auto-Layout Correction: Automatically injects ViewBoxes and handles intrinsic dimensions so your icons never look broken or distorted.

• Visual Weight Balance: Use the "Visual Scale" slider to manually normalize icon sizes across different sets.

How to use:

1. Copy the SVG code from your preferred icon library or design tool.

2. Paste it into the SVG Code field in the properties panel.

3. Use the Colors toggle to choose between the original SVG colors or your own custom theme overrides.

4. Adjust the Visual Scale to ensure the icon sits perfectly within your layout.