From bcccc003255c1659f3df9480e045f703bb25db0a Mon Sep 17 00:00:00 2001 From: tkqubo Date: Sun, 13 Sep 2015 06:38:35 +0900 Subject: [PATCH 1/5] Add svg-sprite --- svg-sprite/svg-sprite-tests.ts | 19 ++++++++++++++++++ svg-sprite/svg-sprite.d.ts | 36 ++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 svg-sprite/svg-sprite-tests.ts create mode 100644 svg-sprite/svg-sprite.d.ts diff --git a/svg-sprite/svg-sprite-tests.ts b/svg-sprite/svg-sprite-tests.ts new file mode 100644 index 000000000..2a927998c --- /dev/null +++ b/svg-sprite/svg-sprite-tests.ts @@ -0,0 +1,19 @@ +/// + +import SVGSpriter = require('svg-sprite'); +import * as fs from 'fs'; + +var config: any = null; + +// Create spriter instance (see below for `config` examples) +var spriter = new SVGSpriter(config); + +// Add SVG source files — the manual way ... +spriter.add('assets/svg-1.svg', null, fs.readFileSync('assets/svg-1.svg', {encoding: 'utf-8'})); +spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', {encoding: 'utf-8'})); +/* ... */ + +// Compile the sprite +spriter.compile(function(error: any, result: any) { + /* ... Write `result` files to disk or do whatever with them ... */ +}); diff --git a/svg-sprite/svg-sprite.d.ts b/svg-sprite/svg-sprite.d.ts new file mode 100644 index 000000000..240e14e68 --- /dev/null +++ b/svg-sprite/svg-sprite.d.ts @@ -0,0 +1,36 @@ +// Type definitions for svg-sprite +// Project: https://github.com/jkphl/svg-sprite +// Definitions by: Qubo +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module "svg-sprite" { + import File = require('vinyl'); + + namespace sprite { + interface SVGSpriterConstructor { + new(config: any): SVGSpriter; + } + + interface SVGSpriter { + add(file: string|File, name: string, svg: string): SVGSpriter; + compile(config: any, callback: CompileCallback): SVGSpriter; + compile(callback: CompileCallback): void; + getShapes(dest: string, callback: GetShapesCallback): void; + } + + interface CompileCallback { + (error: any, result: any, data: any): any; + } + + interface GetShapesCallback { + (error: any, result: File[]): any; + } + } + + var sprite: sprite.SVGSpriterConstructor; + + export = sprite; +} + From f2be56fd5f2868344bf13928620b0a8de4db0a3f Mon Sep 17 00:00:00 2001 From: tkqubo Date: Sun, 13 Sep 2015 07:01:03 +0900 Subject: [PATCH 2/5] Add svg-spriter's Config and Shape interface --- svg-sprite/svg-sprite.d.ts | 150 +++++++++++++++++++++++++++++++++++-- 1 file changed, 145 insertions(+), 5 deletions(-) diff --git a/svg-sprite/svg-sprite.d.ts b/svg-sprite/svg-sprite.d.ts index 240e14e68..72c8eb1f2 100644 --- a/svg-sprite/svg-sprite.d.ts +++ b/svg-sprite/svg-sprite.d.ts @@ -3,29 +3,169 @@ // Definitions by: Qubo // Definitions: https://github.com/borisyankov/DefinitelyTyped +/// /// +/// +import {LoggerInstance} from "winston"; declare module "svg-sprite" { import File = require('vinyl'); namespace sprite { - interface SVGSpriterConstructor { - new(config: any): SVGSpriter; + interface SVGSpriterConstructor extends NodeJS.EventEmitter { + new(config: Config): SVGSpriter; } interface SVGSpriter { add(file: string|File, name: string, svg: string): SVGSpriter; - compile(config: any, callback: CompileCallback): SVGSpriter; + compile(config: Config, callback: CompileCallback): SVGSpriter; compile(callback: CompileCallback): void; getShapes(dest: string, callback: GetShapesCallback): void; } + interface Config { + /** + * Main output directory + * @default '.' + */ + dest?: string; + /** + * Logging verbosity or custom logger + */ + log?: string|LoggerInstance; + /** + * SVG shape configuration + */ + shape?: Shape; + /** + * Sprite SVG options + */ + svg?: Svg; + /** + * Custom templating variables + */ + variables?: any; + /** + * Output mode configurations + */ + mode?: Mode; + } + + /** + * All settings affecting the SVG shapes of the sprite + */ + interface Shape { + /** + * SVG shape ID related options + */ + id: { + /** + * Separator for directory name traversal + */ + separator: string; + /** + * SVG shape ID generator callback + */ + generator: string|((string) => string); + /** + * File name separator for shape states (e.g. ':hover') + */ + pseudo: string; + /** + * Whitespace replacement for shape IDs + */ + whitespace: string; + }; + /** + * Dimension related options + */ + dimension: { + /** + * Max. shape width + */ + maxWidth: number; + /** + * Max. shape height + */ + maxHeight: number; + /** + * Floating point precision + */ + precision: number; + /** + * Width and height attributes on embedded shapes + */ + attributes: boolean; + }; + /** + * Spacing related options + */ + spacing: { + /** + * Padding around all shapes + */ + padding: number|number[]; + /** + * Padding strategy (similar to CSS `box-sizing`) + */ + box: string; + }; + /** + * List of transformations / optimizations + */ + transform: (string|CustomConfigurationTransform|CustomCallbackTransform)[]; + /** + * Path to YAML file with meta / accessibility data + */ + meta: string; + /** + * Path to YAML file with extended alignment data + */ + align: string; + /** + * Output directory for optimized intermediate SVG shapes + */ + dest: string; + } + + /** + * Pre-defined shape transformation with custom configuration + */ + interface CustomConfigurationTransform { + [transformationName: string]: { + plugins: { [transformationName: string]: boolean }[]; + } + } + + /** + * Custom callback transformation + */ + interface CustomCallbackTransform { + [transformationName: string]: { + /** + * Custom callback transformation + * @param shape SVG shape object + * @param sprite SVG spriter + * @param callback Callback + */ + (shape: any, sprite: SVGSpriter, callback: Function): any; + } + } + + interface Svg { + + } + + interface Mode { + + } + interface CompileCallback { - (error: any, result: any, data: any): any; + (error: Error, result: any, data: any): any; } interface GetShapesCallback { - (error: any, result: File[]): any; + (error: Error, result: File[]): any; } } From c1aad0b41a477cd29475b1a179aebc44282c9930 Mon Sep 17 00:00:00 2001 From: tkqubo Date: Sun, 13 Sep 2015 07:19:09 +0900 Subject: [PATCH 3/5] Add Svg definition to svg-sprite --- svg-sprite/svg-sprite.d.ts | 55 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/svg-sprite/svg-sprite.d.ts b/svg-sprite/svg-sprite.d.ts index 72c8eb1f2..4c441be3c 100644 --- a/svg-sprite/svg-sprite.d.ts +++ b/svg-sprite/svg-sprite.d.ts @@ -12,6 +12,7 @@ declare module "svg-sprite" { import File = require('vinyl'); namespace sprite { + import Function = Stream.Function; interface SVGSpriterConstructor extends NodeJS.EventEmitter { new(config: Config): SVGSpriter; } @@ -153,7 +154,61 @@ declare module "svg-sprite" { } interface Svg { + /** + * Output an XML declaration at the very beginning of each compiled sprite. + * If you provide a non-empty string here, it will be used one-to-one as declaration (e.g. ). + * If you set this to TRUE, *svg-sprite* will look at the registered shapes for an XML declaration and use the first one it can find. + * @default true + */ + xmlDeclaration: boolean|string; + /** + * Include a declaration in each compiled sprite. If you provide a non-empty string here, + * it will be used one-to-one as declaration (e.g. ). + * If you set this to TRUE, *svg-sprite* will look at the registered shapes for a DOCTYPE declaration and use the first one it can find. + * @default true + */ + doctypeDeclaration: boolean|string; + /** + * In order to avoid ID clashes, the default behavior is to namespace all IDs in the source SVGs before compiling them into a sprite. + * Each ID is prepended with a unique string. In some situations, it might be desirable to disable ID namespacing, e.g. when you want to script the resulting sprite. + * Just set svg.namespaceIDs to FALSE then and be aware that you might also want to disable SVGO's ID minification (shape.transform.svgo.plugins: [{cleanupIDs: false}]). + * @default true + */ + namespaceIDs?: boolean; + /** + * In order to avoid CSS class name ambiguities, the default behavior is to namespace CSS class names in the source SVGs before compiling them into a sprite. + * Each class name is prepended with a unique string. Disable this option to keep the class names untouched. + * @default true + */ + namespaceClassnames?: boolean; + /** + * If truthy, width and height attributes will be set on the sprite's element (where applicable). + * @default true + */ + dimensionAttributes?: boolean; + /** + * Shorthand for applying custom attributes to the outermost element. + * Please be aware that certain attributes (e.g. viewBox) will be calculated dynamically and override custom rootAttributes in any case. + */ + rootAttributes?: any; + /** + * Floating point precision for CSS positioning values (defaults to -1 meaning highest possible precision). + */ + precision?: number; + /** + * Callback (or list of callbacks) that will be applied to the resulting SVG sprites as global [post-processing transformation](#svg-sprite-customization). + * transform: Function∣Array + */ + transform?: SvgTransformer|SvgTransformer[]; + } + interface SvgTransformer { + /** + * Custom sprite SVG transformation + * @param svg Sprite SVG + * @return Processed SVG + */ + (svg: string): string; } interface Mode { From 80e2c14a1702dbc82b02fcfd7dd63d0c8855ddf8 Mon Sep 17 00:00:00 2001 From: tkqubo Date: Sun, 13 Sep 2015 07:35:48 +0900 Subject: [PATCH 4/5] Add Mode definition to svg-sprite --- svg-sprite/svg-sprite.d.ts | 99 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/svg-sprite/svg-sprite.d.ts b/svg-sprite/svg-sprite.d.ts index 4c441be3c..77a510bee 100644 --- a/svg-sprite/svg-sprite.d.ts +++ b/svg-sprite/svg-sprite.d.ts @@ -212,7 +212,106 @@ declare module "svg-sprite" { } interface Mode { + css?: CssAndViewSpecificModeConfig|boolean; + view?: CssAndViewSpecificModeConfig|boolean; + defs?: DefsAndSymbolSpecificModeConfig|boolean; + symbol?: DefsAndSymbolSpecificModeConfig|boolean; + stack?: ModeConfig|boolean; + [customConfigName: string]: ModeConfig; + } + interface ModeConfig { + /** + * Base directory for sprite and CSS file output. If not absolute, the path will be resolved using the main output directory (see global dest option). + * @default "" + */ + dest?: string; + /** + * Used for prefixing the [shape ID](#shape-ids) during CSS selector construction. If the value is empty, + * no prefix will be used. The prefix may contain the placeholder "%s" (e.g. ".svg %s-svg"), + * which will then get replaced by the shape ID. Please be aware that "%" is a special character + * in this context and that you'll have to escape it by another percent sign ("%%") in case you want + * to output it to your stylesheets (e.g. for a [Sass placeholder selector](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_)). + * @default ".svg-%s" + */ + prefix?: string; + /** + * A non-empty string value will trigger the creation of additional CSS rules specifying the dimensions of each shape in the sprite. + * The string will be used as suffix to mode..prefix during CSS selector construction and may contain the placeholder "%s", + * which will get replaced by the value of mode..prefix. + * A boolean TRUE will cause the dimensions to be included directly into each shape's CSS rule (only available for «css» and «view» sprites). + * @default "-dims" + */ + dimensions?: string|boolean; + /** + * SVG sprite path and file name, relative to the mode..dest directory. + * You may omit the file extension, in which case it will be set to ".svg" automatically. + * @default "svg/sprite..svg" + */ + sprite?: string; + /** + * Add a content based hash to the name of the sprite file so that clients reliably reload the sprite + * when it's content changes («cache busting»). Defaults to false except for «css» and «view» sprites. + * @default true∣false + */ + bust?: boolean; + /** + * Collection of [stylesheet rendering configurations](#rendering-configurations). + * The keys are used as file extensions as well as file return keys. At present, + * there are default templates for the file extensions css ([CSS](http://www.w3.org/Style/CSS/)), + * scss ([Sass](http://sass-lang.com/)), less ([Less](http://lesscss.org/)) and styl ([Stylus](http://learnboost.github.io/stylus/)), + * which all reside in the directory tmpl/css. Example: {css: true, scss: {dest: '_sprite.scss'}} + * @default {} + */ + render?: { [key: string]: RenderingConfiguration }; + /** + * Enabling this will trigger the creation of an HTML document demoing the usage of the sprite. Please see below for details on [rendering configurations](#rendering-configurations). + * @default false + */ + example?: RenderingConfiguration; + } + + interface RenderingConfiguration { + /** + * HTML document Mustache template + * @default "tmpl//sprite.html" + */ + template?: string; + /** + * HTML document destination + * @default "sprite..html" + */ + dest?: string; + } + + interface CssAndViewSpecificModeConfig extends ModeConfig { + /** + * The arrangement of the shapes within the sprite. Might be "vertical", "horizontal", "diagonal" or "packed" + * (with the latter being the most compact type). It depends on your project which layout is best for you. + * @default "packed" + */ + layout?: string; + /** + * If given and not empty, this will be the selector name of a CSS rule commonly specifying the background-image + * and background-repeat properties for all the shapes in the sprite (thus saving some bytes by not unnecessarily repeating them for each shape) + */ + common?: string; + /** + * If given and not empty, a mixin with this name will be added to supporting output formats (e.g. Sass, LESS, Stylus), + * specifying the background-image and background-repeat properties for all the shapes in the sprite. + * You may use it for creating custom CSS within @media rules. The mixin acts much like the common rule. + * In fact, you can even combine the two - if both are enabled, the common rule will use the mixin internally. + */ + mixin?: string; + } + + interface DefsAndSymbolSpecificModeConfig extends ModeConfig { + /** + * If you want to embed the sprite into your HTML source, you will want to set this to true + * in order to prevent the creation of SVG namespace declarations and to set some other attributes for effectively hiding the library sprite. + * @default false + */ + inline?: boolean; } interface CompileCallback { From 79f74c840234bdb51bbb54f6191bda1ed35bfb21 Mon Sep 17 00:00:00 2001 From: tkqubo Date: Sun, 13 Sep 2015 08:03:31 +0900 Subject: [PATCH 5/5] Add test code --- svg-sprite/svg-sprite-tests.ts | 310 ++++++++++++++++++++++++++++++++- svg-sprite/svg-sprite.d.ts | 78 ++++++--- 2 files changed, 364 insertions(+), 24 deletions(-) diff --git a/svg-sprite/svg-sprite-tests.ts b/svg-sprite/svg-sprite-tests.ts index 2a927998c..74097962f 100644 --- a/svg-sprite/svg-sprite-tests.ts +++ b/svg-sprite/svg-sprite-tests.ts @@ -3,7 +3,12 @@ import SVGSpriter = require('svg-sprite'); import * as fs from 'fs'; -var config: any = null; +var config: SVGSpriter.Config; + + +// +// README.md +// // Create spriter instance (see below for `config` examples) var spriter = new SVGSpriter(config); @@ -17,3 +22,306 @@ spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', {encod spriter.compile(function(error: any, result: any) { /* ... Write `result` files to disk or do whatever with them ... */ }); + +// General configuration options + +config = { + dest : '.', // Main output directory + log : null, // Logging verbosity (default: no logging) + shape : { // SVG shape related options + id : { // SVG shape ID related options + separator : '--', // Separator for directory name traversal + generator : function(svg: string) { /*...*/ return ''; }, // SVG shape ID generator callback + pseudo : '~' // File name separator for shape states (e.g. ':hover') + }, + dimension : { // Dimension related options + maxWidth : 2000, // Max. shape width + maxHeight : 2000, // Max. shape height + precision : 2, // Floating point precision + attributes : false, // Width and height attributes on embedded shapes + }, + spacing : { // Spacing related options + padding : 0, // Padding around all shapes + box : 'content' // Padding strategy (similar to CSS `box-sizing`) + }, + transform : ['svgo'], // List of transformations / optimizations + meta : null, // Path to YAML file with meta / accessibility data + align : null, // Path to YAML file with extended alignment data + dest : null // Output directory for optimized intermediate SVG shapes + }, + svg : { // General options for created SVG files + xmlDeclaration : true, // Add XML declaration to SVG sprite + doctypeDeclaration : true, // Add DOCTYPE declaration to SVG sprite + namespaceIDs : true, // Add namespace token to all IDs in SVG shapes + dimensionAttributes : true // Width and height attributes on the sprite + }, + variables : {} // Custom Mustache templating variables and functions +}; + +// Output modes + +config = { + mode : { + css : true, // Create a «css» sprite + view : true, // Create a «view» sprite + defs : true, // Create a «defs» sprite + symbol : true, // Create a «symbol» sprite + stack : true // Create a «stack» sprite +} +}; + +config = { + mode: { + css: { + // Configuration for the «css» sprite + // ... + } + } +}; + +// Common mode properties + +config = { + mode : { + mode1 : { + dest : "", // Mode specific output directory + prefix : "svg-%s", // Prefix for CSS selectors + dimensions : "-dims", // Suffix for dimension CSS selectors + sprite : "svg/sprite..svg", // Sprite path and name + bust : true, // Cache busting (mode dependent default value) + render : { // Stylesheet rendering definitions + /* ------------------------------------------- + css : false, // CSS stylesheet options + scss : false, // Sass stylesheet options + less : false, // LESS stylesheet options + styl : false // Stylus stylesheet options + : ... // Custom stylesheet options + ------------------------------------------- */ + }, + example : false // Create an HTML example document +} +} +}; + +// Basic examples + +// A.) Standalone sprite + +config = { + mode : { + inline : true, // Prepare for inline embedding + symbol : true // Create a «symbol» sprite +} +}; + +// B.) CSS sprite with Sass resource + +config = { + mode : { + css : { // Create a «css» sprite + render : { + scss : true // Render a Sass stylesheet + } +} +} +}; + +// C.) Multiple sprites + +config = { + mode : { + defs : true, + symbol : true, + stack : true +} +}; + +// D.) No sprite at all + +config = { + shape : { + dest : 'path/to/out/dir' +} +}; + + + +// +// docs/configuration.md +// + +config = { + shape : { + id : { // SVG shape ID related options + separator : '--', // Separator for directory name traversal + generator : function(svg: string) { /*...*/ return ''; }, // SVG shape ID generator callback + pseudo : '~', // File name separator for shape states (e.g. ':hover') + whitespace : '_' // Whitespace replacement for shape IDs + }, + dimension : { // Dimension related options + maxWidth : 2000, // Max. shape width + maxHeight : 2000, // Max. shape height + precision : 2, // Floating point precision + attributes : false, // Width and height attributes on embedded shapes + }, + spacing : { // Spacing related options + padding : 0, // Padding around all shapes + box : 'content' // Padding strategy (similar to CSS `box-sizing`) + }, + transform : ['svgo'], // List of transformations / optimizations + meta : null, // Path to YAML file with meta / accessibility data + align : null, // Path to YAML file with extended alignment data + dest : null // Output directory for optimized intermediate SVG shapes + } +}; + +config = // SVGO transformation with default configuration +{ + shape : { + transform : ['svgo'] + /* ... */ + } +}; + +config = // Equivalent transformation to ['svgo'] +{ + shape : { + transform : [ + {svgo : {}} + ] + /* ... */ + } +}; + +config = // SVGO transformation with custom plugin configuration +{ + shape : { + transform : [ + {svgo : { + plugins : [ + {transformsWithOnePath: true}, + {moveGroupAttrsToElems: false} + ] + }} + ] + /* ... */ + } +}; + +config = // SVGO transformation with custom plugin configuration +{ + shape : { + transform : [ + {custom : + + /** + * Custom callback transformation + * + * @param {SVGShape} shape SVG shape object + * @param {SVGSpriter} spriter SVG spriter + * @param {Function} callback Callback + * @return {void} + */ + function(shape, sprite, callback) { + /* ... */ + callback(null); + } + } + ] + /* ... */ + } +}; + +config = // Custom global post-processing transformation +{ + svg : { + transform : [ + /** + * Custom sprite SVG transformation + * + * @param {String} svg Sprite SVG + * @return {String} Processed SVG + */ + function(svg) { + /* ... */ + return svg; + }, + + /* ... */ + ] + } +}; + +config = { + variables : { + now : +new Date(), + png : function() { + return function(sprite: any, render: any) { + return render(sprite).split('.svg').join('.png'); + } + } + } +}; + +config = // Activate the «css» mode with default configuration +{ + mode : { + css : true + } +}; + +config = // Equivalent: Provide an empty configuration object +{ + mode : { + css : {} + } +}; + +config = // Multiple sprites of the same output mode +{ + mode : { + sprite1 : { + mode : 'css' // Sprite with «css» mode + }, + sprite2 : { + mode : 'css' // Another sprite with «css» mode + } + } +}; + +config = { + mode : { + css : { + example : true + } + } +}; + +config = { + mode : { + css : { + example : {} + } + } +}; + +config = { + mode : { + css : { + render : { + css : { + template : 'path/to/template.html', // relative to current working directory + dest : 'path/to/demo.html' // relative to current output directory + } + } + } + } +}; + +config = { + mode : { + css : { + example : false + } + } +}; diff --git a/svg-sprite/svg-sprite.d.ts b/svg-sprite/svg-sprite.d.ts index 77a510bee..c319fb174 100644 --- a/svg-sprite/svg-sprite.d.ts +++ b/svg-sprite/svg-sprite.d.ts @@ -7,20 +7,48 @@ /// /// -import {LoggerInstance} from "winston"; declare module "svg-sprite" { import File = require('vinyl'); + import winston = require('winston'); namespace sprite { - import Function = Stream.Function; interface SVGSpriterConstructor extends NodeJS.EventEmitter { + /** + * The spriter's constructor (always the entry point) + * @param config Main configuration for the spriting process + */ new(config: Config): SVGSpriter; } interface SVGSpriter { + /** + * Registering source SVG files + * @param file Absolute path to the SVG file or a vinyl file object carrying all the necessary values (the following arguments are ignored then). + * @param name The "local" part of the file path, possibly including subdirectories which will get traversed to CSS selectors using the shape.id.separator configuration option. + * @param svg SVG file content. + */ add(file: string|File, name: string, svg: string): SVGSpriter; + /** + * Registering source SVG files + * @param file Absolute path to the SVG file or a vinyl file object carrying all the necessary values (the following arguments are ignored then). + */ + add(file: File): SVGSpriter; + /** + * Triggering the sprite compilation + * @param config Configuration object setting the output mode parameters for a single compilation run. If omitted, the mode property of the main configuration used for the constructor will be used. + * @param callback Callback triggered when the compilation has finished. + */ compile(config: Config, callback: CompileCallback): SVGSpriter; + /** + * Triggering the sprite compilation + * @param callback Callback triggered when the compilation has finished. + */ compile(callback: CompileCallback): void; + /** + * Accessing the intermediate SVG resources + * @param dest Base directory for the SVG files in case the will be written to disk. + * @param callback Callback triggered when the shapes are available. + */ getShapes(dest: string, callback: GetShapesCallback): void; } @@ -33,7 +61,7 @@ declare module "svg-sprite" { /** * Logging verbosity or custom logger */ - log?: string|LoggerInstance; + log?: string|winston.LoggerInstance; /** * SVG shape configuration */ @@ -59,74 +87,74 @@ declare module "svg-sprite" { /** * SVG shape ID related options */ - id: { + id?: { /** * Separator for directory name traversal */ - separator: string; + separator?: string; /** * SVG shape ID generator callback */ - generator: string|((string) => string); + generator?: string|((svg: string) => string); /** * File name separator for shape states (e.g. ':hover') */ - pseudo: string; + pseudo?: string; /** * Whitespace replacement for shape IDs */ - whitespace: string; + whitespace?: string; }; /** * Dimension related options */ - dimension: { + dimension?: { /** * Max. shape width */ - maxWidth: number; + maxWidth?: number; /** * Max. shape height */ - maxHeight: number; + maxHeight?: number; /** * Floating point precision */ - precision: number; + precision?: number; /** * Width and height attributes on embedded shapes */ - attributes: boolean; + attributes?: boolean; }; /** * Spacing related options */ - spacing: { + spacing?: { /** * Padding around all shapes */ - padding: number|number[]; + padding?: number|number[]; /** * Padding strategy (similar to CSS `box-sizing`) */ - box: string; + box?: string; }; /** * List of transformations / optimizations */ - transform: (string|CustomConfigurationTransform|CustomCallbackTransform)[]; + transform?: (string|CustomConfigurationTransform|CustomCallbackTransform)[]; /** * Path to YAML file with meta / accessibility data */ - meta: string; + meta?: string; /** * Path to YAML file with extended alignment data */ - align: string; + align?: string; /** * Output directory for optimized intermediate SVG shapes */ - dest: string; + dest?: string; } /** @@ -134,7 +162,7 @@ declare module "svg-sprite" { */ interface CustomConfigurationTransform { [transformationName: string]: { - plugins: { [transformationName: string]: boolean }[]; + plugins?: { [transformationName: string]: boolean }[]; } } @@ -160,14 +188,14 @@ declare module "svg-sprite" { * If you set this to TRUE, *svg-sprite* will look at the registered shapes for an XML declaration and use the first one it can find. * @default true */ - xmlDeclaration: boolean|string; + xmlDeclaration?: boolean|string; /** * Include a declaration in each compiled sprite. If you provide a non-empty string here, * it will be used one-to-one as declaration (e.g. ). * If you set this to TRUE, *svg-sprite* will look at the registered shapes for a DOCTYPE declaration and use the first one it can find. * @default true */ - doctypeDeclaration: boolean|string; + doctypeDeclaration?: boolean|string; /** * In order to avoid ID clashes, the default behavior is to namespace all IDs in the source SVGs before compiling them into a sprite. * Each ID is prepended with a unique string. In some situations, it might be desirable to disable ID namespacing, e.g. when you want to script the resulting sprite. @@ -269,6 +297,10 @@ declare module "svg-sprite" { * @default false */ example?: RenderingConfiguration; + /** + * Specify svg-sprite which output mode to use with this configuration + */ + mode?: string; } interface RenderingConfiguration {