DOCSEARCHbyAlgolia
Submit Docs

View Exports SVG Documentation

website·Indexed 29 days ago

https://view-exports-svg.vercel.app

A Visual Studio Code extension designed to help developers discover, preview, and manage SVG component libraries directly within the editor. Features include workspace scanning, a DevTools panel for real-time inspection and editing, and a playground for SVG components.

Tokens
9.8K
Snippets
34
Records
103
Agent score
64%

What's inside View Exports SVG

  1. Overview of View Exports SVG benefits

    View Exports SVG is a VS Code extension designed to reduce friction when working with large SVG component libraries. It eliminates the need to manually search through files or guess component names by providing instant visibility and control over SVG components directly within the editor. Key capabilities include:

    • Productivity: Automatic discovery of all exported SVG components across the workspace and one-click copying of component names and snippets.
    • Interactive Development: A real-time playground to edit component properties and test sizes, colors, and props with live visual feedback.
    • Organization: Access to favorites, recently used icons, and grouping based on file/folder naming conventions.
    • Integration: Native VS Code experience with smart caching for large codebases and support for over 15 languages.

  2. Overview of View Exports SVG extension

    View Exports SVG is a Visual Studio Code extension that allows developers to discover, preview, and manage SVG components exported from JavaScript, JSX, TypeScript, and TSX files. It uses AST analysis to scan the workspace and displays detected SVG components in a VS Code WebView, enabling users to preview, copy, export, and edit props without manually running the code.

  3. Overview of View Exports SVG extension

    View Exports SVG is a Visual Studio Code extension designed to help developers discover, preview, and manage SVG component libraries within front-end projects. It provides a unified, editor-native interface to explore SVG components without leaving the IDE, which is particularly useful for projects with large icon sets.

  4. Overview of View Exports SVG for Visual Studio Code

    View Exports SVG is a Visual Studio Code extension designed to solve the problem of managing massive SVG component libraries (e.g., files with thousands of lines of SVG components). It provides a fast, visual, and editor-native way to explore SVG exports, eliminating the need for a repetitive 'import → compile → check' cycle to find the correct icon variant.

  5. Extract SVG components from source files

    The tool provides an analysis model capable of extracting SVG components from JavaScript (.js), JSX, TypeScript (.ts), and TypeScript React (.tsx) files. It supports the following export patterns:

    • Exported function declarations: export function functionName() {}
    • Exported variable declarations: export const variableName = value;

  6. Explore and test SVG components using the DevTools Panel

    The extension provides a dockable DevTools panel containing two primary tools: the Component Explorer, which displays SVG components with thumbnails and names for quick copying/exporting, and the Interactive Playground, which allows real-time editing of component props to see instant rendered output.

  7. Set up development environment for View Exports SVG contributors

    The project has migrated to a monorepo architecture using pnpm workspaces. Contributors must use pnpm and ensure they are running Node.js version 22.x or higher. After cloning the repository, a setup command must be run to initialize the environment.
    # Initial setup
pnpm setup

# Development commands
pnpm dev:webview
pnpm dev:extension

  8. Understand SVG support criteria for View Exports SVG

    An SVG is considered supported by the extension if it can be detected via static analysis (AST), identified as a valid exported component, and safely rendered within a VS Code WebView. The extension only scans files with the following extensions: .js, .jsx, .ts, and .tsx.

  9. Explore SVG components using View Exports SVG features

    View Exports SVG provides several tools to manage SVG assets in a project:

    • Workspace Scanning: Automatically detects all exported SVG components across the entire project.
    • Advanced DevTools Panel: A dockable panel for browsing and managing components.
    • Interactive Playground: An integrated code editor to edit and preview SVG components in real-time.
    • Quick Access: A system for Favorites and Recent icons to speed up retrieval.
    • Integration: Launch the viewer via the Command Palette, right-click context menu, or drag-and-drop.

  11. Use the DevTools panel to inspect and edit SVG components

    The DevTools panel is an advanced workspace within Visual Studio Code used to visually validate icons, experiment with props and styles, and inspect component metadata in real time. It consists of two main sections: the Playground (interactive editor and live preview) and Component Info (read-only metadata).

  12. Understand SVG support requirements for View Exports SVG

    For an SVG to be supported by the View Exports SVG extension, it must be detectable via static analysis (AST), identified as a valid exported component, and safely renderable within a VS Code WebView. The extension only scans files with the following extensions: .js, .jsx, .ts, and .tsx. Files like .svg or .html are ignored.