Flagpack - Country flags as Phoenix.Component

Your Libraries & OS Mentoring Libraries
,
1

Hello all!

I just released the first version of my newest elixir package flagpack. With flagpack you can easily integrate country flags into your application.

Links

Overview

The library is based on flagpack.xyz and provides 250+ precompiled flags as Phoenix.Component.

Each flag can be inserted into existing heex templates by calling the corresponding function for a flag. The name of a flags function is the country’s three letter code (ISO 3166-1 alpha-3) in lowercase.

You can search for countries and it’s code here: Docs - Flag Index — Flagpack

In addition you are able to use the Flagpack.flag/1 function with the name attribute. This may be useful when displaying flags dynamically. Furthermore you can pass an optional class attribute to all functions to add additional classes to the flags (e.g. the width and height).

Examples

<Flagpack.usa />
<Flagpack.usa class="w-5 h-5" />

<Flagpack.flag name={:usa}/>
<Flagpack.flag name={:usa} class="w-5 h-5" />

Each flag is designed on a 32x24 grid with an aspect ratio of 4:3.

Any feedback is appreciated!

Best regards!

7 Likes
2

How about simply:

  1. create a temporary directory using System.tmp_dir()
  2. download flags into it
  3. use mix task to generate file like flag_components.exs

I’m not sure about flagpack, but you can test downloading flags to existing directory with just one line for example from any github repository with flags like:

curl -s https://api.github.com/repos/lipis/flag-icons/releases/latest \
  | jq -r .tarball_url \
  | xargs curl -L \
  | tar --wildcards -xzf - -C /path/to/tmp/dir */flags/4x3 --strip=3

This way all you need to do is to share a mix task and you do not need to store assets or generated flagpack.ex file. Therefore your git repository is much smaller and you do not need to update it all the time.

Also a priv directory is recommended for templates over assets. You can use something like:

template_path = :flagpack |> :code.priv_dir() |> Path.join("path/to/template.exs")
3 Likes