flag-icons README

The project's README from github.com/lipis/flag-icons. As one markdown file: README.md.

flag-icons

A curated collection of all country flags in SVG — plus the CSS for easier integration. See the demo.

Install

You can either download the whole project as is or install it via npm or Yarn:

npm install flag-icons
# or
yarn add flag-icons

Usage

First, you need to import css:

import "/node_modules/flag-icons/css/flag-icons.min.css";

or use CDN:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css"
/>

or use SASS:

@use "node_modules/flag-icons/sass/flag-icons";

// or with custom configuration
@use "node_modules/flag-icons/sass/flag-icons" with (
  // Override path to flags directory
  $flag-icons-path: "node_modules/flag-icons/flags",

  // Include only specific country flags
  $flag-icons-included-countries: ("gr", "de", "gb")
);

You can find all available variables in sass/_variables.scss.

For using the flags inline with text add the classes .fi and .fi-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag then add the class fis as well. Example:

<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>

You could also apply this to any element, but in that case you'll have to use the fib instead of fi and you're set. This will add the correct background with the following CSS properties:

background-size: contain;
background-position: 50%;
background-repeat: no-repeat;

Which means that the flag is just going to appear in the middle of an element, so you will have to set manually the correct size of 4 by 3 ratio or if it's squared add also the flag-icon-squared class.

Development

Run the yarn to install the dependencies after cloning the project and you'll be able to:

To build *.scss files

$ yarn build

To serve it on localhost:8000

$ yarn start

To have only specific countries in the css file, remove the ones that you don't need from the _flag-icons-list.scss file and build it again.

Credits

flag-icons (lipis/flag-icons)

responsive
Searching Database…

12.5K ·GitHub
Flag-icons
What is this?flag-icons is a curated collection of every country's flag as SVG files, packaged with CSS/SASS classes so you can drop a flag into a webpage with a single class name.
Is this just a set of image files or does it come with ready CSS classes?Both: raw SVG flag files plus a compiled CSS/SASS stylesheet that defines a class for each country code, so you don't have to write your own background-image rules.
How do I add it to a project?Install via npm or Yarn, or download the project files directly, then import the CSS (or SASS) and link to it; a CDN option is also available.
Do I need a build tool to use it?No, you can just link the prebuilt CSS or use the CDN; Yarn and SASS are only needed if you want to build/customize the stylesheet yourself from source.
Can I trim it down to only the countries I need?Yes, but it requires rebuilding: remove the countries you don't need from flag-icons-list.scss and recompile the SCSS, there's no built-in flag to do this at runtime.
How do I actually put a flag on the page?Add the classes .fi and .fi-xx (the ISO 3166-1-alpha-2 country code) to an empty element; add .fis for a square version, or use .fib with any element type for a background flag.
Where did the original flag artwork come from?The project is built on an older, now-deleted SVG flag collection originally created by a contributor known as koppi, credited in the README.
Can I use the flags with Sass variables instead of plain CSS?Yes, the project ships a sass/variables.scss file with all available variables for customizing the flag styles in your own SASS build.
How do flags get sized correctly?The CSS sets a background image at a fixed position, so you need to manually size the element to a 4:3 ratio (or add the squared class for a 1:1 flag).
What are similar projects?spectre, devicon, pure, tabler, feather, dashboards, Font-Awesome, css.gg
Which topics is it in?assets, static, ui-design, icons, responsive, frontend-framework, offline-first, svg, design, customization, css, html
Creator
lipis
Size
16.5 MB
Stars
12.5K
Updated
CommitOct 16Releasev7.6.0Oct 15
Age
13y
Commits · 90 Days