🎯 Your First SVG

Now that View Exports SVG is running, let's walk through your first real interaction with an SVG component.

This section shows how to:

• Locate an SVG component
• Preview it instantly
• Copy and use it in your code

---

🔍 Finding an SVG Component

After opening the extension, you'll see a grid containing all detected SVG components in your project.

Each item represents:

• An exported SVG-based component
• A live preview
• A set of quick actions

You don't need to open files or search manually.

---

👁 Previewing the Icon

1. Click on any icon in the grid.
2. The DevTools panel opens automatically (default behavior).
3. You'll see:
   • A live preview of the icon
   • The component rendered in real time
   • Default props applied

This allows you to visually confirm the icon before using it.

---

📋 Copying the Component Name

To use the icon in your code:

• Single click on the icon card → The component name is copied to your clipboard.

No guessing, no typos, no trial-and-error imports.

---

🧭 Next Steps

Usage Guide

Learn how to make the most of View Exports SVG features.

DevTools Panel

Explore the full-featured panel for managing, previewing, and editing icons.

SVG Support

Understand which SVG patterns and component structures are supported.

Settings

Customize the extension to fit your workflow.