Skip to content

Instantly share code, notes, and snippets.

@crazko
Last active Sep 22, 2020
Embed
What would you like to do?
svg icons
const svgSprite = require('gulp-svg-sprite');
const spriteConfig = {
dest: '/Htdocs/Images/ico',
shape: {
dimension: {
maxWidth: 32,
maxHeight: 32,
},
// spacing: {
// padding: 10,
// },
transform: [
{
svgo: {
plugins: [
{
convertColors: {
currentColor: true, // ... not working?
},
},
// Optimize and minimize SVG shape
{ collapseGroups: true },
{ convertShapeToPath: true },
{ mergePaths: true },
{ transformsWithOnePath: true },
{ convertPathData: true },
{ convertTransform: true },
{ convertStyleToAttrs: true },
// Remove noise from designer tools and clean up
{ cleanupAttrs: true },
{ removeDoctype: true },
{ removeXMLProcInst: true },
{ removeComments: true },
{ removeMetadata: true },
{ removeTitle: true },
{ removeDesc: true },
{ removeUselessStrokeAndFill: true },
{ removeUnusedNS: true },
{ removeRasterImages: true },
{ removeUnknownsAndDefaults: true },
{ removeNonInheritableGroupAttrs: true },
{ cleanupListOfValues: true },
{ cleanupNumericValues: true },
],
},
},
],
},
mode: {
css: {
layout: 'vertical',
render: {
css: true, // Activate CSS output (with default options)
},
},
},
};
const svg = () =>
src('src/img/ico/*.svg')
.pipe(svgSprite(spriteConfig))
.pipe(dest(paths.images.dist + '/ico'));
exports.svg = svg;
https://github.com/axe312ger/responsive-svg-sprites/blob/master/gulpfile.js
[class^='svg'] { // Change to `icon-<name>`
font-size: inherit;
display: inline-block;
width: 1em;
height: 1em;
background-size: 100% auto !important;
vertical-align: middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment