Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

famfamfam-flags

legacy-icons35.5kMIT1.0.0

FamFamFam Flags icon pack

icon, flag, img, famfamfam, png, gif

readme

famfamfam-flags

NPM version Bower version Packagist version Nuget version

Dependency Status Build Status

About

The Flags icon pack, as available on famfamfam website.

All credits for these icons go to their original author: Mark James (mjames@gmail.com)

The aim of this project is to make this icon pack available through various package managers, such as:

All icons are supplied in both PNG and GIF formats.

Extensions and updates

A flag has been added to the original package: gg.png (or gg.gif). This flag was created by Damien Guard (@damieng) (damieng@gmail.com), in the "add-on" package for FamFamFam icons named Silk Companion.

The flag for Myanmar has been updated: mm.png (or mm.gif). This flag was updated by @Lucas, and was created from Wikipedia.

The project now supports aliases in CSS spritesheets (see below). The feature was brought by @Rangoo94. For example, RE (Reunion) is an alias for FR (France), since Reunion shares the same flag as France. To see the aliases, please check the aliases.json file.

CSS spritesheets

You can insert the icons directly into your HTML with a common IMG tag:

<img alt="French Flag" src="dist/png/fr.png" width="16" height="11">

In addition to the icons by themselves, this project also ships a CSS spritesheet for the icon-pack. This spritesheet allows to load the entire icon-pack in just 1 image, and thus reduce HTTP calls.

This is what it actually looks:

Spritesheet

All the positioning of the icons inside this alone image is made through CSS, which allows you to just add block-type tags with the proper class and get the same result:

<div class="famfamfam-flags fr"></div>

Just remember to add the CSS stylesheet to the HEAD of your HTML page!

Install

NPM

npm install famfamfam-flags

Bower

bower install famfamfam-flags

Composer / Packagist

composer require legacy-icons/famfamfam-flags

NuGet

Install-Package famfamfam-flags

Build the whole project or your custom project

We use Gulp to build the project, so if you want to re-build or customize this project, you'll need Gulp.

After gulp is installed, and your CLI is pointed to your work directory, first install the dependencies:

with NPM 2.x.x

npm install

with NPM 3.x.x (resolve dependencies for node-spritesheet before this module's ones)

npm install grunt grunt-contrib-coffee grunt-contrib-clean

npm install

then be sure that you have ImageMagick installed for building spritesheet.

then, you can run the gulp build task to build the project:

gulp build

What the build task does?

First, it takes PNG and GIF files from the src folder, and tidies them to the dist folder.

Then it creates a spritesheet from the PNG images located in the src folder, and thus creates the sprite folder in dist.

If, for example you just want fr and gg icons in a spritesheet, you just have to fork this project, point your CLI to the working directory, empty the src directory, except fr and gg icons in PNG format, and then run the gulp build task.

You'll get the proper spritesheet and copies of the icons directly in the dist folder.

License

See License

changelog

Change Log

0.5.1 (2016/02/15 09:42 +00:00)

  • 37efc40 chore: v0.5.1 (@t1st3)
  • #20 chore(package): update gulp-cssnano to version 2.1.1 (@t1st3)
  • ba06931 chore(package): update gulp-cssnano to version 2.1.1 (@greenkeeperio-bot)
  • #19 chore(package): update gulp to version 3.9.1 (@t1st3)
  • ebee8b3 chore(package): update gulp to version 3.9.1 (@greenkeeperio-bot)
  • e63239d docs: update REDAME structure (@t1st3)
  • 91a8b55 docs: update REDAME structure (@t1st3)
  • e83179a docs: update REDAME structure (@t1st3)
  • e4725cf docs: explain dev-deps install for NPM 3 (@t1st3)
  • adbaa7e chore: renamed T1st3 to t1st3 (@t1st3)
  • b2f2dd1 chore: renamed T1st3 to t1st3 (@t1st3)
  • 7e0defd chore: travis.yml indentation (@t1st3)

0.5.0 (2016/01/19 13:39 +00:00)

  • 6e46357 chore: update changelog (@t1st3)
  • 1b856d2 chore: v0.5.0 (@t1st3)
  • 323a768 chore: update deps versions with caret ranges (@t1st3)
  • c2b8b05 chore: replace gulp-minify-css with gulp-cssnano (@t1st3)
  • ececd5e docs: add license docs for JE icon (@t1st3)
  • de5d968 chore: add @ before Github usernames (@t1st3)
  • b2ce7cf docs: add documentation for aliases in README (@t1st3)
  • d6c7231 chore: update changelog (@t1st3)
  • 4b872e4 chore: rebuild with new aliases (@t1st3)
  • e067fe5 fix: add aliases for RE, YT and GP to FR (@t1st3)
  • 72fb1c6 fix: remove BL alias (@t1st3)
  • b7975c8 chore: update changelog (@t1st3)
  • a2afcdd chore: remove figlets, cowsays and notifications (@t1st3)
  • #16 Add mechanism for aliases, use for BQ, BL & MF codes (@Rangoo94)
  • be74af7 Add mechanism for aliases, use for BQ, BL & MF codes (@Rangoo94)
  • #12 Rename Jersey flag from jersey to je (@Rangoo94)
  • 50e0d97 docs: add lucas34 in License for Myanmar flag (@t1st3)
  • #11 Add information about ImageMagick as dependency (@Rangoo94)
  • d5e68f5 Rename Jersey flag from jersey to je (@Rangoo94)
  • feb1182 Add information about ImageMagick as dependency (@Rangoo94)
  • 195cacf chore: add newline at end of config and .md files (@t1st3)
  • 439a811 docs: move licenses from README to LICENSE.md (@t1st3)
  • #7 chore(package): update gulp-minify-css to version 1.2.3 (@T1st3)
  • 144935d docs: add CHANGELOG.md (@t1st3)
  • 529b03b chore(package): update gulp-minify-css to version 1.2.3 (@greenkeeperio-bot)

0.4.1 (2015/12/22 13:03 +00:00)

  • acd82de chore: v0.4.1 (@t1st3)
  • 854cb96 feat: add MyGet deployment files and support for NuGet (@t1st3)
  • #6 Update all dependencies 🌴 (@T1st3)
  • 565d94d chore(package): update dependencies (@greenkeeperio-bot)
  • ad56ea1 chore: fix build task (@t1st3)

0.4.0 (2015/10/20 11:04 +00:00)

  • f686b9c chore: v0.4.0 (@t1st3)
  • 37783a2 feat: add jersey.png (@t1st3)
  • 10037bc chore: update NPM deps (del) (@t1st3)
  • 0f69eb4 chore: update.travis.yml to use Travis container-based infra (@t1st3)
  • fd8d78f docs: fix wrong links from previous commit (@t1st3)
  • 5f818f5 docs: update README (@t1st3)

0.3.5 (2015/08/17 13:30 +00:00)

  • 223e6d8 chore: v0.3.5 (@t1st3)
  • d282c71 fix: update mm flag (Myanmar) (@t1st3)
  • #3 Fix Myanmar flag (@lucas34)
  • 2fc45e2 Fix Myanmar flag (@lucas34)

0.3.4 (2015/07/28 00:53 +00:00)

  • 668fbbf chore: v0.3.4 (@t1st3)
  • a293305 chore: update npm deps (@t1st3)
  • d5d5e80 chore: update npm dev-deps (@t1st3)
  • 99c6db7 docs: update README (@t1st3)
  • 9a376ba docs: update README (@t1st3)
  • f4460f3 docs: update README (@t1st3)
  • b817d0e docs: update README (@t1st3)
  • 0828d06 docs: fix Silk-Companion URL in README (@t1st3)
  • d898f82 docs: fix Silk-Companion URL in README (@t1st3)
  • fc7c9c7 chore: update bower ignores (@t1st3)

0.3.3 (2015/03/22 15:04 +00:00)

  • d0a195c chore: v0.3.3 (@t1st3)
  • 6a674a6 docs: include spritesheet to README (@t1st3)
  • a7cd08c feat: add gg flag, from Silk Companion (@t1st3)
  • be4ca90 docs: add build badge in README (@t1st3)
  • 5e488d3 docs: add dependency badge in README (@t1st3)

0.3.2 (2015/03/19 16:23 +00:00)

  • a07266a chore: v0.3.2 (@t1st3)
  • bed4c6e docs: update mention to spritesheets in README (@t1st3)
  • 1f01166 docs: update mention to spritesheets in README (@t1st3)
  • 95f448e docs: update mention to spritesheets in README (@t1st3)
  • 3343f3a docs: add mention to spritesheet in README (@t1st3)

0.3.1 (2015/03/18 17:51 +00:00)

  • a5ac872 chore: v0.3.1 (@t1st3)
  • c815ede fix: update travis.yml to fix CI error (@t1st3)

0.3.0 (2015/03/18 16:39 +00:00)

  • 48dd346 chore: v0.3.0 (@t1st3)
  • e5187ac feat: build with imagemin, add spritesheet (@t1st3)
  • 3f185e1 chore: add imagemin and spritesheet as dev deps (@t1st3)
  • e53d76d chore: add icons to README (@t1st3)
  • 0505d10 chore: add icons to README (@t1st3)
  • 81df1a4 chore: add icons to README (@t1st3)
  • 762f1f0 chore: add icons to README (@t1st3)
  • d089ed6 chore: add icons to README (@t1st3)
  • 17f4d12 feat: add NPM deps and a 1st gulp task: gulp info (@t1st3)
  • 1af7abc chore: update .npmignore to exclude composer files (@t1st3)

0.2.4 (2015/03/10 21:40 +00:00)

  • ca959d7 chore: v0.2.4 (@t1st3)
  • e69d3f7 chore: update package.json files (@t1st3)

0.2.3 (2015/03/10 21:18 +00:00)

  • 1d80637 chore: v0.2.3 (@t1st3)
  • c11ed44 chore: update package.json files (@t1st3)
  • 02a769e chore: update package.json files (@t1st3)
  • 8baa44f chore: update package.json files (@t1st3)
  • 435a3fe chore: update bower.json ignores (@t1st3)

0.2.2 (2015/03/10 06:45 +00:00)

  • 5e38b80 chore: v0.2.2 (@t1st3)
  • 1b16fd9 feat: add auto-deploy on Travis (@t1st3)

0.2.1 (2015/03/10 01:58 +00:00)

  • cf1cfa7 chore: v0.2.1 (@t1st3)
  • 8973495 fix: remove version from composer.json (@t1st3)
  • 0aa8f21 fix: edit package name in README (@t1st3)

0.2.0 (2015/03/10 01:50 +00:00)

  • 3b4dd34 chore: change owner from kwipi to t1st3; bump to v0.2.0 (@t1st3)
  • #1 Added composer "component" syntax (@tagme)
  • 6ab6a93 Version information is not needed for composer/packagist to work. Using tags instead (@vworldat)
  • 19ba451 Added composer "component" syntax (@vworldat)

0.1.1 (2014/02/27 21:42 +00:00)