1 | svgicons2svgfont is a simple tool to merge
|
2 | multiple icons to an SVG font.
|
3 |
|
4 | 'rect', 'line', 'circle', 'ellipsis', 'polyline' and 'polygon' shapes will be
|
5 | converted to pathes. Multiple pathes will be merged.
|
6 |
|
7 | Transform attributes support is currenly experimental,
|
8 | [report issues if any](https://github.com/nfroidure/svgicons2svgfont/issues/6).
|
9 |
|
10 | You can test this library with the
|
11 | [frontend generator](http://nfroidure.github.io/svgiconfont/).
|
12 |
|
13 | You may want to convert fonts to icons, if so use
|
14 | [svgfont2svgicons](https://github.com/nfroidure/svgfont2svgicons).
|
15 |
|
16 | ## Usage
|
17 |
|
18 | ### In your scripts
|
19 | ```js
|
20 | const SVGIcons2SVGFontStream = require('svgicons2svgfont');
|
21 | const fs = require('fs');
|
22 | const fontStream = new SVGIcons2SVGFontStream({
|
23 | fontName: 'hello'
|
24 | });
|
25 |
|
26 | // Setting the font destination
|
27 | fontStream.pipe(fs.createWriteStream('fonts/hello.svg'))
|
28 | .on('finish',function() {
|
29 | console.log('Font successfully created!')
|
30 | })
|
31 | .on('error',function(err) {
|
32 | console.log(err);
|
33 | });
|
34 |
|
35 | // Writing glyphs
|
36 | const glyph1 = fs.createReadStream('icons/icon1.svg');
|
37 | glyph1.metadata = {
|
38 | unicode: ['\uE001\uE002'],
|
39 | name: 'icon1'
|
40 | };
|
41 | fontStream.write(glyph1);
|
42 | // Multiple unicode values are possible
|
43 | const glyph2 = fs.createReadStream('icons/icon1.svg');
|
44 | glyph2.metadata = {
|
45 | unicode: ['\uE002', '\uEA02'],
|
46 | name: 'icon2'
|
47 | };
|
48 | fontStream.write(glyph2);
|
49 | // Either ligatures are available
|
50 | const glyph3 = fs.createReadStream('icons/icon1.svg');
|
51 | glyph3.metadata = {
|
52 | unicode: ['\uE001\uE002'],
|
53 | name: 'icon1-icon2'
|
54 | };
|
55 | fontStream.write(glyph3);
|
56 |
|
57 | // Do not forget to end the stream
|
58 | fontStream.end();
|
59 | ```
|
60 |
|
61 | ## CLI interface
|
62 | All options are available except the `log` one by using this pattern:
|
63 | `--{LOWER_CASE(optionName)}={optionValue}`.
|
64 | ```sh
|
65 | svgicons2svgfont --fontname=hello -o font/destination/file.svg icons/directory/*.svg
|
66 | ```
|
67 | Note that you won't be able to customize icon names or icons unicodes by
|
68 | passing options but by using the following convention to name your icons files:
|
69 | `${icon.unicode}-${icon.name}.svg` where `icon.unicode` is a comma separated
|
70 | list of unicode strings (ex: 'uEA01,uE001,uE001uE002', note that the last
|
71 | string is in fact a ligature).
|
72 |
|
73 | There is a few more options for the CLI interface, you can list all of them:
|
74 | ```txt
|
75 | svgicons2svgfont --help
|
76 | # Usage: svgicons2svgfont [options] <icons ...>
|
77 | #
|
78 | # Options:
|
79 | #
|
80 | # -V, --version output the version number
|
81 | # -v, --verbose tell me everything!
|
82 | # -o, --output [/dev/stdout] file to write output to
|
83 | # -f, --fontname [value] the font family name you want [iconfont]
|
84 | # -i, --fontId [value] the font id you want [fontname]
|
85 | # -st, --style [value] the font style you want
|
86 | # -we, --weight [value] the font weight you want
|
87 | # -w, --fixedWidth creates a monospace font of the width of the largest input icon
|
88 | # -c, --centerhorizontally calculate the bounds of a glyph and center it horizontally
|
89 | # -y, --centervertically centers the glyphs vertically in the generated font.
|
90 | # -n, --normalize normalize icons by scaling them to the height of the highest icon
|
91 | # -h, --height [value] the output font height [MAX(icons.height)] (icons will be scaled so the highest has this height)
|
92 | # -r, --round [value] setup the SVG path rounding [10e12]
|
93 | # -d, --descent [value] the font descent [0]
|
94 | # -a, --ascent [value] the font ascent [height - descent]
|
95 | # -s, --startunicode [value] the start unicode codepoint for unprefixed files [0xEA01]
|
96 | # -a, --prependUnicode prefix files with their automatically allocated unicode code point
|
97 | # -m, --metadata content of the metadata tag
|
98 | # -h, --help output usage information
|
99 | ```
|
100 |
|
101 | ## API
|
102 |
|
103 | ### new SVGIcons2SVGFontStream(options)
|
104 |
|
105 | #### options.fontName
|
106 | Type: `String`
|
107 | Default value: `'iconfont'`
|
108 |
|
109 | The font family name you want.
|
110 |
|
111 | #### options.fontId
|
112 | Type: `String`
|
113 | Default value: the options.fontName value
|
114 |
|
115 | The font id you want.
|
116 |
|
117 | #### options.fontStyle
|
118 | Type: `String`
|
119 | Default value: `''`
|
120 |
|
121 | The font style you want.
|
122 |
|
123 | #### options.fontWeight
|
124 | Type: `String`
|
125 | Default value: `''`
|
126 |
|
127 | The font weight you want.
|
128 |
|
129 | #### options.fixedWidth
|
130 | Type: `Boolean`
|
131 | Default value: `false`
|
132 |
|
133 | Creates a monospace font of the width of the largest input icon.
|
134 |
|
135 | #### options.centerHorizontally
|
136 | Type: `Boolean`
|
137 | Default value: `false`
|
138 |
|
139 | Calculate the bounds of a glyph and center it horizontally.
|
140 |
|
141 | #### options.centerVertically
|
142 | Type: `Boolean`
|
143 | Default value: `false`
|
144 |
|
145 | Centers the glyphs vertically in the generated font.
|
146 |
|
147 | #### options.normalize
|
148 | Type: `Boolean`
|
149 | Default value: `false`
|
150 |
|
151 | Normalize icons by scaling them to the height of the highest icon.
|
152 |
|
153 | #### options.fontHeight
|
154 | Type: `Number`
|
155 | Default value: `MAX(icons.height)`
|
156 | The outputted font height (defaults to the height of the highest input icon).
|
157 |
|
158 | #### options.round
|
159 | Type: `Number`
|
160 | Default value: `10e12`
|
161 | Setup SVG path rounding.
|
162 |
|
163 | #### options.descent
|
164 | Type: `Number`
|
165 | Default value: `0`
|
166 |
|
167 | The font descent. It is usefull to fix the font baseline yourself.
|
168 |
|
169 | **Warning:** The descent is a positive value!
|
170 |
|
171 | #### options.ascent
|
172 | Type: `Number`
|
173 | Default value: `fontHeight - descent`
|
174 |
|
175 | The font ascent. Use this options only if you know what you're doing. A suitable
|
176 | value for this is computed for you.
|
177 |
|
178 | #### options.metadata
|
179 | Type: `String`
|
180 | Default value: `undefined`
|
181 |
|
182 | The font [metadata](http://www.w3.org/TR/SVG/metadata.html). You can set any
|
183 | character data in but it is the be suited place for a copyright mention.
|
184 |
|
185 | #### options.metadataProvider
|
186 | Type: `(file: string, cb: (err: any, metadata: {file: string, name: string, unicode: string[], renamed: boolean}) => void`
|
187 |
|
188 | Default value: `require('svgicons2svgfont/src/metadata')(options)`
|
189 |
|
190 | A function which determines the metadata for an icon. It takes a parameter `file` with an icon svg and should return
|
191 | icon metadata (asynchronously) via the callback function. You can use this function to provide custom logic for svg to
|
192 | codepoint mapping.
|
193 |
|
194 | | | |
|
195 | | ------------------ | ---------------------------------------------------------------------------------------- |
|
196 | | `metadata.path` | The path to the icon file. (The original `file` param is the file was not moved.) |
|
197 | | `metadata.name` | The name of the icon |
|
198 | | `metadata.unicode` | The unicode codepoints corresponding to this glyph. Each should be a 1-codepoint string. |
|
199 | | `metadata.renamed` | Wether the original file was moved (e.g. to prefix it with its unicode codepoint) |
|
200 |
|
201 | #### options.log
|
202 | Type: `Function`
|
203 | Default value: `console.log`
|
204 |
|
205 | Allows you to provide your own logging function. Set to `function(){}` to
|
206 | disable logging.
|
207 |
|
208 | ## Build systems
|
209 |
|
210 | ### Grunt plugins
|
211 |
|
212 | [grunt-svgicons2svgfont](https://github.com/nfroidure/grunt-svgicons2svgfont)
|
213 | and [grunt-webfont](https://github.com/sapegin/grunt-webfont).
|
214 |
|
215 | ### Gulp plugins
|
216 |
|
217 | Try [gulp-iconfont](https://github.com/nfroidure/gulp-iconfont) and
|
218 | [gulp-svgicons2svgfont](https://github.com/nfroidure/gulp-svgicons2svgfont).
|
219 |
|
220 | ### Stylus plugin
|
221 |
|
222 | Use [stylus-iconfont](https://www.npmjs.org/package/stylus-iconfont).
|
223 |
|
224 | ### Mimosa plugin
|
225 |
|
226 | Use [mimosa-svgs-to-iconfonts](https://www.npmjs.org/package/mimosa-svgs-to-iconfonts).
|
227 |
|
228 | ## CLI alternatives
|
229 |
|
230 | You can combine this plugin's CLI interface with
|
231 | [svg2ttf](https://www.npmjs.com/package/svg2ttf),
|
232 | [ttf2eot](https://www.npmjs.com/package/ttf2eot),
|
233 | [ttf2woff](https://www.npmjs.com/package/ttf2woff)
|
234 | and [ttf2woff2](https://www.npmjs.com/package/ttf2woff2).
|
235 | You can also use [webfonts-generator](https://www.npmjs.com/package/webfonts-generator).
|
236 |
|
237 | ## Stats
|
238 |
|
239 | [![NPM](https://nodei.co/npm/svgicons2svgfont.png?downloads=true&stars=true)](https://nodei.co/npm/svgicons2svgfont/)
|
240 | [![NPM](https://nodei.co/npm-dl/svgicons2svgfont.png)](https://nodei.co/npm/svgicons2svgfont/)
|
241 |
|
242 | ## Contributing
|
243 | Feel free to push your code if you agree with publishing under the MIT license.
|