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