0.1.18 • Published 8 years ago
gulp-inject-svg v0.1.18
gulp-inject-svg
Information
This gulp plugin will check all img tags with an external svg and replace the tag with inline svg.
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