Skip to content

Commit c834d1e

Browse files
vvakamevvakame
committed
Merge pull request DefinitelyTyped#5795 from tkqubo/svg-sprite
Svg sprite
2 parents 87af974 + 79f74c8 commit c834d1e

File tree

2 files changed

+689
-0
lines changed

2 files changed

+689
-0
lines changed

‎svg-sprite/svg-sprite-tests.ts

Lines changed: 327 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,327 @@
1+
/// <reference path="svg-sprite.d.ts" />
2+
3+
import SVGSpriter = require('svg-sprite');
4+
import * as fs from 'fs';
5+
6+
var config: SVGSpriter.Config;
7+
8+
9+
//
10+
// README.md
11+
//
12+
13+
// Create spriter instance (see below for `config` examples)
14+
var spriter = new SVGSpriter(config);
15+
16+
// Add SVG source files — the manual way ...
17+
spriter.add('assets/svg-1.svg', null, fs.readFileSync('assets/svg-1.svg', {encoding: 'utf-8'}));
18+
spriter.add('assets/svg-2.svg', null, fs.readFileSync('assets/svg-2.svg', {encoding: 'utf-8'}));
19+
/* ... */
20+
21+
// Compile the sprite
22+
spriter.compile(function(error: any, result: any) {
23+
/* ... Write `result` files to disk or do whatever with them ... */
24+
});
25+
26+
// General configuration options
27+
28+
config = {
29+
dest : '.', // Main output directory
30+
log : null, // Logging verbosity (default: no logging)
31+
shape : { // SVG shape related options
32+
id : { // SVG shape ID related options
33+
separator : '--', // Separator for directory name traversal
34+
generator : function(svg: string) { /*...*/ return ''; }, // SVG shape ID generator callback
35+
pseudo : '~' // File name separator for shape states (e.g. ':hover')
36+
},
37+
dimension : { // Dimension related options
38+
maxWidth : 2000, // Max. shape width
39+
maxHeight : 2000, // Max. shape height
40+
precision : 2, // Floating point precision
41+
attributes : false, // Width and height attributes on embedded shapes
42+
},
43+
spacing : { // Spacing related options
44+
padding : 0, // Padding around all shapes
45+
box : 'content' // Padding strategy (similar to CSS `box-sizing`)
46+
},
47+
transform : ['svgo'], // List of transformations / optimizations
48+
meta : null, // Path to YAML file with meta / accessibility data
49+
align : null, // Path to YAML file with extended alignment data
50+
dest : null // Output directory for optimized intermediate SVG shapes
51+
},
52+
svg : { // General options for created SVG files
53+
xmlDeclaration : true, // Add XML declaration to SVG sprite
54+
doctypeDeclaration : true, // Add DOCTYPE declaration to SVG sprite
55+
namespaceIDs : true, // Add namespace token to all IDs in SVG shapes
56+
dimensionAttributes : true // Width and height attributes on the sprite
57+
},
58+
variables : {} // Custom Mustache templating variables and functions
59+
};
60+
61+
// Output modes
62+
63+
config = {
64+
mode : {
65+
css : true, // Create a «css» sprite
66+
view : true, // Create a «view» sprite
67+
defs : true, // Create a «defs» sprite
68+
symbol : true, // Create a «symbol» sprite
69+
stack : true // Create a «stack» sprite
70+
}
71+
};
72+
73+
config = {
74+
mode: {
75+
css: {
76+
// Configuration for the «css» sprite
77+
// ...
78+
}
79+
}
80+
};
81+
82+
// Common mode properties
83+
84+
config = {
85+
mode : {
86+
mode1 : {
87+
dest : "<mode>", // Mode specific output directory
88+
prefix : "svg-%s", // Prefix for CSS selectors
89+
dimensions : "-dims", // Suffix for dimension CSS selectors
90+
sprite : "svg/sprite.<mode>.svg", // Sprite path and name
91+
bust : true, // Cache busting (mode dependent default value)
92+
render : { // Stylesheet rendering definitions
93+
/* -------------------------------------------
94+
css : false, // CSS stylesheet options
95+
scss : false, // Sass stylesheet options
96+
less : false, // LESS stylesheet options
97+
styl : false // Stylus stylesheet options
98+
<custom> : ... // Custom stylesheet options
99+
------------------------------------------- */
100+
},
101+
example : false // Create an HTML example document
102+
}
103+
}
104+
};
105+
106+
// Basic examples
107+
108+
// A.) Standalone sprite
109+
110+
config = {
111+
mode : {
112+
inline : true, // Prepare for inline embedding
113+
symbol : true // Create a «symbol» sprite
114+
}
115+
};
116+
117+
// B.) CSS sprite with Sass resource
118+
119+
config = {
120+
mode : {
121+
css : { // Create a «css» sprite
122+
render : {
123+
scss : true // Render a Sass stylesheet
124+
}
125+
}
126+
}
127+
};
128+
129+
// C.) Multiple sprites
130+
131+
config = {
132+
mode : {
133+
defs : true,
134+
symbol : true,
135+
stack : true
136+
}
137+
};
138+
139+
// D.) No sprite at all
140+
141+
config = {
142+
shape : {
143+
dest : 'path/to/out/dir'
144+
}
145+
};
146+
147+
148+
149+
//
150+
// docs/configuration.md
151+
//
152+
153+
config = {
154+
shape : {
155+
id : { // SVG shape ID related options
156+
separator : '--', // Separator for directory name traversal
157+
generator : function(svg: string) { /*...*/ return ''; }, // SVG shape ID generator callback
158+
pseudo : '~', // File name separator for shape states (e.g. ':hover')
159+
whitespace : '_' // Whitespace replacement for shape IDs
160+
},
161+
dimension : { // Dimension related options
162+
maxWidth : 2000, // Max. shape width
163+
maxHeight : 2000, // Max. shape height
164+
precision : 2, // Floating point precision
165+
attributes : false, // Width and height attributes on embedded shapes
166+
},
167+
spacing : { // Spacing related options
168+
padding : 0, // Padding around all shapes
169+
box : 'content' // Padding strategy (similar to CSS `box-sizing`)
170+
},
171+
transform : ['svgo'], // List of transformations / optimizations
172+
meta : null, // Path to YAML file with meta / accessibility data
173+
align : null, // Path to YAML file with extended alignment data
174+
dest : null // Output directory for optimized intermediate SVG shapes
175+
}
176+
};
177+
178+
config = // SVGO transformation with default configuration
179+
{
180+
shape : {
181+
transform : ['svgo']
182+
/* ... */
183+
}
184+
};
185+
186+
config = // Equivalent transformation to ['svgo']
187+
{
188+
shape : {
189+
transform : [
190+
{svgo : {}}
191+
]
192+
/* ... */
193+
}
194+
};
195+
196+
config = // SVGO transformation with custom plugin configuration
197+
{
198+
shape : {
199+
transform : [
200+
{svgo : {
201+
plugins : [
202+
{transformsWithOnePath: true},
203+
{moveGroupAttrsToElems: false}
204+
]
205+
}}
206+
]
207+
/* ... */
208+
}
209+
};
210+
211+
config = // SVGO transformation with custom plugin configuration
212+
{
213+
shape : {
214+
transform : [
215+
{custom :
216+
217+
/**
218+
* Custom callback transformation
219+
*
220+
* @param {SVGShape} shape SVG shape object
221+
* @param {SVGSpriter} spriter SVG spriter
222+
* @param {Function} callback Callback
223+
* @return {void}
224+
*/
225+
function(shape, sprite, callback) {
226+
/* ... */
227+
callback(null);
228+
}
229+
}
230+
]
231+
/* ... */
232+
}
233+
};
234+
235+
config = // Custom global post-processing transformation
236+
{
237+
svg : {
238+
transform : [
239+
/**
240+
* Custom sprite SVG transformation
241+
*
242+
* @param {String} svg Sprite SVG
243+
* @return {String} Processed SVG
244+
*/
245+
function(svg) {
246+
/* ... */
247+
return svg;
248+
},
249+
250+
/* ... */
251+
]
252+
}
253+
};
254+
255+
config = {
256+
variables : {
257+
now : +new Date(),
258+
png : function() {
259+
return function(sprite: any, render: any) {
260+
return render(sprite).split('.svg').join('.png');
261+
}
262+
}
263+
}
264+
};
265+
266+
config = // Activate the «css» mode with default configuration
267+
{
268+
mode : {
269+
css : true
270+
}
271+
};
272+
273+
config = // Equivalent: Provide an empty configuration object
274+
{
275+
mode : {
276+
css : {}
277+
}
278+
};
279+
280+
config = // Multiple sprites of the same output mode
281+
{
282+
mode : {
283+
sprite1 : {
284+
mode : 'css' // Sprite with «css» mode
285+
},
286+
sprite2 : {
287+
mode : 'css' // Another sprite with «css» mode
288+
}
289+
}
290+
};
291+
292+
config = {
293+
mode : {
294+
css : {
295+
example : true
296+
}
297+
}
298+
};
299+
300+
config = {
301+
mode : {
302+
css : {
303+
example : {}
304+
}
305+
}
306+
};
307+
308+
config = {
309+
mode : {
310+
css : {
311+
render : {
312+
css : {
313+
template : 'path/to/template.html', // relative to current working directory
314+
dest : 'path/to/demo.html' // relative to current output directory
315+
}
316+
}
317+
}
318+
}
319+
};
320+
321+
config = {
322+
mode : {
323+
css : {
324+
example : false
325+
}
326+
}
327+
};

0 commit comments

Comments
 (0)