0.1.18 • Published 8 years ago

gulp-inject-svg v0.1.18

Weekly downloads
68
License
BSD-3-Clause
Repository
github
Last release
8 years ago

gulp-inject-svg

experimental

Information

This gulp plugin will check all img tags with an external svg and replace the tag with inline svg.

NPM

Usage

<div class="icon">
  <img src="/assets/img/icons/exclamation_mark.svg" class="icon--exclamation-mark">
</div>

Note

You either need to use an absolute path relative to your project root

/src/assets/img/icons/exclamation_mark.svg

or pass a configuration object to the plugin

injectSvg({ base: '/src' })

Ignore some SVG files

You can prevent some SVG files from inject by the attribute data-skip-inject-svg

<img src="/assets/img/icons/exclamation_mark.svg" data-skip-inject-svg class="icon--exclamation-mark">

Example

var gulp = require('gulp');
var injectSvg = require('gulp-inject-svg');
var injectSvgOptions = { base: '/src' };

gulp.task('injectSvg', function() {

  return gulp.src('/src/**/*.html')
    .pipe(injectSvg(injectSvgOptions))
    .pipe(gulp.dest('public/'));

});

Replaces your <img> tags with the corresponding inlined svg file.

<div class="icon">
  <svg class="icon--exclamation-mark" 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"/><path class="st0" 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"/></svg>
</div>
0.1.18

8 years ago

0.1.17

8 years ago

0.1.16

8 years ago

0.1.15

8 years ago

0.1.14

8 years ago

0.1.13

8 years ago

0.1.12

8 years ago

0.1.10

8 years ago

0.1.9

9 years ago

0.1.8

9 years ago

0.1.7

9 years ago

0.1.6

9 years ago

0.1.5

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.4

11 years ago

0.0.3

11 years ago

0.0.2

11 years ago

0.0.1

11 years ago

0.0.0

11 years ago