gsi

gulp-svg-inject

Inline SVG files/urls inside html / js / css files

Showing:

Popularity

Downloads/wk

14

GitHub Stars

0

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

6

Size (min+gzip)

238.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100