Skip to main content
​
JT-View-Exports-SVG.defaultIconProperties
object
An object containing default property values applied to SVG icons in the preview panel and developer tools.

​
Overview

The defaultIconProperties setting defines default values for various SVG and component properties. These properties are used when previewing and interacting with icons in the extension’s interface.

​
Default Values

The extension comes with the following default configuration: 
{
  "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"
  }
}

​
Available Properties

​
Size Properties

​
size
string
default:"28"
General size dimension for the icon. Often used by icon libraries as a unified size prop.
​
width
string
default:"28"
Width of the icon in pixels or other CSS units.
​
height
string
default:"28"
Height of the icon in pixels or other CSS units.

​
Color Properties

​
color
string
default:"#0a0a0a"
Primary color of the icon. Often used for single-color icons.
​
fill
string
default:"#0a0a0a"
Fill color for SVG paths and shapes.
​
stroke
string
default:"#0a0a0a"
Stroke (outline) color for SVG elements.
​
strokeColor
string
default:"#0a0a0a"
Alternative stroke color property, used by some icon libraries.
​
strokeWidth
string
default:"0.2"
Width of the stroke (outline) for SVG elements.

​
Styling Properties

​
className
string
default:""
CSS class name to apply to the icon component.
​
style
string
default:"{}"
Inline style object in JSON format for React/JSX components.
​
sx
string
default:"{}"
Style object for MUI (Material-UI) components, in JSON format.

​
State Properties

​
state
string
default:"false"
Custom state property that can be used for conditional rendering or icon variations.

​
Configuration Examples

​
Larger Icons with Blue Color

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "size": "32",
    "width": "32",
    "height": "32",
    "color": "#0066cc",
    "fill": "#0066cc"
  }
}

​
Material-UI Styling

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "size": "24",
    "sx": "{\"color\": \"primary.main\"}"
  }
}

​
Outlined Icons

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "fill": "none",
    "stroke": "#333333",
    "strokeWidth": "2",
    "strokeColor": "#333333"
  }
}

​
Custom Class Name

{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "className": "icon-default",
    "size": "24"
  }
}

​
Property Types

All property values are stored as strings. For object properties like style and sx, use JSON string format: 
{
  "style": "{\"marginRight\": \"8px\", \"display\": \"inline-block\"}"
}

​
Custom Properties

You can add custom properties beyond the defaults. The setting accepts additional properties through additionalProperties: 
{
  "JT-View-Exports-SVG.defaultIconProperties": {
    "size": "28",
    "customProp": "customValue",
    "dataTestId": "icon-component"
  }
}

​
Use Cases

  1. Framework-specific props: Configure properties that match your UI library (React, Material-UI, etc.)
  2. Team consistency: Ensure all developers preview icons with the same default properties
  3. Project theming: Match icon preview properties to your project’s design system
  4. Testing: Set specific properties for testing icon rendering

Build docs developers (and LLMs) love

Get started for freeTalk to us