Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
A lightweight flag icon toolkit for the web
flagpack can be installed with npm.
npm install flagpack
you can import the built css file directly into your project. this will include all the css classes & flag icons.
Default flag: bo
is the country code (Bolivia 🇧🇴 is used in these examples).
<span class="fp bo"></span>
medium:
<span class="fp fp-md bo"></span>
large:
<span class="fp fp-lg bo"></span>
rounded:
<span class="fp fp-rounded bo"></span>
square variant:
<span class="fp fp-square bo"></span>
visit flag.pk to quickly copy your countries code for your project.
Flagpack is built with SASS (SCSS). There are a few variables that are !default
so that you can override them easily.
Set custom prefix:
Set the class prefix (the default is fp
).
$fp-prefix: 'fp' !default;
Prepend Prefix:
Prepend the prefix to the country code e.g. fp-bo
instead of bo
(the default is set to false).
$fp-prepend: false !default;
Set default icon size:
This will also mofify the fp-md
, fp-lg
& fp-rounded
sizes.
$fp-size: 1em !default;
Size Helpers:
By default Flagpack has a medium .md
and large .lg
helper class. you can disable generating these size classes if you don't need them.
$fp-size-md: true !default;
$fp-size-lg: true !default;
Countries:
If you would like to include only a few countries you can override this variable. Just Include the country codes you want.
$fp-countries: "ac", "ad", "ae", "af", "ag", "ai", "al", "am", "ao", "ar", "as",
"at", "au", "aw", "ax", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi",
"bj", "bl", "bm", "bn", "bo", "bq", "br", "bs", "bt", "bv", "bw", "by", "bz",
"ca", "cc", "cd", "cf", "cg", "ch", "ci", "ck", "cl", "cm", "cn", "co", "cr",
"cu", "cv", "cw", "cx", "cy", "cz", "de", "dj", "dk", "dm", "do", "dz", "ec",
"ee", "eg", "eh", "er", "es", "et", "eu", "fi", "fj", "fk", "fm", "fo", "fr",
"ga", "gb-eng", "gb-nir", "gb-sct", "gb-wls", "gb-zet", "gb", "gd", "ge", "gf",
"gg", "gh", "gi", "gl", "gm", "gn", "gp", "gq", "gr", "gs", "gt", "gu", "gw",
"gy", "hk", "hm", "hn", "hr", "ht", "hu", "id", "ie", "il", "im", "in", "io",
"iq", "ir", "is", "it", "je", "jm", "jo", "jp", "ke", "kg", "kh", "ki", "km",
"kn", "kp", "kr", "kw", "ky", "kz", "la", "lb", "lc", "lgbt", "li", "lk", "lr",
"ls", "lt", "lu", "lv", "ly", "ma", "mc", "md", "me", "mf", "mg", "mh", "mk",
"ml", "mm", "mn", "mo", "mp", "mq", "mr", "ms", "mt", "mu", "mv", "mw", "mx",
"my", "mz", "na", "nc", "ne", "nf", "ng", "ni", "nl", "no", "np", "nr", "nu",
"nz", "om", "pa", "pe", "pf", "pg", "ph", "pk", "pl", "pm", "pn", "pr", "ps",
"pt", "pw", "py", "qa", "re", "ro", "rs", "ru", "rw", "sa", "sb", "sc", "sd",
"se", "sg", "sh", "si", "sj", "sk", "sl", "sm", "sn", "so", "sr", "ss", "st",
"sv", "sx", "sy", "sz", "ta", "tc", "td", "tf", "tg", "th", "tj", "tk", "tl",
"tm", "tn", "to", "tr", "tt", "tv", "tw", "tz", "ua", "ug", "um", "us", "uy",
"uz", "va", "vc", "ve", "vg", "vi", "vn", "vu", "wf", "ws", "xk", "ye", "yt",
"za", "zm", "zw" !default;
Enable/Disable Formats:
You can optionally turn off flag formats if you would only like to use one format (both formats are enabled by default).
$fp-enable-4x3: true !default;
$fp-enable-1x1: true !default;
$fp-enable-rounded: true !default;
Flag SVG paths:
You will always need to override these variables if you are going to use the sass files directly in your project.
$fp-4x3-path
is for the 4x3 (rectangle) formats.$fp-1x1-path
is for the 1x1 (square) formats.$fp-4x3-path: '../flags/4x3/' !default;
$fp-1x1-path: '../flags/1x1/' !default;
Most flag libraries out there either use low quality png's or overly complex svg's that don't scale down well. Flagpack is around 125kb gzipped
this is including all the svgs (both 1x1 and 4x3 formats) plus the css. making it about 10x smaller than flag-icon-css.
Using only 1x1 or 4x3 formats will reduce the size to around 60kb
.
flagpack uses the flagkit as the base for it's icons plus a few custom additions. if you are looking for flags for IOS & Android please use this library.
FAQs
A lightweight flag icon toolkit for the web
The npm package flagpack receives a total of 6,519 weekly downloads. As such, flagpack popularity was classified as popular.
We found that flagpack demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.