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?

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 .