npm install
npm run serve

The Wikiedia list is nice to have an overview of all the flags and sort them by type so I can do all the flags with vertical stripes first, etc. CRW Flags gives a few historical information, but Vexilla Mundi gives construction sheets instructions which is highly valuable. For the colors, I either use the ones defined on the Wikipedia page (if any), otherwise I take the one in the SVG of the Wikipedia article.

The colors from CRW Flags are too bright, and those of Vexila Mundi are in pantone and my pantone2hex converter does not always gives nice results.

I use Icomoon to add custom SVG to my Symbols font. I search on the UTF8 database to get the correct unicode (if any), and then find a SVG in thenounproject, crop it so it exactly fits the canvas in icomoon and add it to the page.

• Wikipedia list of countries with national flags
• ISO 3166 list of countries
• RGB/HEXA/PANTONE Converter
• Vexilla Mundi
• CRW Flags
• Icomoon App
• png2svg converter

1. Find the Vexilla Mundi flag page
2. Find the detail png (Network tab)
3. Run pngblack to put it in black
4. Run pngtrim to remove useless whitespace
5. Online png2svg converter
6. Upload to icomoon
7. Center it and scale it
8. Download resulting svg
9. Export the font

Putting a text in a before/after with a transparent color, so we can put it anywhere. Then use text-shadow to duplicate the element and position it anywhere, even being able to change its color.

By adding three symbols on two lines in a content and then carefully dealing with the first-letter/first-line, we can target all three elements individually. Each can have its own color/size and can text be text-shadowed to be placed anywhere.

Is is not possible to apply any rotation to those element, though.

• pantone2hex
• img2svg

• Add autoprefixer (we have -webkit-clip-path)
• Add CasperCSS?