@unic/estatico-svgsprite
Uses svgstore to create a sprite from multiple SVGs.
Installation
$ npm install --save-dev @unic/estatico-svgsprite
Usage
const gulp = require('gulp');
const env = require('minimist')(process.argv.slice(2));
/**
* SVG spriting task
* Uses svgstore to create a sprite from multiple SVGs
*
* Using `--watch` (or manually setting `env` to `{ watch: true }`) starts file watcher
* When combined with `--skipBuild`, the task will not run immediately but only after changes
*/
gulp.task('media:svgsprite', () => {
const task = require('@unic/estatico-svgsprite');
const instance = task({
src: {
base: './src/assets/media/svg/**/*.svg',
demo: './src/demo/modules/svgsprite/svg/*.svg',
},
srcBase: './src',
dest: './dist/assets/media/svgsprite',
}, env);
// Don't immediately run task when skipping build
if (env.watch && env.skipBuild) {
return instance;
}
return instance();
});Run task (assuming the project's package.json specifies "scripts": { "gulp": "gulp" }):
$ npm run gulp svgsprite
See possible flags specified above.
Client
import loadSvgSprites from '@unic/estatico-svgsprite/lib/loader';
document.addEventListener('DOMContentLoaded', loadSvgSprites());Add config to template:
<body data-svgsprites-options='["/assets/media/svgsprite/main.svg", "/assets/media/svgsprite/demo.svg"]'>API
plugin(options, env) => taskFn
options
src (required)
Type: Object
Default: null
Each property is passed to gulp.src, the key is used for the generated sprite's name.
srcBase (required)
Type: String
Default: null
Passed as base option to gulp.src.
dest (required)
Type: String
Default: null
Passed to gulp.dest.
watch
Type: Object
Default: null
Passed to file watcher when --watch is used.
plugins
Type: Object
plugins.svgstore
Type: Object
Default:
{
inlineSvg: true,
},Passed to gulp-svgstore.
plugins.svgo
Type: Object
Default:
svgo: {
plugins: [
{
cleanupIDs: {
remove: false,
},
},
{
cleanupNumericValues: {
floatPrecision: 2,
},
},
{
removeStyleElement: true,
},
{
removeViewBox: false,
},
],
multipass: true,
},Passed to imagemin-svgo via gulp-imagemin. Setting to null will disable this step. Otherwise it will run before piping the files to svgstore.
NOTE: Unless you pass a function instead of an object with your custom options, they are deep-merged into the defaults. So to overwrite removeViewBox: false above, you would have to pass svgo: { plugins: [{}, {}, {}, { removeViewBox: true }] }
logger
Type: { info: Function, debug: Function, error: Function }
Default: Instance of estatico-utils's Logger utility.
Set of logger utility functions used within the task.
env
Type: Object
Default: {}
Result from parsing CLI arguments via minimist, e.g. { dev: true, watch: true }. Some defaults are affected by this, see above.
License
Apache 2.0.