No description
Find a file
2022-05-22 20:27:56 +10:00
_layouts Make project name link white 2022-05-05 22:16:14 +10:00
flags Create Kanuri flag and Kanuri language symlink 2022-05-22 20:27:56 +10:00
_config.yml Set theme jekyll-theme-cayman 2018-12-06 00:43:05 +11:00
favicon.ico Update favicon.ico to include more sizes 2021-06-29 14:38:56 +10:00
gallery.css Update gallery.css 2022-05-05 21:42:54 +10:00
gallery.md Update flags gallery 2022-05-05 19:47:00 +10:00
LICENSE.md Rename LICENSE to LICENSE.md 2022-05-15 18:25:05 +01:00
logo.svg Add logo 2021-06-13 20:17:06 +10:00
package.json Add package.json & instructions how to install with NPM 2020-12-17 18:40:05 +02:00
README.md Rename LICENSE to LICENSE.md 2022-05-15 18:25:05 +01:00
svgo.config.js Optimize files with svgo 2.3.1 2021-06-29 12:34:45 +10:00

circle-flags circle-flags animated logo

A collection of circular SVG country flags.

Usage

https://hatscripts.github.io/circle-flags/flags/xx.svg

(Where xx is the ISO 3166-1 alpha-2 code of a country).

For example, the following code:

<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/cn.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/gb.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/id.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/in.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ng.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ru.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

...produces this:

To view all the available flags, check the gallery.

React

If you're using React, you may want to try the react-circle-flags package.

NPM

If you want to install this package as a dependency, you can install it from this GitHub repository:

npm install --save https://github.com/HatScripts/circle-flags

Contributing

To contribute, you need to have svgo installed (version 2.3.1 or newer).

First, edit the relevant SVG files in the flags/ directory.

Then run svgo to optimize the SVG files:

svgo ./flags --recursive --config=svgo.config.js

Then commit the changes, and submit them as a pull request.

The color palette

Submitted flags should conform to the following color palette.
Try to match the flag's original colors with the nearest color from the palette.

  • #eeeeee: white
  • #acabb1: gray
  • #333333: black
  • #a2001d: dark red
  • #d80027: red
  • #ff9811: orange
  • #ffda44: yellow
  • #6da544: green
  • #496e2d: dark green
  • #338af3: light blue
  • #0052b4: blue

Special cases:

License

This project is released under the MIT license.