- Notifications
You must be signed in to change notification settings - Fork14
jackiboy/flagpack
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A lightweight flag icon toolkit for the web
flagpack can be installed with npm.
npm install flagpackyou 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></span>
medium:
<span></span>
large:
<span></span>
rounded:
<span></span>
square variant:
<span></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 isfp).
$fp-prefix: 'fp' !default;Prepend Prefix:
Prepend the prefix to the country code e.g.fp-bo instead ofbo (the default is set to false).
$fp-prepend: false !default;Set default icon size:
This will also mofify thefp-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-pathis for the4x3 (rectangle) formats.$fp-1x1-pathis for the1x1 (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 around125kb gzipped this is including all the svgs (both1x1 and4x3 formats) plus the css. making it about10x smaller thanflag-icon-css.
Using only1x1 or4x3 formats will reduce the size to around60kb.
flagpack uses theflagkit 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.
About
A lightweight flag icon toolkit for the web.