Preview SVG inside JavaScript in VSCode

Question

Is it possible to preview SVG inside JavaScript in VSCode?

There are plugins that can preview SVG files in VSCode, but what if they're inside JavaScript or React components? Or if there's a list of compound paths in an object.

There are also tools like Storybook but what if you just want to quickly preview some SVGs? If they're inside JS they're probably dynamic (take props like fill, color, etc), but could I then just preview them with the defaults (if provided), or a simple way to provide them props?

Any VSCode plugin that does that? How do people tackle this?

Sandon

hi @zok! have you found a solution for this yet? – Gnome

Answer 1

I'm using this extension to preview svg files inside vscode.

In your case, if the whole svg code is embedded in js script file, you can copy the code and paste it in an empty editor you don't need to save it, you just need to specify the type as svg then run the command Preview SVG.

Epidote

Answer 2

This extension allows you to preview inline SVGs. It works with js files and also with SVGs inside strings.

It doesn't update automatically when you change the svg. But you can bind the command to a keyboard shortcut, and it gets pretty fast.

Bourque