0.1.18 • Published 6 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
6 years ago
0.1.17
6 years ago
0.1.16
7 years ago
0.1.15
7 years ago
0.1.14
7 years ago
0.1.13
7 years ago
0.1.12
7 years ago
0.1.10
7 years ago
0.1.9
8 years ago
0.1.8
8 years ago
0.1.7
8 years ago
0.1.6
8 years ago
0.1.5
8 years ago
0.1.4
8 years ago
0.1.3
8 years ago
0.1.2
8 years ago
0.1.1
8 years ago
0.1.0
8 years ago
0.0.4
10 years ago
0.0.3
10 years ago
0.0.2
10 years ago
0.0.1
10 years ago
0.0.0
10 years ago