@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.