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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent