Uihub

Appearance

Flags ​

Usage ​

To use the colors below copy your preferred CSS Selector and paste in the class you want to apply the color to

Installation ​

CDN ​

To use uihub icons include these links in your html file

html
<link rel="stylesheet" href="https://cdn.greyparrot.io/uihub-icons/uihub-icons.min.css">
<script src="https://cdn.greyparrot.io/uihub-icons/flags.umd.js"></script>

Download source file ​

Download the uihub-icons pack into your public or assets directory


└── project_root
    └── assets
        ├── .
        ├── ..
        └── uihub-icons
            ├── solid
            |   └── ar-vr/ar-vr.umd.js
            |   └── essentials/essentials.umd.js
            |   └── ...
            └── outlined
            |   └── things/things.min.js
            |   └── ...
            └── uihub-icons.min.css
            └── uihub-icons.umd.js
            └── flags.umd.js

Initialisation ​

Browser environment ​

Initialise by calling initUFlags() after loading the flags.umd.js script

html
<script>
    document.addEventListener("DOMContentLoaded", () => {
        initUFlags()
    })
</script>

Node environment ​

js
// Do this in a Lifecycle hook. e.g when DOM / component is initialised / mounted
await import("../flags.umd.js").then(() => {
    initUFlags()
})

Examples ​

Use an icon by the class u-icon and the flag you want. e.g user

ghana

html
<span class="u-icon">ghana</span>

You also have a pool of sizes to try out u-icon-16, u-icon-24, u-icon-32, u-icon-48, u-icon-64

ghanaghanaghanaghanaghana

html
<span class="u-icon u-icon-16">ghana</span>
<span class="u-icon u-icon-24">ghana</span>
<span class="u-icon u-icon-32">ghana</span>
<span class="u-icon u-icon-48">ghana</span>
<span class="u-icon u-icon-64">ghana</span>