Nocturnal Programmer's Machine

    famfamfam-flags

    1.0.0 • Public • Published

    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

    Install

    npm i famfamfam-flags

    DownloadsWeekly Downloads

    6,982

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • t1st3