Load SVG files in main icon list, fixes a regression that was forcing PNGs to render in the list.

[quamsta]

After refactoring some of the code that fetches different variants and formats of images, the IconList component was pulling in PNG files, but I prefer rendering SVGs in the IconList component.

[bspeare]

@quamsta would loading the 1:1 padded version of the png be an option for this?

[quamsta]

@bspeare We could! However, since the icon-list__button component has specific padding baked into its styles, it may not be necessary. We have left/right padding, container padding, and label padding that keeps the icons consistently padded and lined up with each other:

I can give the 1:1 squares a try, but I'm unsure what it'll look like. But it's a good experiment

[quamsta]

@bspeare

I tried the padded square images for the icons in a few different scenarios, but I'm not happy with how the added padding tends to make the icon-list__button component a bit less flexible and harder to make into a square:

(Note how we're looking at more rectangular boxes here, which.. is okay, but we were closer to squares before)

When using a cropped SVG or PNG, we can add padding as necessary to the image or labels in order to adjust its container's height. We could even use some CSS grid styles on the icon-list__button component to keep things vertically aligned or centered, but the baked-in padding adds additional complexity to this component that we don't have control over.

You can sort of make it behave like the cropped versions, but having to account for an additional amount of padding around the actual drawings of the icons adds complexity to the CSS that I don't think is necessary:

(Note how the containers are "more square" but the icons are shrunk in due to their built-in padding.)

I'd prefer to keep using the cropped versions, which I'm using to make the icon-list_button component square on full desktop displays. The component does get wider and more rectangular when we have fewer columns, but could be adjusted with media queries, however the padding on a pre-padded image could not be adjusted with media queries.

Existing, mostly square icon-list__button component:

[quamsta]

This may need some additional work. There are PNGs in a few places that I'd prefer to present SVGs instead:

• Sidebar categories
• Modal big preview