search

shakyShane / gulp-svg-sprites

Create SVG sprites or compile to <symbols>
MIT License
334 stars 45 forks source link

Broken output in defs mode #86

Closed PawelGIX closed 8 years ago

PawelGIX commented 8 years ago

This happen without errors in console.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
    <defs>
{#svg}        {data|s}{/svg}    </defs>
</svg>
PawelGIX commented 8 years ago

My task: 

var svgSprite = require("gulp-svg-sprites");
gulp.task('sprites', function () {
    return gulp.src('svg/*.svg')
        .pipe(svgSprite({mode: "defs"}))
        .pipe(gulp.dest("svg-sprite"));
});
soenkekluth commented 8 years ago

please update to 4.0.2

PawelGIX commented 8 years ago

This is only partially solved the problem. Preview file looks like this: defs.txt

    <ul class="icon-boxes">
        {#svg}
        <li title="{name}">
            <div class="icon-box" id="icon-box-{name}">
                <svg viewBox="0 0 {width} {height}" class="{#common}{common} {/common}{#selector}{raw}{/selector}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <use xlink:href="#{name}"></use>
                </svg>
            </div>
            <h2>{name}</h2>
            <button onclick="showPopover('snippet-{name}')">Show Snippet</button>
            <br/>
            <button onclick="invertBackground('icon-box-{name}')">Invert Background</button>
            <div class="snippet-popover" id="snippet-{name}">
                <pre><code>&lt;svg viewBox=&quot;{viewBox}&quot; class=&quot;{#common}{common} {/common}{#selector}{raw}{/selector}&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
    &lt;use xlink:href=&quot;#svg-arr-black-reversed&quot;&gt;&lt;/use&gt;
&lt;/svg&gt;</code></pre>
                <button onclick="hidePopover()">Close</button>
            </div>
        </li>
        {/svg}
    </ul>