New docs (#1492)

docs/plugins/flags.mdx

@@ -0,0 +1,54 @@
+---
+title: Flags
+description: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
+plugin: flags
+libs: tabler-flags
+---
+
+import config from '../config.json'
+
+## Installation
+
+This part of Tabler is distributed as plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file to your page.
+
+You can also include plugin via CDN:
+
+```html
+<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css">
+```
+
+## Flag
+
+To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. The full list of countries can be found below.
+
+```html code example centered separated plugins="flags"
+<span class="flag flag-country-tg"></span>
+<span class="flag flag-country-br"></span>
+<span class="flag flag-country-pt"></span>
+```
+
+## Flag sizes
+
+Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
+
+```html example centered separated plugins="flags"
+<span class="flag flag-xl flag-country-us"></span>
+<span class="flag flag-lg flag-country-us"></span>
+<span class="flag flag-md flag-country-us"></span>
+<span class="flag flag-sm flag-country-us"></span>
+<span class="flag flag-xs flag-country-us"></span>
+```
+
+```html
+<span class="flag flag-xl ..."></span>
+<span class="flag flag-lg ..."></span>
+<span class="flag flag-md ..."></span>
+<span class="flag flag-sm ..."></span>
+<span class="flag flag-xs ..."></span>
+```
+
+## Types
+
+To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`.
+
+<FlagsTable flags={config.flags}/>