<div align="center">
  <a href="https://github.com/On-the-road-dev/css-national-flags">
    <img src="https://github.com/On-the-road-dev/css-national-flags/blob/main/docs/logo.png?raw=true" alt="Icon" width="300"/>
  </a>
  <br>
  <br>
</div>

[See the online doc here](https://on-the-road-dev.github.io/css-national-flags/)

# CSS NTIONAL FLAGS

🇦🇨🇦🇩🇦🇪🇦🇫🇦🇬🇦🇮🇦🇱🇦🇲🇦🇴🇦🇶🇦🇷🇦🇸🇦🇹🇦🇺🇦🇼🇦🇽🇦🇿🇧🇦🇧🇧🇧🇩🇧🇪🇧🇫🇧🇬🇧🇭🇧🇮🇧🇯🇧🇱🇧🇲🇧🇳🇧🇴🇧🇶🇧🇷🇧🇸🇧🇹🇧🇻🇧🇼🇧🇾🇧🇿🇨🇦🇨🇨🇨🇩🇨🇫🇨🇬🇨🇭🇨🇮🇨🇰🇨🇱🇨🇲🇨🇳🇨🇴🇨🇵🇨🇷🇨🇺🇨🇻🇨🇼🇨🇽🇨🇾🇨🇿🇩🇪🇩🇬🇩🇯🇩🇰🇩🇲🇩🇴🇩🇿🇪🇦🇪🇨🇪🇪🇪🇬🇪🇭🇪🇷🇪🇸🇪🇹🇪🇺🇫🇮🇫🇯🇫🇰🇫🇲🇫🇴🇫🇷🇬🇦🇬🇧🇬🇩🇬🇪🇬🇫🇬🇬🇬🇭🇬🇮🇬🇱🇬🇲🇬🇳🇬🇵🇬🇶🇬🇷🇬🇸🇬🇹🇬🇺🇬🇼🇬🇾🇭🇰🇭🇲🇭🇳🇭🇷🇭🇹🇭🇺🇮🇨🇮🇩🇮🇪🇮🇱🇮🇲🇮🇳🇮🇴🇮🇶🇮🇷🇮🇸🇮🇹🇯🇪🇯🇲🇯🇴🇯🇵🇰🇪🇰🇬🇰🇭🇰🇮🇰🇲🇰🇳🇰🇵🇰🇷🇰🇼🇰🇾🇰🇿🇱🇦🇱🇧🇱🇨🇱🇮🇱🇰🇱🇷🇱🇸🇱🇹🇱🇺🇱🇻🇱🇾🇲🇦🇲🇨🇲🇩🇲🇪🇲🇫🇲🇬🇲🇭🇲🇰🇲🇱🇲🇲🇲🇳🇲🇴🇲🇵🇲🇶🇲🇷🇲🇸🇲🇹🇲🇺🇲🇻🇲🇼🇲🇽🇲🇾🇲🇿🇳🇦🇳🇨🇳🇪🇳🇫🇳🇬🇳🇮🇳🇱🇳🇴🇳🇵🇳🇷🇳🇺🇳🇿🇴🇲🇵🇦🇵🇪🇵🇫🇵🇬🇵🇭🇵🇰🇵🇱🇵🇲🇵🇳🇵🇷🇵🇸🇵🇹🇵🇼🇵🇾🇶🇦🇷🇪🇷🇴🇷🇸🇷🇺🇷🇼🇸🇦🇸🇧🇸🇨🇸🇩🇸🇪🇸🇬🇸🇭🇸🇮🇸🇯🇸🇰🇸🇱🇸🇲🇸🇳🇸🇴🇸🇷🇸🇸🇸🇹🇸🇻🇸🇽🇸🇾🇸🇿🇹🇦🇹🇨🇹🇩🇹🇫🇹🇬🇹🇭🇹🇯🇹🇰🇹🇱🇹🇲🇹🇳🇹🇴🇹🇷🇹🇹🇹🇻🇹🇼🇹🇿🇺🇦🇺🇬🇺🇲🇺🇳🇺🇸🇺🇾🇺🇿🇻🇦🇻🇨🇻🇪🇻🇬🇻🇮🇻🇳🇻🇺🇼🇫🇼🇸🇽🇰🇾🇪🇾🇹🇿🇦🇿🇲🇿🇼🏴󠁧󠁢󠁥󠁮󠁧󠁿🏴󠁧󠁢󠁳󠁣󠁴󠁿🏴󠁧󠁢󠁷󠁬󠁳󠁿

CSS-NATIONAL-FLAG is a simple css library that gives you the ability to put in your site the national flag just using a single class.

## Table of Contents

1. [Install](#install)
2. [Usage](#usage)
3. [Contributing](#contributing)
4. [Contributors](#contributors)
5. [License](#license)

<h2 align="center" id="install">Install</h2>

Include it from a cdn in your head

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@ontheroaddev/css-national-flags/build/bundle.css"
/>
```

<h2 align="center" id="usage">Usage</h2>

Use CSS-NATIONAL-FLAG is really simple. After installation, just use a nationa-flag className.

```html
<div class="otrd-nat_flg --AF" />
```

You can also use this modificator

<table>
    <tr>
        <th>Modificator</th>
        <th>What do</th>
    </tr>
    <tr>
        <td>`--mini`</td>
        <td>Print a 30px flag</td>
    </tr>
    <tr>
        <td>`--small`</td>
        <td>Print a 90px flag</td>
    </tr>
    <tr>
        <td>`--big`</td>
        <td>Print a 200px flag</td>
    </tr>
    <tr>
        <td>`--disabled`</td>
        <td>Print a opacity 0 flag (you can also use other modificator to change shape and size)</td>
    </tr>
     <tr>
        <td>`--heart`</td>
        <td>Print a flag with the heart shape (you can also use other modificator to change size and status)</td>
    </tr>
</table>

#### List of possible flag

```json
"AD","AE","AF","AG","AI","AL","AM","AN","AO","AR","AT","AU","KZ","AW","AX","AZ","BA","BB","BD","BE","BF","BG","BH","BI","BJ","BM","BN","BO","BR","BS","BT","BW","BY","BZ","CA","CAF","AS","CD","CEU","CF","CG","CH","CI","CL","CM","CN","CNA","CO","COC","CR","CSA","CU","CV","CY","CZ","DE","DJ","DK","DM","DO","DZ","EC","EE","EG","ER","ES","ET","EU","FI","FJ","FK","FM","FR","GA","GB","GD","GE","GG","GH","GI","GM","GN","GQ","GR","GT","GW","GY","HK","HN","HR","HT","HU","ID","IE","IL","IM","IN","IQ","IR","IS","IT","JE","JM","JO","JP","KE","KG","KH","KM","KN","KP","KR","KW","KY","LA","LB","LC","LI","LK","LR","LS","LT","LU","LV","LY","MA","MC","MD","ME","MG","MK","ML","MM","MN","MO","MR","MS","MT","MU","MV","MW","MX","MY","MZ","NA","NE","NG","NI","NL","NO","NP","NZ","OM","PA","PE","PF","PG","PH","PK","PL","PR","PT","PW","PY","QA","RO","RS","RU","RW","SA","SB","SC","SD","SE","SG","SH","SI","SK","SL","SM","SN","SO","SR","ST","SV","SY","SZ","TC","TD","TG","TH","TJ","TL","TM","TN","TO","TR","TT","TW","TZ","UA","UG","US","UY","UZ","VC","VE","VG","VN","VU","WS","WW","YE","ZA","ZM","ZW","ZZ","PS"
```

You can also see a preview on [Github pages](https://on-the-road-dev.github.io/css-national-flags/)

<h2 align="center" id="contributing">Contributing</h2>

#### **Reporting bugs**

- Open a GitHub issue

#### **Contributing with patches and bug fixes**

- Open a new GitHub pull request with the patch.
- Ensure the PR description clearly describes the problem and solution.

<h2 align="center" id="contributors">Contributors</h2>
<table>
  <tbody>
    <tr>
      <td align="center" valign="top">
        <img width="150" height="150" src="https://github.com/thecreazy.png?s=150">
        <br>
        <a href="https://github.com/thecreazy">Thecreazy</a>
        <p>Core</p>
      </td>
     </tr>
  </tbody>
</table>

<h2 align="center" id="license">License</h2>

[MIT][license-url]

[license-url]: https://github.com/On-the-road-dev/css-national-flags/blob/master/LICENSE.MD
