@textabledev/langs-flags-list

    1.0.0 • Public • Published

    This package is a map of "language => flag" pairs prepared to be used in code and CSS.

    The main difference to other lists of flags is that this pairs languages to flag and not countries to flags. There are way more languages than countries so this list contains over 500 different languages including those that don't match any existing country such as Esperanto or Sumerian.

    Installation

    npm i --save @textabledev/langs-flags-list
    

    Usage

    This package contains three files:

    lang-flags.css

    The basic class for all icons is lang-icon that defines the default size for all icons which is 25x15 pixels. Some flags are smaller, so their width is overridden in their class.

    lang-icon doesn't define a path to the sprite image lang-flags.png so you can place is anywhere in your assets and then define background-image in your styles:

    .lang-icon {
        background-image: url(../lang-flags.png);
    }
    

    Map of all flags mapped to CSS lang-icon-* classes. For example lang-icon-en is the flag of the United Kingdom. This class, however, only sets background position inside lang-flags.png so it always has to be used together with lang-icon class.

    A complete example usage would look like the following:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example usage of @textabledev/langs-flags-list package</title>
        <link rel="stylesheet" href="../lang-flags.css">
        <style>
            .lang-icon {
                background-image: url(../lang-flags.png);
            }
        </style>
    </head>
    <body>
        <span class="lang-icon lang-icon-en"></span>
        <span class="lang-icon lang-icon-aqc"></span>
        <span class="lang-icon lang-icon-cs"></span>
        <span class="lang-icon lang-icon-de"></span>
    </body>
    </html>
    

    lang-flags.json

    Map of all language codes mapped to their names in English and their native language. For example de language code is represented as:

    "de": {
        "nameNative": "Deutsch",
        "nameEnglish": "German"
    },
    

    lang-flags.png

    Sprite image with all flags. Position for each flag is defined in lang-flags.css.

    Install

    npm i @textabledev/langs-flags-list

    DownloadsWeekly Downloads

    83

    Version

    1.0.0

    License

    GPL-3.0-or-later

    Unpacked Size

    265 kB

    Total Files

    10

    Last publish

    Collaborators

    • martinsik