Hello there,

When I try to execute on Windows 8, it throws me this error.
The full command is:

font-awesome-svg-png --color red --sizes 128,256

And the full output is:

Downloading latest icons.yml ...
Downloading latest fontawesome-webfont.svg ...
Generating icon glass

Error: This socket is closed.
    at Socket._write (net.js:635:19)
    at doWrite (_stream_writable.js:221:10)
    at writeOrBuffer (_stream_writable.js:211:5)
    at Socket.Writable.write (_stream_writable.js:180:11)
    at Socket.write (net.js:613:40)
    at Socket.Writable.end (_stream_writable.js:335:10)
    at Socket.end (net.js:397:31)
    at C:\Users\Carlos\AppData\Roaming\npm\node_modules\font-awesome-svg-png\fon
t-awesome-svg-png.js:55:23
    at iterate (C:\Users\Carlos\AppData\Roaming\npm\node_modules\font-awesome-sv
g-png\node_modules\async\lib\async.js:134:13)
    at Object.async.eachSeries (C:\Users\Carlos\AppData\Roaming\npm\node_modules
\font-awesome-svg-png\node_modules\async\lib\async.js:150:9)

HI, CodeCharmLtd.

Thank you for the nice software.
Today, I got an error below.

$ font-awesome-svg-png --color red --sizes 32
Downloading latest icons.yml ...
Downloading latest fontawesome-webfont.svg ...

YAMLException: JS-YAML: end of the stream or a document separator is expected at line 8, column 25:
            background-color: #f1f1f1;
                            ^

Any ideas?

Thanks.

For instance, the first icon '.icon-adjust' shows like this:

Here are the contents of that file:

<svg width="2048" height="2048" viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg"><path d="M1024 1568V480q-148 0-273 73T553 751t-73 273 73 273 198 198 273 73zm512-2016q0 209-103 385.5T1153.5 217 768 320 382.5 217 103-62.5 0-448t103-385.5T382.5-1113 768-1216t385.5 103T1433-833.5 1536-448z"/></svg>

I feel like I'm missing something in my environment. When I run svg-png from npm (v1.1.1) my svgs are not the uniform 2048x2048 exports you have in the repo in black.

Here's my environment:

OSX 10.9.4
brew 0.9.5
librsvg: stable 2.36.3 (bottled)

The issue I have is the SVGs I'm generating appear to be variable size and have a huge amount of white space around them. I'm trying to use them with grunt-webfont to spin a custom font set. The documentation doesn't seem to list any switches for setting the max dimensions of the svgs or controlling their white space.

I noticed when I downloaded from the repo, your black icon set has uniform 2048x2048 icons with minimal white space. Can you please let me know how I can repeat your results? Is it because I'm using brew and not mac ports?

Thanks

I have tried to get it to generate a non black color and failed.
This is what I tried:

./font-awesome-svg-png.js --color CCC --sizes 64
./font-awesome-svg-png.js --color 888888 --sizes 64
./font-awesome-svg-png.js --color #888888 --sizes 64

I always get black icons. How to specify hex color I want? Please update README with that information.

the SVG file sprites.svg is invalid. Won't open in illustrator or affinity designer and won't display on GitHub. All say it is invalid...

According to http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/

Reported in FortAwesome/Font-Awesome#3203

Just curious. Would like to see a summary of that in the README.

I was trying to install on Windows 7 and got the following error (from npm-debug.log):

...
http GET https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.11.tgz
38 http 200 https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.11.tgz
39 silly lockFile b2ab7e8c--font-awesome-svg-png-1-0-11-tgz https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.11.tgz
40 silly lockFile b2ab7e8c--font-awesome-svg-png-1-0-11-tgz https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.11.tgz
41 silly lockFile 2ee279b3-font-awesome-svg-png-1-0-11 [email protected]
42 silly lockFile 2ee279b3-font-awesome-svg-png-1-0-11 [email protected]
43 silly lockFile c6717e62-font-awesome-svg-png font-awesome-svg-png@
44 silly lockFile c6717e62-font-awesome-svg-png font-awesome-svg-png@
45 error Error: shasum check failed for C:\Users\olli\AppData\Local\Temp\npm-3308-UHrNsbNg\1395769590093-0.31997589650563896\tmp.tgz
45 error Expected: 39461a1f7753d6b34fd5f28e415611e3c08dac5f
45 error Actual: d3723316154b7e7337c32a795492d3704449a2a2
45 error From: https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.11.tgz
45 error at C:\Program Files\nodejs\node_modules\npm\node_modules\sha\index.js:38:8
45 error at ReadStream. (C:\Program Files\nodejs\node_modules\npm\node_modules\sha\index.js:85:7)
45 error at ReadStream.EventEmitter.emit (events.js:117:20)
45 error at _stream_readable.js:920:16
45 error at process._tickCallback (node.js:415:13)
46 error If you need help, you may report this entire log,
46 error including the npm and node versions, at:
46 error http://github.com/npm/npm/issues
47 error System Windows_NT 6.1.7601
48 error command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "-g" "font-awesome-svg-png"
49 error cwd C:\Users\olli
50 error node -v v0.10.26
51 error npm -v 1.4.3
52 verbose exit [ 1, true ]

Hi, after I enter this command:
font-awesome-svg-png --color red --sizes 128,256 then rise these error:

usr/local/lib/node_modules/font-awesome-svg-png/lib/getIconSvg.js:16
  let paddingTop = (parseInt(verticalPadding / 2)) * PIXEL;
  ^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/font-awesome-svg-png/lib/generateSprites.js:6:16)
    at Module._compile (module.js:410:26)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/usr/local/lib/node_modules/font-awesome-svg-png/lib/generate.js:4:21)
    at Module._compile (module.js:410:26)

incorrect - crop finger

It's on the fort awesome page: https://fortawesome.github.io/Font-Awesome/icons/
but I can't find it on: https://github.com/encharm/Font-Awesome-SVG-PNG/tree/master/white/svg
Just a heads up! Love these icons, thank you.

The motorcycle character, in png version, is cropped at the right and left side.

Hello, I've recently installed the package on a new system, and as a result installed fresh dependencies. It looks as though Font Awesome have tweaked the structure of fontawesome-webfont.svg, so the getFontData parsing no longer works as expected.

From a cursory inspection, it looks like there are a few glyph tags without unicode attributes (e.g. glyph-name=".notdef", glyph-name=".null").

On my local system I have Font Awesome 4.6.3, which still works correctly.

I am getting the following error on Linux when I try to create the set using the following command:

font-awesome-svg-png --color black --sizes 32,64

Output plus error:

Downloading latest icons.yml ...
Downloading latest fontawesome-webfont.svg ...
Generating icon glass
Generating icon music
Generating icon search
Generating icon envelope-o

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: write EPIPE
    at errnoException (net.js:901:11)
    at Object.afterWrite (net.js:718:19)

Thanks.

Still generates svg versions if --svg false is set.

When is the instagram logo gonna be updated?

Any suggestions on why I might be getting this error on a Windows box?

C:\font-awesome-svg-png>node font-awesome-svg-png --sizes 16 --color red
Downloading latest icons.yml ...
Downloading latest fontawesome-webfont.svg ...

TypeError: Cannot call method 'toString' of undefined
    at Request._callback (C:\font-awesome-svg-png\font-awesome-svg-png.js:116:27)
    at self.callback (C:\font-awesome-svg-png\node_modules\request\request.js:122:22)
    at Request.EventEmitter.emit (events.js:95:17)
    at ClientRequest.self.clientErrorHandler (C:\font-awesome-svg-png\node_modules\reques
t\request.js:231:10)
    at ClientRequest.EventEmitter.emit (events.js:95:17)
    at CleartextStream.socketErrorListener (http.js:1547:9)
    at CleartextStream.EventEmitter.emit (events.js:95:17)
    at Socket.onerror (tls.js:1431:17)
    at Socket.EventEmitter.emit (events.js:117:20)
    at net.js:441:14

It's caused by this line

fontData = fontData.toString('utf8');

so fontData is undefined, any suggestions why that might be? I suspected a proxy issue (I need to go through one) but I configured node to use a proxy (I think).

I am only interested in svg generation, and not in png.

Is there any command line option by which I can generate only svg?

This will save runtime for me. Also I suspect that 'rsvg-convert' is only used for png. Which means I will not have to install librsvg at all.

FA 4.2.0 was released a couple of weeks ago

Hi,

the base size of fontawesome icons is 14px: if you export at 16px, you lose pixel perfection

Take in example the align-justify icon:

You should add 1px padding (then 2px, 3px..) for each side in order to provide pixel perfect icons

Refers to: FortAwesome/Font-Awesome#2795

On Font Awesome's cheatsheet, there are 549 icons:
http://fortawesome.github.io/Font-Awesome/cheatsheet/

But Font-Awesome-SVG-PNG generates only 479 icons.

Do we know the reason?
Maybe this might be a a known limitation, I just wanted to confirm.

Looking at Diamond from Fontawesome http://fortawesome.github.io/Font-Awesome/icon/diamond/
The one here is cropped.

I'm getting the following error when I try to install on OS X 10.9.2. Apparently the checksum of the binary is wrong.

$ npm install -g font-awesome-svg-png
npm http GET https://registry.npmjs.org/font-awesome-svg-png
npm http 304 https://registry.npmjs.org/font-awesome-svg-png
npm http GET https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.9.tgz
npm http 200 https://registry.npmjs.org/font-awesome-svg-png/-/font-awesome-svg-png-1.0.9.tgz
npm ERR! Error: shasum check failed for /var/folders/4f/mvdftm3d5ss0ystm0m2q8q3m0000gn/T/npm-84796-c2iyGUwH/1394507946187-0.39201818965375423/tmp.tgz
npm ERR! Expected: 68b0d3cf502d40367c548dc5e8775ff0f1d25bbc
npm ERR! Actual:   4d116bf25f4117178983c67c99811d43c2440bf7
npm ERR!     at /usr/local/Cellar/node/0.10.15/lib/node_modules/npm/node_modules/sha/index.js:38:8
npm ERR!     at ReadStream.<anonymous> (/usr/local/Cellar/node/0.10.15/lib/node_modules/npm/node_modules/sha/index.js:85:7)
npm ERR!     at ReadStream.EventEmitter.emit (events.js:117:20)
npm ERR!     at _stream_readable.js:910:16
npm ERR!     at process._tickCallback (node.js:415:13)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Darwin 13.1.0
npm ERR! command "/usr/local/Cellar/node/0.10.15/bin/node" "/usr/local/bin/npm" "install" "-g" "font-awesome-svg-png"
npm ERR! cwd /Users/snej
npm ERR! node -v v0.10.15
npm ERR! npm -v 1.3.5
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/snej/npm-debug.log
npm ERR! not ok code 0

Wide icons are not full displayed in the repo itself (for example with newspaper-o or university). Can you update the files so they are correctly displayed.

Kind regards,
Laurens

I generate SVGs with this script and convert them to PDF with another tool. However I need to set the SVG viewport size correctly for this to work. For example I need to set it to 22x22px size.

This is currently not possible, right?

Awesome job, these are much appreciated. However, I don't see the fa-th.svg anywhere. Perhaps you may be missing one. http://fontawesome.io/icon/th/

Is there any way I can use a custom hex color instead of the predefined javascript color set?

👍

It's out now, and I would like to use the new icons.

Hey,

I did make a PR with two of the critical params that we need right now ourselves - the --no-png and --icons, however I feel that this library could do with some cleanup:

• Extract/expose the png/svg/sprite generation as separate methods (to be used not only via command line)
• npm install font-awesome for the fontawesome-webfont.svg, instead of downloading from GitHub.
• a postinstall script should be used to download the icons.yml and save locally (instead of downloading for each run...) until FortAwesome/Font-Awesome#4851 is published
• probably ping the grunt library authors to use the cleaned up version as a library, instead of copy/pasted code :)

I'd be more than happy to PR for all of the above issues, but first - do let me know if this project is still alive, because otherwise we're better off just forking it...

Currently when I try to install the icons using bower install font-awesome-svg-png the only versions that are available are 1.1.2 and 1.1.0. This means that several icons that were added in 1.1.5 (for instance, the tv icon) are not available when doing a bower install. Could a release that includes these new icons be distributed?

Testing the svg files results in a browser not rendering the image but only the xml data. Tested this in chrome and in firefox. It seems the svg format the files are written in is incomplete. Any help on getting this resolved would be much appreciated.

Here is an svg file that is working correctly:
http://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg

Thank you.
Jake

Hello,

Would it be difficult to do a grunt task?

Thanks so much for sharing this fine work. I have used the svg in multiple projects. I thought it would be nice to also make these available in d3moji (see mathisonian/d3moji#2). Would you consider adding a gh-pages branch with all the svg so that we can use them? If not, I can easily fork and do the same on my end, but I wanted to make sure you got all the credit. Thanks for considering.

If some additional information might be helfpul, see this line from d3moji to see how it accesses the svg from the twitter emoji cdn.

I've tried to use your app to generate a png set of icons :

(I've installed the package through npm.)

$ ./font-awesome-svg-png.js --color e85500 --sizes 40 --dest e85500/

But I have the following error: (I've updated the ./font-awesome-svg-png.js to trace the errors)

Trace: Caught error [TypeError: Cannot read property 'charCodeAt' of undefined]
    at /home/fguerin/Projects/Font-Awesome-SVG-PNG/font-awesome-svg-png.js:76:11
    at tryCatcher (/home/fguerin/Projects/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._settlePromiseFromHandler (/home/fguerin/Projects/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/promise.js:510:31)
    at Promise._settlePromiseAt (/home/fguerin/Projects/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/promise.js:584:18)
    at Async._drainQueue (/home/fguerin/Projects/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/async.js:128:12)
    at Async._drainQueues (/home/fguerin/Projects/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/async.js:133:10)
    at Immediate.Async.drainQueues [as _onImmediate] (/home/fguerin/Projects/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/async.js:15:14)
    at processImmediate [as _immediateCallback] (timers.js:383:17)

I'm on a debian testing:

$ node --version 
v4.6.1

I'm getting an error when I run the script. I do have rsvg-convert installed

$ which rsvg-convert
/usr/local/bin/rsvg-convert

$ rsvg-convert -v
rsvg-convert version 2.36.3

$ node font-awesome-svg-png --color white --sizes 128,256
Downloading latest icons.yml ...
Downloading latest fontawesome-webfont.svg ...
Generating icon glass
Generating icon music
Generating icon search
Generating icon envelope-o
Generating icon heart
Generating icon star
Generating icon star-o
Generating icon user
Generating icon film
Generating icon th-large
Generating icon th
Generating icon th-list
Generating icon check
Generating icon times
Generating icon search-plus
Generating icon search-minus
Generating icon power-off
Generating icon signal
Generating icon cog
Generating icon trash-o
Generating icon home
Generating icon file-o
Generating icon clock-o
Generating icon road
Generating icon download
Generating icon arrow-circle-o-down
Generating icon arrow-circle-o-up
Generating icon inbox
Generating icon play-circle-o
Generating icon repeat
Generating icon refresh
Generating icon list-alt
Generating icon lock
Generating icon flag
Generating icon headphones
Generating icon volume-off
Generating icon volume-down
Generating icon volume-up
Generating icon qrcode
Generating icon barcode
Generating icon tag
Generating icon tags
Generating icon book
Generating icon bookmark
Generating icon print
Generating icon camera
Generating icon font
Generating icon bold
Generating icon italic
Generating icon text-height
Generating icon text-width
Generating icon align-left

child_process.js:935
throw errnoException(process._errno, 'spawn');
^
Error: spawn EMFILE
at errnoException (child_process.js:988:11)
at ChildProcess.spawn (child_process.js:935:11)
at exports.spawn (child_process.js:723:9)
at /Users/jllamas/Desktop/Projects/Exoplanet Archive/node_modules/font-awesome-svg-png/font-awesome-svg-png.js:124:25
at iterate (/Users/jllamas/Desktop/Projects/Exoplanet Archive/node_modules/font-awesome-svg-png/node_modules/async/lib/async.js:134:13)
at ChildProcess. (/Users/jllamas/Desktop/Projects/Exoplanet Archive/node_modules/font-awesome-svg-png/node_modules/async/lib/async.js:145:25)
at ChildProcess.g (events.js:180:16)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at Process.ChildProcess._handle.onexit (child_process.js:797:12)

I just tried to generate PNGs with this command:

font-awesome-svg-png --color "#000000,#FFFFFF,#EEC100,#0370E9" --sizes 50,100,200,300,500 --dest icons

However the generated PNGs are mostly empty. Only in the 500px Version I can see the top left part of the icon.

Example: Calculator.png in 500px

What is going wrong?

fa-user-circle and fa-user-circle-o seem to be missing.

Do you think Font-Awesome-SVG-PNG should try to put icons in a square by adding padding or keep it faithful to the original sizes?

For example http://fontawesome.io/icon/building/ and http://fontawesome.io/icon/building-o/ have a different width and forcing padding to make them square can have some alignment issues.

But I would still icons http://fontawesome.io/icon/battery-full/ as kind of an exception as they have wildly bigger width.

I'm using this to generate font-awesome icons for android, this requires me to generate multiple sizes and copy and paste the correct icons into the correct folder everytime. It would be super if I could just generate the necessary icons and then rename the folders to copy-paste them all at once, with a script.

No big deal if it isn't, but would be cool to have.

I'm trying to generate some icons with the color #268a8c. However, the resulting file path includes that # character in a directory name. I believe this causes my browser to refuse to load the file. It would be great if this generator would strip this character from file paths.

It would be great if you could include in the repo a version of the SVG files with fill set to currentColor.

I'd love to just be able to add this via bower and immediately get to work using the files.

Bower is effectively deprecated, would it be possible to expand what's offered through npm to include source files for those of us who roll out own SVG sprite sheets? The issue is the presence of black and white in .npmignore; without this, all files will be available, and it'll skip a compilation step for those of us rolling our own SVG sprite sheets.

Hi,

I noticed that generated png icons are not optimized.

(just a random example)

** Processing: windows.png
128x128 pixels, 4x8 bits/pixel, RGB+alpha
Reducing image to 8 bits/pixel, 70 colors (68 transparent) in palette
Input IDAT size = 769 bytes
Input file size = 844 bytes

Trying:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 350

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 0     IDAT size = 350

Output IDAT size = 350 bytes (419 bytes decrease)
Output file size = 722 bytes (122 bytes = 14.45% decrease)

I'm not skilled in your approach so I can't submit a pull request

maybe https://github.com/papandreou/node-optipng or https://github.com/yeoman/node-optipng-bin could be useful

I feel like the svg-sprites.svg file could do with a syntax update. Chris Coyier wrote a really good article about the syntax called SVG symbol a Good Choice for Icons. In it he describes this pattern for the svg sprite file:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="fa-glass" viewBox="0 0 1792 1792"><path d="..."></symbol>
  ...
  <symbol id="fa-medium" viewBox="0 0 1792 1792"><path d="..."></symbol>
</svg>

Reasons:

As Chris points out, there are some very good reasons for going with this markup style.

• It could open the doors for some really great accessibility (with the <title> and <desc> tags)
• The viewBox attribute should make consistent sizing very easy.
• "This is probably what <symbol> was invented for anyway."

I get that this will increase the file size (because of repetition over 519 icons), but GZIP eats this kind of character repetition for breakfast, so the performance hit shouldn't be all that severe.

Alternatively, all the <paths> could be wrapped inside a <defs> tag, which should hide things properly, and the <svg> itself could just be set to display: none;. Like so:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <defs>
    <path id="fa-glass" d="...">
    ...
    <path id="fa-medium" d="...">
  </defs>
</svg>

The google-plus.svg logo, both white and black, have parts of the logo cropped out.

https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/google-plus.svg
https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/white/svg/google-plus.svg

The main attribute is wrong, need set path to files.

"main": "Font-Awesome-SVG-PNG.js",

#23

https://github.com/crocodilejs/font-awesome-assets/

Would you mind adding it to your Readme?

It's really useful for emails in combination with https://github.com/crocodilejs/nodemailer-base64-to-s3

Hi,
I get this error meesage when I run the following command in terminal:
font-awesome-svg-png --color white --no-png
Error message:
Cought error TypeError: Cannot read property 'charCodeAt' of undefined at /usr/local/lib/node_modules/font-awesome-svg-png/lib/getFontData.js:20:39 at tryCatcher (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/util.js:26:23) at MappingPromiseArray._promiseFulfilled (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/map.js:56:38) at MappingPromiseArray.init (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/promise_array.js:92:18) at Promise._settlePromiseAt (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/promise.js:582:21) at Promise._settlePromises (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/promise.js:700:14) at Async._drainQueue (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/async.js:123:16) at Async._drainQueues (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/async.js:133:10) at Immediate.Async.drainQueues (/usr/local/lib/node_modules/font-awesome-svg-png/node_modules/bluebird/js/main/async.js:15:14) at runCallback (timers.js:637:20) at tryOnImmediate (timers.js:610:5) at processImmediate [as _immediateCallback] (timers.js:582:5)