DOCSEARCHbyAlgolia
Submit Docs

flag-icons

repository·main·Indexed 11 days ago

https://github.com/lipis/flag-icons

A curated collection of country flags provided as SVGs with accompanying CSS for web integration. Version 7.5.0 supports installation via npm or Yarn, CDN usage, and SASS integration with customizable country inclusions and paths. Flags are displayed using ISO 3166-1-alpha-2 codes via CSS classes such as .fi and .fi-xx.

Tokens
1.1K
Snippets
6
Records
6
Agent score
46%

What's inside flag-icons

  2. Display flags in HTML

    main

    To display a flag, use an element (typically a <span>) with the following classes:

    • .fi: The base class for flag icons.
    • .fi-xx: The country identifier, where xx is the ISO 3166-1-alpha-2 code (e.g., gr for Greece).
    • .fis: Add this class to create a squared version of the flag.
    • .fib: Use this class instead of .fi if you are applying the flag to an element other than a <span> (like a <div>).

    Note on sizing: When using .fib, the flag is set with background-size: contain, background-position: 50%, and background-repeat: no-repeat. You must manually set the dimensions to a 4:3 ratio, or add the flag-icon-squared class for a square ratio.

    <!-- Standard 4:3 flag -->
<span class="fi fi-gr"></span> 

<!-- Squared flag -->
<span class="fi fi-gr fis"></span>

  3. Use flag-icons via CDN

    main

    If you prefer not to install the package locally, you can include the CSS directly in your HTML using a CDN link.

    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
/>

  4. Import flag-icons CSS

    main

    To use the flags, you must first import the CSS. You can do this via a direct module import in JavaScript, via a CDN link in HTML, or using SASS.

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

  5. Use flag-icons with SASS

    main

    You can integrate the flags into your SASS workflow. You can either use the default configuration or provide custom configuration to override the flag path or include only specific countries.

    @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")
);

  6. Configure SVGO for flag-icons optimization

    main

    The project uses SVGO to optimize SVG files. The configuration uses a preset-default and includes specific plugins to ensure ID uniqueness and clean SVG attributes.

    Key plugins used:

    • preset-default: Applies the standard SVGO optimization suite.
    • prefixIds: Prevents ID collisions by prefixing IDs with the filename (basename). It uses a hyphen - as a delimiter.
    • convertStyleToAttrs: Converts CSS styles into SVG attributes.
    • removeDimensions: Removes width and height attributes.
    • removeScriptElement: Removes <script> elements.
    • removeStyleElement: Removes <style> elements.
    • sortAttrs: Sorts SVG attributes alphabetically.
    module.exports = {
  plugins: [
    {
      name: "preset-default",
    },
    {
      name: "prefixIds",
      params: {
        delim: "-",
        prefix: (_, info) => {
          if (info.path != null && info.path.length > 0) {
            return getBasename(info.path).split(".")[0];
          }
          return "prefix";
        },
      },
    },
    "convertStyleToAttrs",
    "removeDimensions",
    "removeScriptElement",
    "removeStyleElement",
    "sortAttrs",
  ],
};