✨ React SVG Viewer

React SVG Viewer is a powerful Visual Studio Code extension that allows you to instantly display and preview React SVG components directly within your editor.

🚀 Features

• 🛠️ Supports React DOM and React Native: Works with both React DOM and React Native projects, enabling SVG preview across platforms.
• 🔧 JSX and TSX Support: Full support for both .jsx and .tsx files, making it a perfect tool for modern React development.
• 🌐 Global Props Support: Define global props for your SVG components via the configuration for customization across projects.

💡 Usage

Show React SVG Components (Current File)

1. Open a React file containing SVG components (either JSX or TSX).
2. Run the command React SVG Viewer: Show React SVG Components (Current File) from the command palette (Cmd+Shift+P or Ctrl+Shift+P).
3. Instantly view the rendered SVG components in a webview panel within VSCode.

Show React SVG Components (Config Paths)

1. In your VSCode settings (settings.json), add the paths to the React SVG files using the react-svg-viewer.paths property:

   {
     "react-svg-viewer.paths": [
       "src/components/icons.jsx",
       "src/assets/svgs/**/*.tsx"
     ]
   }
   

2. Run the command React SVG Viewer: Show React SVG Components (Config Paths) from the command palette.
3. The extension will load and display all React SVG components from the specified paths.

🛠️ Configuration Options

• react-svg-viewer.paths: An array of paths to search for React SVG components. You can use glob patterns to include multiple files or directories.

  {
     "react-svg-viewer.paths": ["src/components/icons/*.tsx", "src/shared/svgs/**/*.jsx"]
  }
  

• react-svg-viewer.globalProps: A set of global props that will be applied to all SVG components in the specified files. This is useful for adding default attributes like size or color:

  {
     "react-svg-viewer.globalProps": {
       "color": "#ff0000"
     }
  }
  

📄 Supported File Types

• JavaScript (.js)
• TypeScript (.ts)
• JSX (.jsx)
• TSX (.tsx)