@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.

Package Sidebar

Install

npm i @textabledev/langs-flags-list

Weekly Downloads

107

Version

1.0.0

License

GPL-3.0-or-later

Unpacked Size

265 kB

Total Files

10

Last publish

Collaborators

  • martinsik