### Development Server Output Example

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

An example of the output generated when the development server starts. It includes server version, settings, and logs for incoming requests.

```log
Starting up http-server, serving ./
Hit CTRL-C to stop the server
http-server version: 14.1.1
http-server settings: 
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
HTTP port: 8000
Press CTRL+C to stop the server
[YYYY-MM-DD HH:MM:SS] "GET /" "Mozilla/5.0..."
[YYYY-MM-DD HH:MM:SS] "GET /css/flag-icons.min.css" "Mozilla/5.0..."
```

--------------------------------

### Installation Box Styling

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Styles the installation box, which displays installation commands. It uses a semi-transparent background, rounded corners, and flexbox for layout. Includes styling for code display and tab buttons.

```css
/* Installation box */
.install-box {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 500px;
  margin: 1.5rem auto;
  font-family: "SF Mono", "Fira Mono", "Courier New", Courier, monospace;
  position: relative;
  overflow: hidden;
}
.install-box code {
  overflow-x: auto;
  white-space: nowrap;
  font-size: 0.9rem;
  color: white;
}
.install-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}
.install-tab {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition);
}
.install-tab:first-child {
  border-top-left-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
}
.install-tab:last-child {
  border-top-right-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.install-tab.active {
  background: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}
.copy-btn {
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
  transition: var(--transition);
  border-radius: 4px;
}
.copy-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
/* Usage guide */
.usage-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  cursor: pointer;
  text-decoration: underline;
  transition: var(--transition);
}
.usage-btn:hover {
  color: white;
}
```

--------------------------------

### Serve flag-icons on localhost

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Run the 'start' command to serve the project on localhost:8000. This is useful for local development and testing.

```bash
$ yarn start
```

--------------------------------

### Development Workflow Steps

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Steps for the typical development workflow, from installing dependencies to iterating on changes.

```bash
# 1. Start with fresh dependencies
yarn install

# 2. Make changes to SASS or SVGs

# 3. Auto-format code
yarn fix

# 4. Build CSS
yarn build

# 5. Start dev server
yarn start

# 6. Open http://localhost:8000 in browser

# 7. Iterate: edit, build, refresh browser
```

--------------------------------

### Install flag-icons using Composer

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Install the flag-icons package using Composer for PHP projects.

```bash
composer require lipis/flag-icons
```

--------------------------------

### Setup Copy Buttons

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Initializes data attributes for elements intended to copy standard and square flag codes, pre-populating them with example HTML.

```javascript
const setupCopyButtons = () => {
  document.getElementById("copy-standard-code").dataset.code = `<span class="fi fi-us"></span> United States`;
  document.getElementById("copy-square-code").dataset.code = `<span class="fi fi-us fis"></span> United States`;
};
```

--------------------------------

### Start Development Server with Yarn

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

This command starts a local HTTP server for development and testing purposes. The server runs on localhost:8000 and serves static project files. Manual browser refresh is required for hot reloading.

```bash
yarn start
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Commands to install all project dependencies, including development tools like http-server, prettier, sass, and svgo. Both yarn and npm package managers are supported.

```bash
yarn install
# or
npm install
```

--------------------------------

### Install Dependencies

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Installs project dependencies using Yarn. This is a prerequisite for building and developing the flag-icons library.

```bash
yarn install
```

--------------------------------

### HTML Example with Basic Flag Icons

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Basic HTML structure demonstrating how to include flag icons for different languages using CDN.

```html
<!DOCTYPE html>
<html>
<head>
  <link 
    rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/flag-icons@7.5.0/css/flag-icons.min.css"
  />
</head>
<body>
  <h1>Languages</h1>
  <p><span class="fi fi-us"></span> English</p>
  <p><span class="fi fi-de"></span> German</p>
  <p><span class="fi fi-fr"></span> French</p>
</body>
</html>
```

--------------------------------

### Start Application on DOM Ready

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Ensures the application initialization function runs only after the entire HTML document has been loaded and parsed.

```javascript
document.addEventListener("DOMContentLoaded", init);
```

--------------------------------

### Install flag-icons via npm or Yarn

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Install the flag-icons library using your preferred package manager. This is the first step to integrating the flag icons into your project.

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

--------------------------------

### CDN Hosting Configuration Example

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Configure the flag-icons library to serve assets from a Content Delivery Network by setting the `$flag-icons-path` variable to a CDN URL.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/flags"
);
```

--------------------------------

### Custom Theme Example

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Shows how to import flag-icons with custom country selection and then apply additional custom styling to the flag elements.

```scss
@use "node_modules/flag-icons/sass/flag-icons" as flag-icons with (
  $flag-icons-included-countries: ("us", "gb", "de", "fr")
);

// Add custom styling
.fi {
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.fi-us {
  border: 2px solid blue;
}
```

--------------------------------

### React Example with Flag Icon

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Demonstrates how to import flag icons CSS and use a flag icon component in a React application.

```jsx
import 'flag-icons/css/flag-icons.min.css';

export default function App() {
  return <span className="fi fi-us"></span>;
}
```

--------------------------------

### Update Installation Command Display

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Updates the displayed installation command and highlights the active tab for npm or yarn.

```javascript
const switchInstallCommand = (type) => {
  installCommand.textContent = installCommands[type];
  copyBtn.dataset.copy = installCommands[type];
  installTabs.forEach((tab) => {
    if (tab.dataset.tab === type) {
      tab.classList.add("active");
    } else {
      tab.classList.remove("active");
    }
  });
};
```

--------------------------------

### Local Hosting Configuration Example

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Illustrates the default SASS configuration for local asset hosting, where flags are served from relative paths. This is suitable for development.

```scss
// Default configuration
$flag-icons-path: "../flags"
// Generated URL: ../flags/4x3/us.svg (relative to CSS file)
```

--------------------------------

### Install Sass Dependency

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Installs the 'sass' package if it's missing, resolving 'Cannot find module 'sass'' errors.

```bash
yarn install
# or
npm install sass@^1.89.2
```

--------------------------------

### CI/CD Pipeline Commands

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Commands for automated builds in CI/CD environments, including installation, testing, and building.

```bash
# Install
yarn install

# Check formatting
yarn test

# Build CSS
yarn build

# Validate data
python3 flag-ids.py
python3 flags.py
```

--------------------------------

### Vue Example with Flag Icon

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Shows how to import flag icons CSS and use a flag icon in a Vue.js component.

```vue
<script setup>
import 'flag-icons/css/flag-icons.min.css';
</script>

<template>
  <span class="fi fi-gb"></span>
</template>
```

--------------------------------

### HTML Examples for Displaying Flags

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Demonstrates how to display flags in HTML using different classes for inline text, square format, and as background images.

```html
<!-- Inline with text -->
<span class="fi fi-us"></span> United States
<span class="fi fi-gb"></span> United Kingdom

<!-- Square format -->
<span class="fi fi-us fis"></span> USA
<span class="fi fi-gb fis"></span> UK

<!-- As background image -->
<div class="fib fi-us" style="width:100px; height:75px;"></div>
```

--------------------------------

### Example Structure of Complete Country.json

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Provides a sample of the root country.json file, showing an array of country objects sorted alphabetically by name.

```json
[
  {
    "capital": "Kabul",
    "code": "af",
    "continent": "Asia",
    "flag_1x1": "flags/1x1/af.svg",
    "flag_4x3": "flags/4x3/af.svg",
    "iso": true,
    "name": "Afghanistan"
  },
  {
    "capital": "Tirana",
    "code": "al",
    "continent": "Europe",
    "flag_1x1": "flags/1x1/al.svg",
    "flag_4x3": "flags/4x3/al.svg",
    "iso": true,
    "name": "Albania"
  },
  // ... 250+ more entries sorted by name
]
```

--------------------------------

### Next.js App Router Layout Setup

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Import the flag-icons CSS in your root layout for the App Router in Next.js.

```typescript
// app/layout.tsx
import 'flag-icons/css/flag-icons.min.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
```

--------------------------------

### Next.js Pages Router App Setup

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Import the flag-icons CSS in your _app.tsx for the Pages Router in Next.js.

```typescript
// pages/_app.tsx
import 'flag-icons/css/flag-icons.min.css';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
```

--------------------------------

### Include Flag Icons CSS Locally

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Link to the flag-icons CSS file from your local installation. This method ensures offline availability but requires the package to be installed via npm or yarn.

```html
<link rel="stylesheet" href="/node_modules/flag-icons/css/flag-icons.min.css">

<span class="fi fi-us"></span>
```

--------------------------------

### Build Europe-Focused Stylesheet

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Example of configuring `$flag-icons-included-countries` to generate CSS for a specific region, in this case, European countries.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-included-countries: (
    "ad", "al", "at", "be", "bg", "by", "ch", "cy", "cz", "de", "dk", "ee",
    "es", "fi", "fr", "gb", "gr", "hr", "hu", "ie", "it", "lt", "lu", "lv",
    "mc", "md", "me", "nl", "no", "pl", "pt", "ro", "rs", "se", "si", "sk",
    "ua", "eu"
  )
);
```

--------------------------------

### Initialize Flag Icons Application

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Loads country data, creates flag cards, sets up event listeners for search, format switching, installation commands, and modal interactions.

```javascript
const init = async () => {
  try {
    const countries = await loadJSON("country.json");
    // Sort countries by name
    countries.sort((a, b) => a.name.localeCompare(b.name));
    // Create flag cards
    countries.forEach((country) => {
      const card = createFlagCard(country);
      if (country.iso) {
        isoFlagsGrid.appendChild(card);
      } else {
        nonIsoFlagsGrid.appendChild(card);
      }
      allFlags.push({ country, element: card });
    });

    setupCopyButtons();

    // Set up event listeners
    searchInput.addEventListener("input", filterFlags);
    format4x3Btn.addEventListener("click", () => switchFormat("4x3"));
    format1x1Btn.addEventListener("click", () => switchFormat("1x1"));

    // Installation tab switching
    installTabs.forEach((tab) => {
      tab.addEventListener("click", () => {
        switchInstallCommand(tab.dataset.tab);
      });
    });

    // Copy npm/yarn command
    copyBtn.addEventListener("click", (e) => {
      const textToCopy = e.currentTarget.dataset.copy;
      navigator.clipboard
        .writeText(textToCopy)
        .then(() => showCopyTooltip())
        .catch((err) => console.error("Could not copy text: ", err));
    });

    // Usage modal
    usageBtn.addEventListener("click", () => {
      usageModal.classList.add("active");
    });
    modalClose.addEventListener("click", () => {
      usageModal.classList.remove("active");
    });
    usageModal.addEventListener("click", (e) => {
      if (e.target === usageModal) {
        usageModal.classList.remove("active");
      }
    });

    // Filter dropdown
    filterBtn.addEventListener("click", toggleFilterDropdown);
    filterOptions.forEach((option) => {
      option.addEventListener("click", () => {
        currentFilter = option.dataset.filter;
        filterBtn.textContent = option.textContent + " ";
        const icon = document.createElement("i");
        icon.className = "bi bi-chevron-down";
        filterBtn.appendChild(icon);
        filterOptions.forEach((opt) => {
          opt.classList.toggle("active", opt === option);
        });
        filterFlags();
        toggleFilterDropdown();
      });
    });

    // Code block copy buttons
    codeBlockCopyBtns.forEach((btn) => {
      btn.addEventListener("click", () => copyCode(btn));
    });
  } catch (error) {
    console.error("Error initializing the application:", error);
  }
};
```

--------------------------------

### Example Usage of .fi Class

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Demonstrates how to use the .fi class with country codes to display rectangular flags next to text.

```html
<span class="fi fi-us"></span> United States
<span class="fi fi-gb"></span> United Kingdom
<span class="fi fi-de"></span> Germany
```

--------------------------------

### HTML Example for Flag Grid Display

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Demonstrates a responsive grid layout for displaying multiple flag icons with associated text, using CSS Grid for arrangement.

```html
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px;">
  <div style="text-align: center;">
    <span class="fi fi-us fis" style="font-size: 2em;"></span>
    <p>USA</p>
  </div>
  <div style="text-align: center;">
    <span class="fi fi-gb fis" style="font-size: 2em;"></span>
    <p>UK</p>
  </div>
  <div style="text-align: center;">
    <span class="fi fi-de fis" style="font-size: 2em;"></span>
    <p>Germany</p>
  </div>
</div>
```

--------------------------------

### Angular Global CSS Setup

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Demonstrates how to set up flag icon CSS globally in an Angular project, either by importing into `styles.css` or by configuring `angular.json`.

```css
@import 'flag-icons/css/flag-icons.min.css';
```

```json
{
  "projects": {
    "myapp": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/flag-icons/css/flag-icons.min.css",
              "src/styles.css"
            ]
          }
        }
      }
    }
  }
}
```

--------------------------------

### Example SVG Header with ID

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/data-reference.md

Illustrates the structure of an SVG file after the 'flag-ids.py' script has added a unique ID for accessibility purposes.

```xml
<svg id="flag-icons-us" viewBox="0 0 900 600" xmlns="http://www.w3.org/2000/svg">

```

--------------------------------

### Example ISO Country JSON (Full Fields)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Illustrates a complete country object with all fields populated, including capital, continent, and flag paths.

```json
{
  "capital": "Washington, D.C.",
  "code": "us",
  "continent": "North America",
  "flag_1x1": "flags/1x1/us.svg",
  "flag_4x3": "flags/4x3/us.svg",
  "iso": true,
  "name": "United States"
}
```

--------------------------------

### Complete Build Workflow Commands

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

A sequence of commands representing the full build workflow for a release. This includes installing dependencies, fixing formatting, optimizing SVGs, compiling SASS, and running tests.

```bash
# 1. Install dependencies
yarn install

# 2. Run formatting check/fix
yarn fix

# 3. Optimize SVG files
yarn svgo:all

# 4. Compile SASS
yarn build

# 5. Run tests
yarn test
```

--------------------------------

### Example European Country JSON

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Represents a European country with its capital, continent, and flag information.

```json
{
  "capital": "Berlin",
  "code": "de",
  "continent": "Europe",
  "flag_1x1": "flags/1x1/de.svg",
  "flag_4x3": "flags/4x3/de.svg",
  "iso": true,
  "name": "Germany"
}
```

--------------------------------

### Generate Square Flag CSS Rule

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Example of the CSS output generated for a square flag when `$flag-icons-use-square` is true.

```css
.fi-us.fis {
  background-image: url(../flags/1x1/us.svg);
}
```

--------------------------------

### Example Usage of .fib Class

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Shows how to use the .fib class with country codes on elements like divs and buttons, requiring manual sizing.

```html
<div class="fib fi-us" style="width: 120px; height: 90px;"></div>
<button class="fib fi-fr" style="width: 200px; height: 150px;"></button>
```

--------------------------------

### Example Usage of flag-icon Mixin

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Demonstrates how to include the `flag-icon` mixin in your Sass to generate flag CSS rules for a given country code.

```scss
@use "sass/flag-icons-base" as flag-icons-base;
@use "sass/variables" as variables;

// Generate rules for a single country
@include flag-icons-base.flag-icon("us");

// Generates:
// .fi-us { background-image: url(../flags/4x3/us.svg); }
// .fi-us.fis { background-image: url(../flags/1x1/us.svg); }
```

--------------------------------

### Example Asian Island Nation JSON

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Details an Asian island nation, including its capital, continent, and flag file paths.

```json
{
  "capital": "Tokyo",
  "code": "jp",
  "continent": "Asia",
  "flag_1x1": "flags/1x1/jp.svg",
  "flag_4x3": "flags/4x3/jp.svg",
  "iso": true,
  "name": "Japan"
}
```

--------------------------------

### Customize Included Countries with SASS

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Reduce the size of the CSS file by specifying only the countries you need. This example includes four countries.

```scss
@use "flag-icons" with (
  $flag-icons-included-countries: ("us", "gb", "de", "fr")
);
```

--------------------------------

### Example Usage of Country Classes

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Demonstrates the use of various country-specific classes, including standard countries and special regional/union flags, for both rectangular and square formats.

```html
<!-- Standard countries -->
<span class="fi fi-us"></span>    <!-- United States -->
<span class="fi fi-cn"></span>    <!-- China -->
<span class="fi fi-br"></span>    <!-- Brazil -->

<!-- Regional/special flags -->
<span class="fi fi-eu"></span>    <!-- European Union -->
<span class="fi fi-un"></span>    <!-- United Nations -->
<span class="fi fi-gb-eng"></span> <!-- England -->
<span class="fi fi-gb-sct"></span> <!-- Scotland -->

<!-- Square format -->
<span class="fi fi-us fis"></span>  <!-- United States (square) -->
<span class="fi fi-jp fis"></span>  <!-- Japan (square) -->
```

--------------------------------

### Sample Country Data: Afghanistan

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/data-reference.md

Example of a typical country entry, including capital, code, continent, and flag paths. This format is consistent across most entries.

```json
{
  "capital": "Kabul",
  "code": "af",
  "continent": "Asia",
  "flag_1x1": "flags/1x1/af.svg",
  "flag_4x3": "flags/4x3/af.svg",
  "iso": true,
  "name": "Afghanistan"
}
```

--------------------------------

### Example ISO Country JSON (Missing Optional Fields)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Shows a country object where optional fields like capital and continent are omitted, as seen for Antarctica.

```json
{
  "code": "aq",
  "flag_1x1": "flags/1x1/aq.svg",
  "flag_4x3": "flags/4x3/aq.svg",
  "iso": true,
  "name": "Antarctica"
}
```

--------------------------------

### Create Styled Flag Collections

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Assemble styled flag collections using a container element and individual flag spans. The example demonstrates using flexbox for layout and applies custom styling for size, background, and shadow to the collection.

```html
<div class="flag-grid">
  <span class="fi fi-us fis"></span>
  <span class="fi fi-gb fis"></span>
  <span class="fi fi-de fis"></span>
  <span class="fi fi-fr fis"></span>
  <span class="fi fi-it fis"></span>
</div>

<style>
.flag-grid {
  display: flex;
  gap: 8px;
  padding: 10px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.flag-grid .fi {
  font-size: 2em;
}
</style>
```

--------------------------------

### Display List of Country Flags

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Render a list or grid of country flags with associated labels using `<span>` elements with the `fi` and country code classes. The example uses CSS Grid for layout, allowing for responsive adjustments.

```html
<ul style="list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px;">
  <li><span class="fi fi-us fis"></span> <span>USA</span></li>
  <li><span class="fi fi-gb fis"></span> <span>UK</span></li>
  <li><span class="fi fi-de fis"></span> <span>Germany</span></li>
  <li><span class="fi fi-fr fis"></span> <span>France</span></li>
  <li><span class="fi fi-it fis"></span> <span>Italy</span></li>
  <li><span class="fi fi-es fis"></span> <span>Spain</span></li>
</ul>
```

--------------------------------

### Navigate to Project Directory

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Ensures you are in the correct directory before running build commands, resolving 'No such file or directory' errors.

```bash
cd /path/to/flag-icons
yarn svgo:all
```

--------------------------------

### Example Constituent Country JSON

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Shows a constituent country, like England, which has a hyphenated code and its own flag designation.

```json
{
  "code": "gb-eng",
  "flag_1x1": "flags/1x1/gb-eng.svg",
  "flag_4x3": "flags/4x3/gb-eng.svg",
  "iso": true,
  "name": "England"
}
```

--------------------------------

### Production Build Command

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Execute this command for a production build that generates minified CSS. This is recommended for distribution and deployment.

```bash
yarn build:min
```

--------------------------------

### React Native SVG Flag Loading

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Example of loading flag SVGs in React Native using the SvgUri component from react-native-svg.

```jsx
// React Native example (SVG loading)
import { SvgUri } from 'react-native-svg';

function FlagIcon({ code }) {
  const flagUrl = `https://cdn.jsdelivr.net/npm/flag-icons@7.5.0/flags/1x1/${code}.svg`;
  return <SvgUri uri={flagUrl} width={40} height={40} />;
}
```

--------------------------------

### Full CSS Build (Development and Minified)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Executes both the development and minified CSS build commands to generate both uncompressed and compressed CSS files.

```bash
yarn build
```

--------------------------------

### Development Build Command

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Run this command for a development build that generates unminified CSS. Useful for debugging and development purposes.

```bash
yarn build:dev
```

--------------------------------

### Prettier Configuration File

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

This JSON file specifies the Prettier configuration for the project. An empty object indicates that Prettier is using its default configuration with no custom overrides.

```json
{}
```

--------------------------------

### Example Special Regional Flag JSON

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Illustrates a special regional flag entry, such as the European Union, which lacks capital and continent fields.

```json
{
  "code": "eu",
  "flag_1x1": "flags/1x1/eu.svg",
  "flag_4x3": "flags/4x3/eu.svg",
  "iso": true,
  "name": "European Union"
}
```

--------------------------------

### Basic CSS Class Usage

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Demonstrates the basic usage of flag-icons CSS classes for displaying flags in both rectangular and square formats.

```html
<span class="fi fi-us"></span>        <!-- United States, rectangular (4:3) -->
<span class="fi fi-us fis"></span>    <!-- United States, square (1:1) -->
```

--------------------------------

### Example Usage of .fis Class for Square Flags

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Illustrates the difference between standard rectangular flags and square flags using the .fis modifier.

```html
<!-- Rectangular (4:3) -->
<span class="fi fi-us"></span>

<!-- Square (1:1) -->
<span class="fi fi-us fis"></span>
```

--------------------------------

### Run Tests

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Executes the test suite for the flag-icons library using Yarn.

```bash
yarn test
```

--------------------------------

### Default Build Commands

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Commands to compile the main Sass file into uncompressed and minified CSS files using the default configuration.

```bash
sass sass/flag-icons.scss css/flag-icons.css
sass sass/flag-icons.scss css/flag-icons.min.css --style=compressed
```

--------------------------------

### Build flag-icons SCSS files

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Run the 'build' command to compile the SCSS files into CSS. This is part of the development process for customizing the flag icons.

```bash
$ yarn build
```

--------------------------------

### SVGO Configuration Options

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Specifies SVGO options for SVG optimization, including pretty-printing, indentation, and precision for numeric values. These options are used by svgo:all and svgo:min.

```bash
yarn svgo --pretty --indent=2 --precision=1 {file}
```

--------------------------------

### NPM Package Configuration in package.json

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

This JSON object outlines the configuration for the flag-icons NPM package, including its name, version, main entry point, distributed files, and build scripts.

```json
{
  "name": "flag-icons",
  "version": "7.5.0",
  "main": "css/flag-icons.css",
  "files": ["css", "flags", "sass", "country.json"],
  "scripts": {
    "build:dev": "sass --no-source-map --no-charset sass/flag-icons.scss css/flag-icons.css",
    "build:min": "sass --no-source-map --no-charset --style=compressed sass/flag-icons.scss css/flag-icons.min.css",
    "build": "yarn build:dev && yarn build:min"
  }
}
```

--------------------------------

### Type-Safe Country Data Access in TypeScript

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Import and define an interface for country data to enable type-safe access and manipulation in TypeScript. Includes finding and filtering examples.

```typescript
import countries from './country.json';

interface Country {
  capital?: string;
  code: string;
  continent?: string;
  flag_1x1: string;
  flag_4x3: string;
  iso: boolean;
  name: string;
}

const countryList: Country[] = countries;

// Find by code
const germany: Country | undefined = countryList.find(c => c.code === 'de');

// Filter by continent
const asianCountries: Country[] = countryList.filter(c => c.continent === 'Asia');

// Type-safe access
if (germany) {
  console.log(`${germany.name} - ${germany.capital}`);
}
```

--------------------------------

### Include CSS via NPM

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Recommended method for including the flag-icons CSS in your project using NPM. This ensures you are using the latest stable version and allows for easy management.

```html
<!-- Recommended: NPM + Minified + Gzip -->
<link rel="stylesheet" href="/node_modules/flag-icons/css/flag-icons.min.css">
```

--------------------------------

### Include Flag Icons CSS via jsDelivr CDN

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Link to the flag-icons CSS file using the jsDelivr CDN for fast, global distribution without a build step. This is the recommended CDN method.

```html
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/flag-icons@7.5.0/css/flag-icons.min.css"
/>

<span class="fi fi-us"></span>
```

--------------------------------

### Load Country Data in JavaScript

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/data-reference.md

Demonstrates how to load country data from a JSON file in Node.js, ES Modules, and browser environments.

```javascript
// Node.js/CommonJS
const countries = require('./country.json');

// ES Modules
import countries from './country.json' assert { type: 'json' };

// Fetch in Browser
fetch('./country.json')
  .then(res => res.json())
  .then(countries => {
    console.log(`Loaded ${countries.length} countries`);
  });
```

--------------------------------

### Full Default Country List Example

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

The complete default list of country codes included in the SASS variables, covering ISO 3166-1 alpha-2 and special regional flags.

```scss
$flag-icons-included-countries: (
  "xx",         // Fallback
  "ad", "ae", "af", "ag", "ai", "al", "am", "ao", "aq", "ar", "as", "at", "au",
  "aw", "ax", "az", "ba", "bb", "bd", "be", "bf", "bg", "bh", "bi", "bj", "bl",
  // ... (238 total ISO and regional codes)
  "un", "xk"
);
```

--------------------------------

### PHP Template Usage

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Load country data, link CSS, and display a flag in PHP templates.

```php
<?php
// Load country data
$countries = json_decode(file_get_contents('vendor/lipis/flag-icons/country.json'), true);

// Link CSS in HTML head
echo '<link rel="stylesheet" href="vendor/lipis/flag-icons/css/flag-icons.min.css">';

// Display flag
$countryCode = 'us';
echo sprintf('<span class="fi fi-%s"></span>', $countryCode);
?>
```

--------------------------------

### HTML Example for Country Selector Dropdown

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

An HTML select element intended for a country dropdown. Note that CSS does not style option elements directly; a custom component is recommended for visual styling.

```html
<select id="country">
  <option value="">Select Country</option>
  <option value="us"><span class="fi fi-us"></span> United States</option>
  <option value="gb"><span class="fi fi-gb"></span> United Kingdom</option>
  <option value="de"><span class="fi fi-de"></span> Germany</option>
</select>

<script>
  // Note: CSS doesn't style option elements, use custom component instead
  const select = document.getElementById('country');
  select.addEventListener('change', () => {
    const code = select.value;
    console.log(`Selected country: ${code}`);
  });
</script>
```

--------------------------------

### Sass Import with Combined Custom Configuration

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Imports the flag-icons library with multiple custom settings, including asset path, square variant paths, square variant usage, and a specific list of countries.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "public/assets/flags",
  $flag-icons-rect-path: "/regular",
  $flag-icons-square-path: "/compact",
  $flag-icons-use-square: true,
  $flag-icons-included-countries: (
    "us", "gb", "de", "fr", "it", "es", "eu"
  )
);
```

--------------------------------

### Basic CSS Reset and Body Styling

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Applies a basic CSS reset for margin, padding, and box-sizing, and sets up default font, line-height, and colors for the body.

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: var(--dark);
  background-color: var(--light);
}
```

--------------------------------

### React Component for Displaying Flag Icons

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

A reusable React component for displaying flag icons, which takes a country code as a prop. It also includes an example of a country selector that uses the imported country data.

```jsx
import 'flag-icons/css/flag-icons.min.css';
import countries from 'flag-icons/country.json';

function FlagIcon({ code }) {
  return <span className={`fi fi-${code}`}></span>;
}

function CountrySelector() {
  const [selected, setSelected] = React.useState('us');
  
  return (
    <div>
      <select value={selected} onChange={(e) => setSelected(e.target.value)}>
        {countries.map(c => (
          <option key={c.code} value={c.code}>{c.name}</option>
        ))}
      </select>
      <FlagIcon code={selected} />
    </div>
  );
}
```

--------------------------------

### Customizing SASS Build with Variables

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Example of customizing the flag-icons SASS build by overriding default variables for flag path, included countries, and square flag usage. This allows for a tailored build with specific flags and paths.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "https://cdn.example.com/flags",
  $flag-icons-included-countries: ("us", "gb", "de", "fr"),
  $flag-icons-use-square: false
);
```

--------------------------------

### Maven Build Wrapper Script

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

A shell script that acts as a wrapper for Maven builds, facilitating integration within the Java ecosystem. It is used for building and packaging the library for publication to the Maven Central Repository.

```bash
./maven.sh
```

--------------------------------

### Google Analytics Configuration

Source: https://github.com/lipis/flag-icons/blob/main/index.html

This snippet configures Google Analytics for the project. It initializes the dataLayer and sets up the gtag function for tracking.

```javascript
window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-9LZGY0J38Z");
```

--------------------------------

### Import flag-icons using SASS

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Import flag-icons using SASS, with options to override the path to flags or include only specific country flags. This allows for more customized builds.

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

--------------------------------

### HTML CDN CSS Import

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Links the minified CSS file for flag-icons from a CDN in an HTML document.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flag-icons@7.5.0/css/flag-icons.min.css">
```

--------------------------------

### Custom Asset Path Configuration

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Configures the flag-icons library to load flag assets from a custom URL, such as a CDN. This is useful when flags are hosted externally.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "https://cdn.example.com/flags"
);
```

--------------------------------

### Responsive Flag Sizing with Sass

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Utilize Sass to define responsive font sizes for flag icons based on media queries.

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

.fi {
  font-size: 1.5em;
  
  @media (max-width: 768px) {
    font-size: 1.2em;
  }
  
  @media (max-width: 480px) {
    font-size: 0.9em;
  }
}
```

--------------------------------

### Custom Build Command with Reduced Countries

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Command to rebuild the CSS after modifying the `$flag-icons-included-countries` variable in `sass/_variables.scss` to create a custom stylesheet.

```bash
sass sass/flag-icons.scss css/flag-icons-custom.css
```

--------------------------------

### Importing Sass Partials for Flag Icons

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Import specific Sass partials to include only variables and base styles, or to manually generate styles for individual flags.

```scss
@use "sass/variables";
@use "sass/flag-icons-base";

// Use only variables and base styles
.fi { @extend .fib; }

// Manually generate specific flags
@include flag-icons-base.flag-icon("us");
@include flag-icons-base.flag-icon("gb");
@include flag-icons-base.flag-icon("de");
```

--------------------------------

### Display All Countries in Select Dropdown

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/data-reference.md

Fetches country data from a JSON file and populates an HTML select dropdown. Ensure 'country.json' is accessible in the same directory.

```html
<select id="country-select">
  <option value="">Select a country...</option>
</select>

<script>
  fetch('./country.json')
    .then(res => res.json())
    .then(countries => {
      const select = document.getElementById('country-select');
      countries.forEach(country => {
        const option = document.createElement('option');
        option.value = country.code;
        option.textContent = country.name;
        select.appendChild(option);
      });
    });
</script>
```

--------------------------------

### Default SASS Configuration

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Imports the flag-icons SASS library using all default settings. This includes all countries and both rectangular and square flag variants with default paths.

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

--------------------------------

### Optimize All SVGs with SVGO

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Finds all SVG files in the flags directory, applies SVGO optimization, and regenerates SVG IDs. This is used for formatting refresh and optimization before release.

```bash
yarn svgo:all
```

```bash
find flags | grep '\.svg$' | xargs -Iz -n 1 yarn svgo z && yarn ids
```

--------------------------------

### Minimize All SVGs with SVGO

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/build-and-utilities.md

Finds all SVG files in the flags directory, applies SVGO minimization, and regenerates SVG IDs. This is used for production optimization and file size reduction.

```bash
yarn svgo:min
```

```bash
find flags | grep '\.svg$' | xargs -Iz -n 1 svgo z && yarn ids
```

--------------------------------

### Python Direct File Access for Flags

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Load country data, find countries, filter by continent, and generate flag CSS classes in Python.

```python
import json

# Load country data
with open('node_modules/flag-icons/country.json', 'r', encoding='utf-8') as f:
    countries = json.load(f)

# Find by code
us = next((c for c in countries if c['code'] == 'us'), None)

# Filter by continent
european = [c for c in countries if c.get('continent') == 'Europe']

# CSS class generation
def get_flag_classes(country_code, square=False):
    base = f"fi fi-{country_code}"
    if square:
        base += " fis"
    return base
```

--------------------------------

### Flask Template for Flag Selector

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

Render country options in a Flask template and include JavaScript for flag display based on selection.

```html
<!-- templates/flag_selector.html -->
{% for country in countries %}
  <option value="{{ country.code }}" data-flag-class="fi fi-{{ country.code }}">
    {{ country.name }}
  </option>
{% endfor %}

<script>
  document.querySelector('select').addEventListener('change', (e) => {
    const selected = e.target.options[e.target.selectedIndex];
    const flagClass = selected.dataset.flagClass;
    // Display flag using class
  });
</script>
```

--------------------------------

### Find Country Data in JavaScript

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Load the country data and find specific country objects by their ISO code. Access properties like name and flag path.

```javascript
const countries = require('./country.json');

// Find a country by code
const us = countries.find(c => c.code === 'us');
console.log(us.name); // "United States"
console.log(us.flag_4x3); // "flags/4x3/us.svg"

// Filter by continent
const european = countries.filter(c => c.continent === 'Europe');

// Get all ISO countries
const isoCountries = countries.filter(c => c.iso === true);

// Map to CSS classes
const cssClasses = countries.map(c => `.fi-${c.code}`);
```

--------------------------------

### SASS Development Build

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/index.md

Compiles the SASS files into an uncompressed CSS file for development purposes.

```bash
sass sass/flag-icons.scss css/flag-icons.css
```

--------------------------------

### Drive SASS Configuration with Environment Variables

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Use environment variables to dynamically set SASS variables like the asset path during the build process. This allows for environment-specific configurations.

```bash
# Example: Build different CSS per environment
ASSET_PATH=https://prod-cdn.example.com yarn build
# Then in SCSS:
$flag-icons-path: env(ASSET_PATH) !default;
```

--------------------------------

### Include Flag Icons CSS via unpkg CDN

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/integration-guide.md

An alternative CDN option using unpkg to link the flag-icons CSS file. Similar to jsDelivr, it provides easy access without a build process.

```html
<link 
  rel="stylesheet" 
  href="https://unpkg.com/flag-icons@7.5.0/css/flag-icons.min.css"
/>
```

--------------------------------

### Combined SASS Configuration with CDN and Specific Regions

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

This configuration demonstrates combining multiple options, including setting a CDN path, specifying rect and square flag paths, enabling square flag usage, and including a custom list of countries.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "https://flags.example.com",
  $flag-icons-rect-path: "/rect",
  $flag-icons-square-path: "/square",
  $flag-icons-use-square: true,
  $flag-icons-included-countries: (
    "us", "gb", "de", "fr", "nl", "be", "at", "ch", "eu"
  )
);
```

--------------------------------

### Production SASS Build Command

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

This command compiles and minifies the SASS files into a compressed CSS file suitable for production environments, utilizing specific SASS compiler flags.

```bash
sass --no-source-map --no-charset --style=compressed sass/flag-icons.scss css/flag-icons.min.css
```

--------------------------------

### Custom Build with Specific Countries

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Create a custom SASS file to include only a specific set of countries. This reduces the final CSS file size by excluding unused flags.

```scss
@use "sass/flag-icons" with (
  $flag-icons-included-countries: ("us", "gb", "de", "fr", "it")
);
```

--------------------------------

### Construct Background Image URL

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-sass.md

Internal SASS code showing how the flag icon path is used to construct the background-image URL for flag icons.

```scss
background-image: url(#{variables.$flag-icons-path}#{variables.$flag-icons-rect-path}/#{$country}.svg);
```

--------------------------------

### Combined Usage: Standard Inline Display with Text

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference-css-classes.md

Combines .fi and country code classes with inline text for displaying rectangular flags next to labels.

```html
<span class="fi fi-gb"></span> United Kingdom
<span class="fi fi-fr"></span> France
<span class="fi fi-de"></span> Germany
```

--------------------------------

### Create Country Selector with Flags

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/data-reference.md

Generates a clickable list of countries with their flags. Clicking an item displays an alert with the country's name and code. Requires 'country.json' to be imported.

```javascript
import countries from './country.json';

function createFlagSelector() {
  const list = document.createElement('ul');
  list.style.cssText = 'display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;';
  
  countries.forEach(country => {
    const item = document.createElement('li');
    item.style.cssText = 'cursor: pointer; padding: 10px; border-radius: 4px;';
    item.innerHTML = '
      <span class="fi fi-${country.code} fis" style="font-size: 2em;"></span>
      <div style="margin-top: 5px; font-size: 0.8em;">${country.name}</div>
    ';
    item.addEventListener('click', () => alert(`Selected: ${country.name} (${country.code})`));
    list.appendChild(item);
  });
  
  return list;
}

document.body.appendChild(createFlagSelector());
```