Rendering Issue with new Icons about streamlinehq-npm HOT 13 CLOSED

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.

from streamlinehq-npm.

@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.

from streamlinehq-npm.

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

from streamlinehq-npm.

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

from streamlinehq-npm.

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.

from streamlinehq-npm.

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

from streamlinehq-npm.

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.

from streamlinehq-npm.

@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.

from streamlinehq-npm.

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.

from streamlinehq-npm.

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.

from streamlinehq-npm.

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.

from streamlinehq-npm.

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

from streamlinehq-npm.

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

from streamlinehq-npm.