Previously, the svgs command would source svg files from a single directory, optimize them with SVGO, and create a sprite using svgstore. This release allows the specification of multiple modules with their own SVGO, svgstore, input, and output settings as well as some additional configuration options.
The previous format for the svgs command configuration.
/**
* @type {Object}
*/
module.exports = {
/**
* A custom prefix for svg files and sprite IDs.
*
* @type {String}
*/
prefix: '{{ ... }}',
/**
* Plugin options for SVGO @source https://github.com/svg/svgo#built-in-plugins
*
* @type {Array}
*/
plugins: [
'{{ svgo plugins @source https://github.com/svg/svgo#built-in-plugins }}'
],
/**
* The file relative to the global dist directory to write the sprite to.
*
* @type {String}
*/
svgstore: {
file: '{{ file relative to the global dist directory to write the sprite to }}'
}
}The updated configuration.
/**
* @type {Array}
*/
module.exports = [
/**
* A svgs module
*
* @type {Object}
*/
{
/**
* The source directory for the svg files. Defaults to './src/svg/'.
*
* @type {String}
*/
source: '{{ ... }}',
/**
* The output directory for the svg files. Defaults to './dist/svg/'.
*
* @type {String}
*/
dist: '{{ ... }}',
/**
* A custom prefix for svg files and sprite IDs. Defaults to 'pttrn-'.
*
* @type {String}
*/
prefix: '{{ ... }}',
/**
* The file relative to the global dist directory to write the sprite to. Defaults to 'svgs.svg'.
*
* @type {String}
*/
file: '{{ ... }}',
/**
* Plugin options for SVGO @source https://github.com/svg/svgo#built-in-plugins. Defaults to configuration described below.
*
* @type {Array}
*/
svgo: [
'{{ ... }}'
],
/**
* Plugin options for svgstore @source https://github.com/svgstore/svgstore#options.
*
* @type {Object}
*/
svgstore: {
'{{ ... }}'
},
/**
* A list of svgs to limit which will be compiled from the source directory and included in the sprite.
*
* @type {Array}
*/
restrict: [
'{{ ... }}'
],
/**
* Prevent writing of individually optimized svgs into the distribution directory.
*
* @type {Array}
*/
write: {
source: false
},
}
]Default SVGO configuration.
const svgo = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
convertPathData: false,
inlineStyles: false,
cleanupIDs: false
}
}
}
]
};svgs command configuration example.
const svgo = {
plugins: [
{
name: 'preset-default',
params: {
overrides: {
convertPathData: false,
inlineStyles: false,
cleanupIDs: false
}
}
}
]
};
const restrict = [
'arrow-', 'chevron-', 'help-circle.svg', 'calendar.svg', 'users.svg',
'award.svg', 'x.svg', 'copy.svg', 'check.svg', 'facebook.svg', 'twitter.svg',
'menu.svg', 'translate.svg', 'search.svg', 'info.svg', 'alert-',
'external-link.svg', 'share-2.svg'
];
module.exports = [
{
source: './src/svg',
dist: './assets/svg',
prefix: '',
file: 'svgs.svg',
svgo: svgo
},
{
source: './node_modules/feather-icons/dist/icons',
dist: './assets/svg',
prefix: 'feather-',
file: 'feather.svg',
svgo: svgo,
restrict: restrict,
write: {
source: false
}
}
];