Skip to content

💄 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!

License

Notifications You must be signed in to change notification settings

couplingcafe/font-awesome-assets

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

font-awesome-assets

Slack Status NPM version Standard JS Style MIT License

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.

500px adjust adn align-center align-justify align-left align-right amazon ambulance american-sign-language-interpreting anchor android angellist angle-double-down angle-double-left angle-double-right angle-double-up angle-down angle-left angle-right angle-up apple archive area-chart arrow-circle-down arrow-circle-left arrow-circle-o-down arrow-circle-o-left arrow-circle-o-right arrow-circle-o-up arrow-circle-right arrow-circle-up arrow-down arrow-left arrow-right arrow-up arrows arrows-alt arrows-h arrows-v asl-interpreting assistive-listening-systems asterisk at audio-description automobile backward balance-scale ban bank bar-chart bar-chart-o barcode bars battery-0 battery-1 battery-2 battery-3 battery-4 battery-empty battery-full battery-half battery-quarter battery-three-quarters bed beer behance behance-square bell bell-o bell-slash bell-slash-o bicycle binoculars birthday-cake bitbucket bitbucket-square bitcoin black-tie blind bluetooth bluetooth-b bold bolt bomb book bookmark bookmark-o braille briefcase btc bug building building-o bullhorn bullseye bus buysellads cab calculator calendar calendar-check-o calendar-minus-o calendar-o calendar-plus-o calendar-times-o camera camera-retro car caret-down caret-left caret-right caret-square-o-down caret-square-o-left caret-square-o-right caret-square-o-up caret-up cart-arrow-down cart-plus cc cc-amex cc-diners-club cc-discover cc-jcb cc-mastercard cc-paypal cc-stripe cc-visa certificate chain chain-broken check check-circle check-circle-o check-square check-square-o chevron-circle-down chevron-circle-left chevron-circle-right chevron-circle-up chevron-down chevron-left chevron-right chevron-up child chrome circle circle-o circle-o-notch circle-thin clipboard clock-o clone close cloud cloud-download cloud-upload cny code code-fork codepen codiepie coffee cog cogs columns comment comment-o commenting commenting-o comments comments-o compass compress connectdevelop contao copy copyright creative-commons credit-card credit-card-alt crop crosshairs css3 cube cubes cut cutlery dashboard dashcube database deaf deafness dedent delicious desktop deviantart diamond digg dollar dot-circle-o download dribbble dropbox drupal edge edit eject ellipsis-h ellipsis-v empire envelope envelope-o envelope-square envira eraser eur euro exchange exclamation exclamation-circle exclamation-triangle expand expeditedssl external-link external-link-square eye eye-slash eyedropper fa facebook facebook-f facebook-official facebook-square fast-backward fast-forward fax feed female fighter-jet file file-archive-o file-audio-o file-code-o file-excel-o file-image-o file-movie-o file-o file-pdf-o file-photo-o file-picture-o file-powerpoint-o file-sound-o file-text file-text-o file-video-o file-word-o file-zip-o files-o film filter fire fire-extinguisher firefox first-order flag flag-checkered flag-o flash flask flickr floppy-o folder folder-o folder-open folder-open-o font font-awesome fonticons fort-awesome forumbee forward foursquare frown-o futbol-o gamepad gavel gbp ge gear gears genderless get-pocket gg gg-circle gift git git-square github github-alt github-square gitlab gittip glass glide glide-g globe google google-plus google-plus-circle google-plus-official google-plus-square google-wallet graduation-cap gratipay group h-square hacker-news hand-grab-o hand-lizard-o hand-o-down hand-o-left hand-o-right hand-o-up hand-paper-o hand-peace-o hand-pointer-o hand-rock-o hand-scissors-o hand-spock-o hand-stop-o hard-of-hearing hashtag hdd-o header headphones heart heart-o heartbeat history home hospital-o hotel hourglass hourglass-1 hourglass-2 hourglass-3 hourglass-end hourglass-half hourglass-o hourglass-start houzz html5 i-cursor ils image inbox indent industry info info-circle inr instagram institution internet-explorer intersex ioxhost italic joomla jpy jsfiddle key keyboard-o krw language laptop lastfm lastfm-square leaf leanpub legal lemon-o level-down level-up life-bouy life-buoy life-ring life-saver lightbulb-o line-chart link linkedin linkedin-square linux list list-alt list-ol list-ul location-arrow lock long-arrow-down long-arrow-left long-arrow-right long-arrow-up low-vision magic magnet mail-forward mail-reply mail-reply-all male map map-marker map-o map-pin map-signs mars mars-double mars-stroke mars-stroke-h mars-stroke-v maxcdn meanpath medium medkit meh-o mercury microphone microphone-slash minus minus-circle minus-square minus-square-o mixcloud mobile mobile-phone modx money moon-o mortar-board motorcycle mouse-pointer music navicon neuter newspaper-o object-group object-ungroup odnoklassniki odnoklassniki-square opencart openid opera optin-monster outdent pagelines paint-brush paper-plane paper-plane-o paperclip paragraph paste pause pause-circle pause-circle-o paw paypal pencil pencil-square pencil-square-o percent phone phone-square photo picture-o pie-chart pied-piper pied-piper-alt pied-piper-pp pinterest pinterest-p pinterest-square plane play play-circle play-circle-o plug plus plus-circle plus-square plus-square-o power-off print product-hunt puzzle-piece qq qrcode question question-circle question-circle-o quote-left quote-right ra random rebel recycle reddit reddit-alien reddit-square refresh registered remove renren reorder repeat reply reply-all resistance retweet rmb road rocket rotate-left rotate-right rouble rss rss-square rub ruble rupee safari save scissors scribd search search-minus search-plus sellsy send send-o server share share-alt share-alt-square share-square share-square-o shekel sheqel shield ship shirtsinbulk shopping-bag shopping-basket shopping-cart sign-in sign-language sign-out signal signing simplybuilt sitemap skyatlas skype slack sliders slideshare smile-o snapchat snapchat-ghost snapchat-square soccer-ball-o sort sort-alpha-asc sort-alpha-desc sort-amount-asc sort-amount-desc sort-asc sort-desc sort-down sort-numeric-asc sort-numeric-desc sort-up soundcloud space-shuttle spinner spoon spotify square square-o stack-exchange stack-overflow star star-half star-half-empty star-half-full star-half-o star-o steam steam-square step-backward step-forward stethoscope sticky-note sticky-note-o stop stop-circle stop-circle-o street-view strikethrough stumbleupon stumbleupon-circle subscript subway suitcase sun-o superscript support table tablet tachometer tag tags tasks taxi television tencent-weibo terminal text-height text-width th th-large th-list themeisle thumb-tack thumbs-down thumbs-o-down thumbs-o-up thumbs-up ticket times times-circle times-circle-o tint toggle-down toggle-left toggle-off toggle-on toggle-right toggle-up trademark train transgender transgender-alt trash trash-o tree trello tripadvisor trophy truck try tty tumblr tumblr-square turkish-lira tv twitch twitter twitter-square umbrella underline undo universal-access university unlink unlock unlock-alt unsorted upload usb usd user user-md user-plus user-secret user-times users venus venus-double venus-mars viacoin viadeo viadeo-square video-camera vimeo vimeo-square vine vk volume-control-phone volume-down volume-off volume-up warning wechat weibo weixin whatsapp wheelchair wheelchair-alt wifi wikipedia-w windows won wordpress wpbeginner wpforms wrench xing xing-square y-combinator y-combinator-square yahoo yc yc-square yelp yen yoast youtube youtube-play youtube-square

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

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

Examples

hacker-news

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>'

briefcase-black

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>'

briefcase-opacity

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>'

briefcase@3x

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" />'

briefcase@3x

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

About

💄 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!

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 94.0%
  • JavaScript 6.0%