font-awesome-assets

Convert any of @FortAwesome's Font-Awesome icons to an asset, such as an <svg> tag or a Base64-encoded PNG/SVG <img> tag! It supports Retina devices and custom tag attributes too! This package was built for CrocodileJS.

It is perfect for embedding Font Awesome icons in your fancy HTML emails. Note that most email clients (e.g. Gmail) only support SVG paths or CID embedding, so you must either use <img src="image.svg" /> via fa.img or automate it with nodemailer-base64-to-s3.

Index

• Examples
• Install
• Usage
• License

Don't want to configure this yourself? Try CrocodileJS!

Examples

Write the fa-hacker-news icon with 100% opacity and orange colored to the file fa-hacker-news.svg:

import { svg } from 'font-awesome-assets';
import fs from 'fs';

const briefcase = svg('hacker-news', 'rgba(255,102,0,0.75)');

fs.writeFileSync('fa-hacker-news.svg', briefcase, 'utf8');

// outputs to the file named "fa-hacker-news.svg":
// '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1536 1792"><path fill="rgba(255,102,0,0.75)" d="M809 1004l266-499h-112l-157 312q-24 48-44 92l-42-92-155-312h-120l263 493v324h101v-318zM1536 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z" /></svg>'

Output the fa-briefcase icon with a black hex color #000:

import { svg } from 'font-awesome-assets';

const briefcase = svg('briefcase', '#000');

console.log(briefcase);

// outputs to the console:
// '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1792 1792"><path fill="#000" d="M640 256h512v-128h-512v128zM1792 896v480q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-480h672v160q0 26 19 45t45 19h320q26 0 45-19t19-45v-160h672zM1024 896v128h-256v-128h256zM1792 416v384h-1792v-384q0-66 47-113t113-47h352v-160q0-40 28-68t68-28h576q40 0 68 28t28 68v160h352q66 0 113 47t47 113z" /></svg>'

Output the same fa-briefcase icon with 50% opacity:

import { svg } from 'font-awesome-assets';

const briefcase = svg('briefcase', 'rgba(0,0,0,0.5)');

console.log(briefcase);

// outputs to the console:
// '<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1792 1792"><path fill="rgba(0,0,0,0.5)" d="M640 256h512v-128h-512v128zM1792 896v480q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-480h672v160q0 26 19 45t45 19h320q26 0 45-19t19-45v-160h672zM1024 896v128h-256v-128h256zM1792 416v384h-1792v-384q0-66 47-113t113-47h352v-160q0-40 28-68t68-28h576q40 0 68 28t28 68v160h352q66 0 113 47t47 113z" /></svg>'

Output the fa-briefcase with a black hex color #000 and 3x retina support as a PNG with a Base64-encoded data-uri.

import { png3x } from 'font-awesome-assets';

const briefcase = png3x('briefcase', '#000');

console.log(briefcase);

// outputs to the console:
// '<img width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAABYklEQVRoge2ZsUoDQRCGv4uigsRgEQOBwya1WlsIdnmYPIOFvW1eRPuAjyDkBS6VsQlaxeYssgfnarzc3OpkZT5YuOV2Z/6fnTtub0HONTAF8oZt6mL9KcfAoqHwclu4mLVpCQ1cAB3h3O/oAOeSibvChPte/xZ4qRmjC9yU+gdCLSKGfC6BgSDGwIsxlAiRltDW4JfQHpACScW8vtc/FeT25/SpXskcmAHv/o0UeACWhHuz/FZbOq1pIb4HzLdAWN02B3o7wBi49JckAg6BbgJklJYjMrKE1XJES/SvUTOgjRnQxgxoYwa0SYCRtggjdkJ9nxeMfhhTLtcgeaN/iKM3EHI/UPwIOAOu1ox5BJ7cdZC8IQ0cAW8bjm0DryGShiyhO1bCqmi7sUGwLaU2ZkAbM6DNvzAw0xbRgKwFTLRVNGAC8f5efwZOCiexHXDcO81fjpI2PWLSImfNEZNhGIYOH2xyJC1ddamJAAAAAElFTkSuQmCC" />'

Output the previous fa-briefcase, but this time with custom attributes such as a CSS class name and some custom inline styling.

import { png3x } from 'font-awesome-assets';

const briefcase = png3x('briefcase', '#000', null, null, [
  [ 'class', 'foo bar baz' ],
  [ 'style', 'display:inline-block;' ]
]);

console.log(briefcase);

// outputs to the console:
// '<img class="foo bar baz" style="display:inline-block;" width="16" height="16" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjUlEQVQ4jc3SMQrCQBCF4W/FxgNY28TO0gMIXsfjeKxcwiJpPMAWFlq4iptsJBhQf3gwu8M8hpmhzw4R145iymXMCgYb1Fh3VKdcRsAeByzS3wrLVPDKFmec0jviCE2h3bFqQgo+pjSD7xoEVFNNhgZUDcSZ5m+ML+77f8RF/mML7YT6tnTKY3me8m+5AZAcNId36KJdAAAAAElFTkSuQmCC">'

Install

npm install -s font-awesome-assets

Usage

import fa from 'font-awesome-assets';

or

import {
  svg,
  img,
  png,
  png2x,
  png3x,
  aliases,
  icons,
  iconsByUnicodeHex
} from 'font-awesome-assets';

fa.svg(name, color, width, height, attrs)

Accepts the following arguments and returns an <svg> tag:

• name (String) - the name of a valid FontAwesome icon (we strip the fa- prefix, so it is not needed, defaults to the smile-o icon).
• color (String) - a valid hex color or rgba value to render the SVG icon result with (defaults to #000).
• width (Number or String) - the width attribute (defaults to 100%).
• height (Number or String) - the height attribute (defaults to 100%).
• attrs (Array) - an array containing attribute names and value pairs that will be applied to the returned tag (e.g. [ [ 'attrName', 'attrValue' ], ... ], this is useful if you want to add custom CSS classes, style attributes, or other attributes in general to the returned tags).

fa.img(name, color, width, height, attrs)

Passes to fa.svg a width and height of 100% and returns an image tag with Base64 inlined data at the specified resolution (width and height get defaulted to auto).

fa.png(name, color, width, height, attrs, size)

Same as fa.img except it returns a PNG instead of an SVG (Note: the width and height params get default values of 16).

You can pass an optional size, which renders the image at a multiplier while restricting it to the given width and height attribute (this is useful for retina device support).

fa.png2x(name, color, width, height, attrs)

Same as fa.png except it automatically passes 2 as the size parameter for @2x retina support.

fa.png3x(name, color, width, height, attrs)

Same as fa.png except it automatically passes 3 as the size parameter for @3x retina support.

fa.aliases = [ ... ]

An array of all of the FontAwesome icon aliases (we used this to generate the rainbow of images above).

fa.icons = [ ... ]

An array of the data parsed by svgfont2js.

fa.iconsByUnicodeHex = { ... }

An object containing pairs of aliases to their respective icon data as parsed by svgfont2js.

License

• All icons, fonts, and SVG files are licensed under SIL OFL 1.1
• All code is licensed under MIT