Rendering Issue with new Icons

[codenprose]

Codepen Link

Old Icon vs New Icon

[codenprose]

It appears there's an issue with the path in the new icon? I followed the steps to properly download icons from the @streamlinehq/streamlinehq package but after upgrading, I'm having trouble changing the size of the svg. In the picture above, when changing the height from 24px to 16px, a good portion of the svg gets cutoff.

[cbrwizard]

Hey, could you please check the steps described here https://github.com/webalys-hq/streamlinehq-npm#how-to-change-style-size-etc and check the example app as well https://github.com/webalys-hq/streamlinehq-npm/tree/master/docs/latest/example-app. There you will be able to find the way to change sizes of our SVGs.

Please respond if this resolves your issue

[codenprose]

Hi @cbrwizard unfortunately I'm still having trouble. I think the issue is that there are hard coded width and height attributes on the svg files.

[cbrwizard]

@dkh215 how are you importing the image? I've just updated the example app with an exact image you're trying to use where I reduce its size to 16px. Here is the final result, it doesn't get cut.

[codenprose]

@cbrwizard interesting... I'm importing from the exact same path. I wonder if it's a compatibility issue with vue-svg-loader 🤔 , will dig into this. So weird.

[cbrwizard]

We're strongly considering wiping all height and width properties from our svgs and setting only viewBox instead (will do this for new icons packs at least). This should solve this issue. No ETA yet though as we're busy with releasing another feature right now

[Gratouille]

I've just installed the NPM packages and that's a big issue for me, because these height & width properties are killing the "responsiveness" of the SVG icons (with the hard coded #000 / currentColor issue there).

At this time I've added the [string-replace-loader](https://github.com/Va1/string-replace-loader), and I'm using it for deleting these parts before the file-loader parses them (as well as replacing any #000 or #000000 color code with currentColor). It works as intended, but it's quite a downgrade for me.

[codenprose]

Looks vue-svg-loader removes viewbox attributes by default. I updated that setting and can now adjust the width and height by wrapping each svg in a div element and then targeting the svg. This unblocks me for now but it would be great if hard coded width and height attributes were eventually removed.

[cbrwizard]

Proposed solution is to remove width and height params for all images and to set only viewbox param.

[pixel-glyph]

Yup, setting a viewBox is the correct solution. I'm also running into this issue. Setting width and height directly on the SVG isn't necessary and without the correct viewBox defined, the SVG won't scale. Unfortunately, I'm also unable to set these imported icons as the src on an image tag. I'm following the example app, but the images are broken in the browser. I know it's not my SVG loader since I can import them and use them inline--I just can't scale them.

[cbrwizard]

Width / height are going to be removed in the following release #23 and they will have viewBox only instead, so this issue will be fixed

[cbrwizard]

We have recently recreated all assets and released a new NPM 3.0.1 version https://github.com/webalys-hq/streamlinehq-npm/releases/tag/3.0.1, please install it, fetch newest images and check if it helps you. Now width/height are removed, viewBox is added.

[cbrwizard]

Closing this issue since I believe it's fixed. Feel free to respond if you think otherwise