How to use svg-sprite - 6 common examples

To help you get started, we’ve selected a few svg-sprite examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jkphl / node-iconizr / lib / iconizr.js View on Github external
error.errno			= 1391852448;
		return error;
	}
	
	// Keep the intermediate files
	options				= _.extend({}, defaultOptions, options || {});
	options.verbose		= Math.max(0, Math.min(3, parseInt(options.verbose, 10) || 0));
	
	// Temporarily alter the configuration options to keep intermediate files and suppress all output rendering
	options._keep		= options.keep;
	options.keep		= 1;
	options._render		= _.extend({css: true}, options.render);
	options.render		= {css: false};
	
	// Create the SVG sprite
	var sprite			= SVGSprite.createSprite(inputDir, outputDir, options, function(error, results) {
		
		// Restore configuration options
		results.options	= restoreOptions(results.options);
		
		// If an error occured while creating the SVG sprite: Abort
		if (error) {
			callback(error, results);
			
		// Else: Create icon kit
		} else {
			new Iconizr(results).createIconKit(callback);
		}
	});
	
	// In case of an error: Return it
	if (util.isError(sprite)) {
github jkphl / node-iconizr / lib / iconizr.js View on Github external
setDataAndSingle				= function(currentData, data, type) {
		currentData.svg				= [];
		for (var s = 0; s < data.svg.length; ++s) {
			currentData.svg[s]		= _.extend({}, data.svg[s], data.svg[s][type]);
			delete currentData.svg[s].svg;
			delete currentData.svg[s].png;
		}
		return currentData;
	}
	
	// If the sprite at least one SVG image
	if (this.result.data.svg.length) {
		
		// Run through all configured rendering types
		for (var type in this._options.render) {
			var render							= SVGSprite.renderConfig(this._options.outputDir, this._options.render[type], type, __dirname);

			// If both a template and a destination file are given: Create tasks for it
			if (render.dest !== null) {

				if (this._options.verbose > 0) {
					console.log('Creating the "%s" output type ...', type);
				}
				
				// Non-stylesheet output types: Simple rendering
				if (['html', 'inline.svg'].indexOf(type) >= 0) {
					tasks[type]						= SVGSprite.renderTask(render.template, dest + '.' + type, _.extend({}, data), this.result);
					
				// Stylesheet output type: Render variants
				} else {
					++this.output;
					var data						= setDataAndSingle(_.extend({}, this.result.data), this.result.data, 'svg'),
github jkphl / node-iconizr / lib / iconizr.js View on Github external
if (this.result.data.svg.length) {
		
		// Run through all configured rendering types
		for (var type in this._options.render) {
			var render							= SVGSprite.renderConfig(this._options.outputDir, this._options.render[type], type, __dirname);

			// If both a template and a destination file are given: Create tasks for it
			if (render.dest !== null) {

				if (this._options.verbose > 0) {
					console.log('Creating the "%s" output type ...', type);
				}
				
				// Non-stylesheet output types: Simple rendering
				if (['html', 'inline.svg'].indexOf(type) >= 0) {
					tasks[type]						= SVGSprite.renderTask(render.template, dest + '.' + type, _.extend({}, data), this.result);
					
				// Stylesheet output type: Render variants
				} else {
					++this.output;
					var data						= setDataAndSingle(_.extend({}, this.result.data), this.result.data, 'svg'),
					dest							= path.join(path.dirname(render.dest), path.basename(render.dest, '.' + type));
					
					// Render the SVG sprite version
					tasks[type + '-svg-sprite']		= SVGSprite.renderTask(render.template, dest + '-svg-sprite.' + type, _.extend({}, data, {encode: !this.result.data.exceed.svg}), this.result);
					
					// Render the SVG data version
					tasks[type + '-svg-data']		= SVGSprite.renderTask(render.template, dest + '-svg-data.' + type, _.extend({}, data, {sprite: null, common: null, encode: !this.result.data.exceed.svg}), this.result);
					
					// Render the single SVG icon version (if applicable)
					if (this._options.keep) {
						tasks[type + '-svg-single']	= SVGSprite.renderTask(render.template, dest + '-svg-single.' + type, _.extend({}, data, {sprite: null, common: null, encode: false}), this.result);
github jkphl / grunt-svg-sprite / tasks / svgsprite.js View on Github external
this.files.forEach(function(file) {
			var indir		= file.src.shift() || './',
			outdir			= util.isArray(file.dest) ? file.dest.shift() : ('' + file.dest),
			done			= that.async();
			
			console.log('Building SVG sprite from directory "%s" ...', indir);
			
			SVGSprite.createSprite(indir, outdir, options, function(error, results) {
				if (error) {
					console.error(error);
				} else {
					for (var file in results.files) {
						grunt.log.writeln(chalk.green('✔ ') + file + chalk.gray(' (' + results.files[file] + ' bytes)'));
					}
				}
				done();
			});
		});
	});
github dcos / dcos-ui / webpack / plugins / svg-compiler-plugin.js View on Github external
compiler.plugin('emit', function (compilation, callback) {
    let content = null;
    const files = glob.sync('**/*.svg', {cwd: baseDir});
    const svgSpriter = new SVGSprite({
      mode: {
        defs: true
      },
      shape: {
        id: {
          separator: '--'
        }
      }
    });

    files.forEach(function (file) {
      svgSpriter.add(new vinyl({
        path: path.join(baseDir, file),
        base: baseDir,
        contents: fs.readFileSync(path.join(baseDir, file))
      }));
github 2createStudio / postcss-sprites / src / factories / vector.js View on Github external
export default function run(opts, images) {
	const config  = _.defaultsDeep({}, opts.svgsprite);
	const spriter = new SVGSpriter(config);

	images.forEach(({ path }) => {
		spriter.add(path, null, fs.readFileSync(path, { encoding: 'utf-8' }));
	});

	return Promise.promisify(spriter.compile, {
		context: spriter,
		multiArgs: true
	})().spread((result, data) => {
		const spritesheet = {};

		spritesheet.extension = 'svg';
		spritesheet.coordinates = {};
		spritesheet.image = result.css.sprite.contents;
		spritesheet.properties = {
			width: data.css.spriteWidth,

svg-sprite

SVG sprites & stacks galore — A low-level Node.js module that takes a bunch of SVG files, optimizes them and bakes them into SVG sprites of several types along with suitable stylesheet resources (e.g. CSS, Sass, LESS, Stylus, etc.)

MIT
Latest version published 8 months ago

Package Health Score

66 / 100
Full package analysis