https://github.com/eugene1g/font-blast

Give me an icon-font, and I'll create individual SVG/PNG files for all icons in it
https://github.com/eugene1g/font-blast

Last synced: 3 days ago
JSON representation

Give me an icon-font, and I'll create individual SVG/PNG files for all icons in it

• Host: GitHub
• URL: https://github.com/eugene1g/font-blast
• Owner: eugene1g
• License: mit
• Created: 2014-10-10T03:58:41.000Z (about 10 years ago)
• Default Branch: develop
• Last Pushed: 2019-05-07T11:51:27.000Z (over 5 years ago)
• Last Synced: 2024-10-29T06:41:28.953Z (10 days ago)
• Language: JavaScript
• Homepage:
• Size: 2.93 MB
• Stars: 337
• Watchers: 6
• Forks: 17
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svg - font-blast - convert an SVG font into individual SVGs (Conversion Tools)
• awesome-typography - fontblast - Give me an icon-font, and I'll create individual SVG/PNG files for all icons in it. (JavaScript)

README

        
## What is this

Icon Fonts are cool - Font Awesome/Foundation/Fontello/etc all have great-looking and well thought out icons.

`font-blast` can extract those cool icons from the font file, and create individual SVG/PNG files for every one of them.

## Why?

 - **Use cool icons outside of web pages**.  If you have individual icons as SVGs, you can import them into Sketch, Illustrator, PowerPoint, or any other app to use for visual mockups/presentations.

 - **Modify & repackage icons**. It's easy to change an individual SVG file, then repackage all images back into an icon-font (with e.g. Font Squirrel)

 - **Get high quality PNGs**. Generate high-res PNGs with a transparent backgrounds to use in native applications, emails, etc.

## Installation

Font-blast does not require PhantomJS or any other native binaries, so it should work pretty much everywhere.

Note: PNG images are generated with the embedded batik-rasterizer, and you will need have java installed to do that. Evil Java is not required for generating SVG files.

    $ npm install font-blast

    

    

## CLI usage

You can generate icons from the command line by called the script with two parameters: the SVG file of the font, and the directory where inidivual icons should be placed -

### CLI

    $ wget https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/fonts/fontawesome-webfont.svg

    $ bin/font-blast.js fontawesome-webfont.svg fa-icons/

 

### Node

    var fontBlast = require('font-blast');

    fontBlast('font-awesome.svg', 'fa-icons');

    

## Better Usage

### Smarter filenames

Just using the SVG file it is impossible to tell what the icon represents. Most icon-fonts have a mapping table which gives a human-friendly name to each unicode symbol.

See https://github.com/eugene1g/font-blast-examples