Customizing Properties

The View Exports SVG playground provides a powerful environment to customize and preview your SVG icons with real-time property adjustments. This guide covers all customization options available in the DevTools panel.

Opening the Playground

The playground (DevTools panel) is where all icon customization happens.

Select an Icon

Click any icon in the main viewer to select it

Open DevTools

Click the DevTools icon in the editor title bar, or it may open automatically depending on your settings

View Live Preview

The selected icon appears in the playground with an interactive code editor

You can configure whether DevTools opens automatically on icon click using the JT-View-Exports-SVG.defaultClickToOpenDevTools setting.

Default Icon Properties

All icons start with default property values that you can customize globally in your VS Code settings.

Configuration

Add this to your settings.json:

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "className": "",
    "color": "#0a0a0a",
    "fill": "#0a0a0a",
    "height": "28",
    "size": "28",
    "state": "false",
    "stroke": "#0a0a0a",
    "strokeColor": "#0a0a0a",
    "strokeWidth": "0.2",
    "style": "{}",
    "sx": "{}",
    "width": "28"
  }
}

Property Descriptions

Property	Type	Default	Description
`className`	string	`""`	CSS class name(s) to apply
`color`	string	`"#0a0a0a"`	Primary color value
`fill`	string	`"#0a0a0a"`	Fill color for SVG paths
`height`	string	`"28"`	Icon height in pixels
`size`	string	`"28"`	Unified size (width and height)
`state`	string	`"false"`	Component state (varies by component)
`stroke`	string	`"#0a0a0a"`	Stroke color for SVG paths
`strokeColor`	string	`"#0a0a0a"`	Alternative stroke color property
`strokeWidth`	string	`"0.2"`	Width of strokes in SVG
`style`	string	`"{}"`	Inline CSS styles as JSON
`sx`	string	`"{}"`	MUI sx prop (if using Material-UI)
`width`	string	`"28"`	Icon width in pixels

These defaults apply to all icons when they first load in the playground. You can override them per-icon during your session.

Adjusting Properties in the Playground

The playground provides two ways to customize icons:

Visual Controls

Background Color Picker

Adjust the playground background to preview icons on different surfaces:

Locate Color Picker

Find the background color control in the playground panel

Select Color

Click the color picker to choose a background color

Preview

The icon preview updates instantly with the new background

Reset

Use the reset button to return to the default background color

Background color changes only affect the playground preview and don’t modify the actual SVG component.

Expand/Collapse Code Editor

Toggle the code editor visibility to maximize your preview space:

Click the expand/collapse button to show or hide the code editor
The icon preview remains visible in both states
Editor state persists during your session

Code Editor

The integrated Monaco editor provides full code editing capabilities:

Features

Syntax Highlighting: JSX/TSX syntax support
IntelliSense: Auto-completion for component props
Real-Time Preview: Changes reflect immediately in the preview
Theme Sync: Matches your VS Code theme automatically
Error Detection: Highlights syntax errors

Editing Component Props

Locate Component Tag

Find the component in the editor (e.g., <IconArrowRight />)

Add or Modify Props

Add props inline:

<IconArrowRight 
  size="32"
  color="#ff0000"
  strokeWidth="0.5"
/>

View Live Preview

The preview updates in real-time as you type

Copy Modified Code

Use the copy button to copy your customized code

Reset Code

Revert all changes to the original component:

Click the reset button in the playground toolbar
The editor restores the original component code
The preview updates to show the default appearance

Example: Customizing an Icon

Original Code:

<IconArrowRight />

Customized Code:

<IconArrowRight 
  size="48"
  color="#3b82f6"
  strokeWidth="1"
  className="icon-arrow"
  style={{ transform: 'rotate(90deg)' }}
/>

Result: A 48px blue arrow rotated 90 degrees with thicker strokes and a custom class.

Common Customization Patterns

Size Adjustments

{/* Small icon */}
<IconArrowRight size="16" />

{/* Medium icon (default) */}
<IconArrowRight size="28" />

{/* Large icon */}
<IconArrowRight size="48" />

{/* Custom width and height */}
<IconArrowRight width="32" height="24" />

Color Variations

{/* Primary color */}
<IconArrowRight color="#0a0a0a" />

{/* Brand color */}
<IconArrowRight fill="#3b82f6" stroke="#3b82f6" />

{/* Transparent fill with visible stroke */}
<IconArrowRight fill="none" stroke="#000" strokeWidth="1" />

Stroke Customization

{/* Thin stroke */}
<IconArrowRight strokeWidth="0.1" />

{/* Medium stroke */}
<IconArrowRight strokeWidth="0.5" />

{/* Thick stroke */}
<IconArrowRight strokeWidth="2" />

CSS and Styling

{/* Inline styles */}
<IconArrowRight 
  style={{ 
    transform: 'rotate(45deg)',
    opacity: 0.8,
    cursor: 'pointer'
  }} 
/>

{/* CSS classes */}
<IconArrowRight className="icon-button icon-primary" />

{/* MUI sx prop */}
<IconArrowRight 
  sx={{ 
    color: 'primary.main',
    '&:hover': { color: 'primary.dark' }
  }} 
/>

Copy Customized Code

Once you’ve customized an icon, copy the code for use in your project:

Customize Icon

Adjust properties in the code editor

Click Copy Button

Click the copy icon in the playground toolbar

Paste in Project

Paste the customized JSX into your component

You’ll see a success notification: “Copied to clipboard”

Property Auto-Completion

The Monaco editor provides IntelliSense for common SVG and React props:

Type <IconName and press Ctrl+Space to see available props
Start typing a prop name for filtered suggestions
Use arrow keys and Enter to select a suggestion

Theme Integration

The playground automatically syncs with your VS Code theme:

Automatic Theme Detection

Light Themes: Light editor background, dark text
Dark Themes: Dark editor background, light text
High Contrast: Enhanced contrast for accessibility

Manual Theme Reload

If the theme doesn’t sync properly:

Click the Reload Theme button in the toolbar
Or run the command: View Exports SVG: Reload Theme

DevTools Settings

Auto-Open DevTools

{
  "JT-View-Exports-SVG.defaultClickToOpenDevTools": true
}

true (default): DevTools opens automatically when you click an icon
false: DevTools remains closed until you manually open it

Default Expand State

{
  "JT-View-Exports-SVG.defaultExpandAll": false
}

true: All component groups expand by default
false (default): Groups start collapsed

Advanced Customization

Custom Properties

If your components accept custom props, you can add them in the defaultIconProperties:

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "size": "28",
    "color": "#0a0a0a",
    "variant": "outline",
    "animated": "false",
    "customProp": "value"
  }
}

All properties are strings and can be any valid JSON value.

Style and Sx Props

For complex styling:

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "style": "{\"transform\": \"rotate(0deg)\", \"opacity\": 1}",
    "sx": "{\"color\": \"primary.main\", \"fontSize\": \"1.5rem\"}"
  }
}

JSON strings must be properly escaped when defining default values in settings.

Troubleshooting

Properties not applying

Issue: Changes in the editor don’t reflect in the preview.Solutions:

Check for syntax errors in the JSX
Ensure prop names match what your component accepts
Verify the component properly handles the props you’re passing

Editor theme not matching VS Code

Issue: The Monaco editor theme doesn’t match your VS Code theme.Solutions:

Click the Reload Theme button
Run command: View Exports SVG: Reload Theme
Restart the extension

Default properties not loading

Issue: Icons don’t use your configured default properties.Solutions:

Verify your settings.json syntax is valid JSON
Reload VS Code window
Check that property names match exactly (case-sensitive)

Next Steps

Configuration

Explore all extension settings in detail

Viewing Icons

Learn how to open and navigate the viewer

Get Started

Core Features

Usage Guide

Configuration

Opening the Playground

Default Icon Properties

Configuration

Property Descriptions

Adjusting Properties in the Playground

Visual Controls

Background Color Picker

Expand/Collapse Code Editor

Code Editor

Features

Editing Component Props

Reset Code

Common Customization Patterns

Size Adjustments

Color Variations

Stroke Customization

CSS and Styling

Copy Customized Code

Property Auto-Completion

Theme Integration

Automatic Theme Detection

Manual Theme Reload

DevTools Settings

Auto-Open DevTools

Default Expand State

Advanced Customization

Custom Properties

Style and Sx Props

Troubleshooting

Next Steps

Configuration

Viewing Icons

Build docs developers (and LLMs) love

Get Started

Core Features

Usage Guide

Configuration

​Opening the Playground

​Default Icon Properties

​Configuration

​Property Descriptions

​Adjusting Properties in the Playground

​Visual Controls

​Background Color Picker

​Expand/Collapse Code Editor

​Code Editor

​Features

​Editing Component Props

​Reset Code

​Common Customization Patterns

​Size Adjustments

​Color Variations

​Stroke Customization

​CSS and Styling

​Copy Customized Code

​Property Auto-Completion

​Theme Integration

​Automatic Theme Detection

​Manual Theme Reload

​DevTools Settings

​Auto-Open DevTools

​Default Expand State

​Advanced Customization

​Custom Properties

​Style and Sx Props

​Troubleshooting

​Next Steps

Configuration

Viewing Icons

Build docs developers (and LLMs) love

Opening the Playground

Default Icon Properties

Configuration

Property Descriptions

Adjusting Properties in the Playground

Visual Controls

Background Color Picker

Expand/Collapse Code Editor

Code Editor

Features

Editing Component Props

Reset Code

Common Customization Patterns

Size Adjustments

Color Variations

Stroke Customization

CSS and Styling

Copy Customized Code

Property Auto-Completion

Theme Integration

Automatic Theme Detection

Manual Theme Reload

DevTools Settings

Auto-Open DevTools

Default Expand State

Advanced Customization

Custom Properties

Style and Sx Props

Troubleshooting

Next Steps