Vscode API - Custom View Container Icon

Question

I'm wanting to use an SVG for the viewcontainer part of my VS Code extension.

I've been given some PNG files to use, but unfortunately:

When just using 32x32 PNG files, the icons always show up as a blank white square in the activity bar, and if used as SVG the images don't scale properly to the container in the activity bar.

It's as though they are "zoomed in" on if using the SVG versions.

Anyone have tips or tricks to suggest working around this?

rioV8 · Accepted Answer · 2019-08-20 02:04:02Z

1

This the open tag of the debug.svg icon used in the action bar

<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">

Do you have a viewbox set?

answered Aug 20, 2019 at 2:04

rioV8

29.7k4 gold badges48 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

trebleCode Over a year ago

It looks like in my case that I do not. I was using a port of potrace linked on an old SO post. kilobtye.github.io/potrace that appears only to generate id, version, width, height, xmlns, path, stroke, fill, and full-rule. Would I manually be able to specify a viewBox with pixels?

trebleCode Over a year ago

I also tried adding in the viewbox property on the tag, and left it as "". I can preview the image in VS Code with SVG Viewer extension, but still shows up blank in the activity bar :*(

rioV8 Over a year ago

set the viewbox to the same size of the width and height, most likely an empty viewbox equals no-viewbox

trebleCode Over a year ago

thanks for the tips. I was able to end up fiddling with the values in viewbox along with the height and width settings, eventually got it to work. Much appreciated!

Collectives™ on Stack Overflow

Vscode API - Custom View Container Icon

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related