CODEWITHSUNDEEP
svggulpbrowser-syncgulp-browser-sync
Craig Harshbarger
Craig Harshbarger

Reputation: 2263

browser-sync stream svg when using svg symbols

I'm trying to add browser-sync to an existing gulp setup. In my gulpfile I have a task that takes svgs in a folder and creates a single svg file with a <symbol> for each individual svg file.

In the html individual svg's are used like so where SpriteFile.svg is the file that contains the <symbol>s and icon-name is the id of one of those <symbol> elements. 

<svg width="16" height="16">
    <use xlink:href="/SpriteFile.svg#icon-name"></use>
</svg>

This all works fine but I cannot get browser-sync to update the icons. My task looks like this

gulp.src(`./Icons/*.svg`)
    .pipe( svgstore( { inlineSvg: true } ) )
    .pipe( rename( 'SpriteFile.svg' ) )
    .pipe( gulp.dest( './' ) )
    .pipe(browserSync.stream());

In the browser-sync console I can see that it picks up the change. And I can see in devtools that the websocket was delivered to the browser. But the browser does not update the icon(s).

I imagine this is because the path it is trying to update is SpriteFile.svg but on the page it is referenced as SpriteFile.svg#icon-name and it thinks those are not the same files. How can I tell browser-sync to update all paths that match SpriteFile.svg including the symbol suffix?

Upvotes: 1

Views: 125

Answers (0)

Related Questions