Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 1 month 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 (about 1 month 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