Skip to content
Inline SVG files/urls inside html / js / css files
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
CHANGELOG.md
LICENSE.md
README.md
index.js
package-lock.json
package.json

README.md

gulp-svg-inject

Inline svg files inside html or js files This gulp plugin parses HTML and JS files and replaces tag that point to local or remote svg files with the content of the svg files. Inlining svg file is useful for applying (dynamic) css styling to svg elements.

Install

Install gulp-svg-inject as a development dependency:

npm install --save-dev gulp-svg-inject

Usage

<div>
  <img src="/src/img/icon.svg" class="icon">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/FP_Mushroom_icon.svg" class="mushroom" />
</div>
var gulp = require('gulp');
var svgInject = require('gulp-svg-inject');
var	svgMin = require('gulp-svgmin');

gulp.task('default', function () {
	return gulp.src(['/src/**/*.html','/src/**/*.js'])
		.pipe(svgInject())
		.pipe(gulp.dest('/public/'));
});

will replace the tags with the content of the svg files

<div class="icon">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><ellipse class="st0" cx="16" cy="22.9" rx="2.3" ry="2.3"></ellipse><path d="M18.6 9.8l-1.1 7.7c0 .4-.2.8-.6 1-.3.2-.6.3-.9.3h-.2c-.7-.1-1.2-.7-1.3-1.4l-1.1-7.6c-.2-1.5.8-2.8 2.3-3 1.4-.2 2.7.9 2.9 2.3v.7z"></path></svg>
  <svg class="mushroom" xmlns="http://www.w3.org/2000/svg" width="400" height="440"><path d="m 315.56 828.85 c 19.01 -1.958 41.1 -2.543 54.718 -17.932 16.372 -19.439 15.16 -48.09 5.906 -70.44 -14.717 -37.35 -46.17 -65.24 -80.56 -84.58 -30.619 -16.636 -65.32 -25.519 -100.26 -25.03 l -0.005 -0.013 c -61.09 1.682 -121.05 32.842 -156.79 82.34 -16.28 23 -26.908 52.878 -18.586 80.82 4.489 14.02 15.507 25.343 29.954 28.765 85.28 10.849 180.46 14.597 265.62 6.07 z m -178.09 40.787 c -12.23 40.35 -22.05 68.24 -20.405 110.65 1.344 17.195 6.122 37.681 23.07 45.857 20.05 9.973 43.47 7.04 65.22 7.744 20.405 -0.223 41.597 0.595 61.01 -6.223 16.247 -8.05 24.924 -26.51 24.726 -44.11 3.961 -42.491 -8.113 -72.16 -19.942 -112.46 z" transform="translate(0 -612.36)" stroke="#000" stroke-width="16"/></svg>
</div>

License

MIT © Bateast2

You can’t perform that action at this time.