onyx includes a set of well-crafted SVG flags that are free to use.
If you want to download the flags as SVG, please head over to our GitHub repository(opens in a new tab).
A full changelog can be found here.
Copy link to headline:Installation
To get started, install the npm package with your corresponding package manager:
Afterwards, you can import and use flags as needed. Please see the OnyxIcon(opens in a new tab) for the technical documentation. Technically, flags are used the same way as icons in onyx. This means that also flags can be passed for all components that support icons.
Copy link to headline:Usage
There are two different ways of using / importing flags from this package:
Copy link to headline:Option 1: JavaScript import (recommended)
For the best developer experience, it is recommended to use JavaScript imports. This approach also supports IDE intellisense, so you can e.g. just start typing "flag" in your editor and all available flags will be suggested to you.
Copy link to headline:Option 2: Import from SVG file
Alternatively, you can import the icon from the raw SVG file:
Copy link to headline:Country names
You can get the country name of a flag in several languages using JavaScript's Intl.DisplayNames(opens in a new tab) API.
Here is an example on how to use it (together with vue-i18n(opens in a new tab)):
Copy link to headline:Expand code snippet
Alternatively, there is also metadata available for each flag exported from the @sit-onyx/flags package:
Copy link to headline:Expand code snippet
Copy link to headline:Available flags
You can hover over a flag to see its name. Click on it or press enter when selecting it via keyboard to copy the import statement for the selected flag.