walle89 / svg-stylus Goto Github PK

Hello, I have a need to use relative URL's with svg-stylus.

For example, if I have an index.styl file that requires another file:

@require components/checkbox/styl/checkbox.styl'

And I want to reference a file relative to checkbox.styl:

background-image: svgurl('../embed/Checkbox.svg') svg(path fill $checkbox-check-color);

... this doesn't work. I dug in a bit and saw a base_path variable in svg.js, but when I debugged it it was null. Is there a way I can set that to the Stylus file that is being processed? I'm guessing not, as it seems to be compiled down to one file by that point.

First i have to thank you for the plugin. It is very useful!

But i have a question about passing more than one param (e.g. "fill") to the svg() function

My SVG Example (decoded base 64):
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"> <g> <polyline fill="none" stroke="#999" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="27,15 44,32 27,49 "/> </g> </svg>

My stylus code looks like:
background-image svgurl('./src/svg/arrows_right.svg') svg(polyline stroke $gray-dark-1 stroke-width $svg-stroke-width)
As you can see, i tried to adapt more than the stroke-color. But without success.
How can i achieve this with your plugin?

And what if i want to change the width and height params of the svg? Can this be passed also?

Best regards
Volker

Can you tell how I can use this tool with gulp?

Some organizations do not allow cloning via http.

Given that * dependencies could introduce breaking changes, it is recommended that the version is less relaxed.

Per HTML spec, the following should be possible

 background-image   : url(https://mdn.mozillademos.org/files/11305/firefox.png),
                       url(https://mdn.mozillademos.org/files/11307/bubbles.png);

Currently embedding multiple backgrounds with svgurl is not possible. Only the first one will be correctly embedded.