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?
