Skip to the content

Hata旗

Load a native country or region flag, choose supported framing and keep each drawing’s source, author and licence.

Hata (旗) is Japanese for a flag. About the name

Contents

Reference · On-demand flag loading

FrameOptionstype

How to frame a flag: its shape, how it fits, and a label for assistive technology. Every field may be left out.

Import it

import type { FrameOptions } from "@johnmorrisdotca/hata/load";

Also exported from: @johnmorrisdotca/hata

Definition

interface FrameOptions {
    shape?: Shape;
    fit?: Fit;
    label?: string;
}

Members

NameTypeDescription
shape (optional)Shape | undefined

The frame's shape: flag (the default, the flag's own aspect ratio), 4:3, 1:1 or round.

fit (optional)Fit | undefined

auto (the default) frames each flag the way measured to keep it true; crop crops it at the side chosen for it; whole (or contain) shows all of the flag inside the frame; cover and hoist crop from the centre and from the hoist.

label (optional)string | undefined

A name for assistive technology. With one, the SVG gets role="img", aria-label and a <title>.

Examples

import { frame, type FrameOptions } from "@johnmorrisdotca/hata";
import france from "@johnmorrisdotca/hata/flags/fr";

const avatar: FrameOptions = { shape: "round", label: "France" };
console.log(frame(france, avatar));
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="France"><title>France</title><defs><clipPath id="hata-round-yob49r"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-yob49r)"><svg data-hata="fr" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" x="0" y="0" width="512" height="512" preserveAspectRatio="xMidYMid slice"><path fill="#ce1126" d="M0 0h900v600H0"/><path fill="#fff" d="M0 0h600v600H0"/><path fill="#002654" d="M0 0h300v600H0"/></svg></g></svg>

What it prints (run when this page was built)

View sourceEdit on GitHubMade from the source of @johnmorrisdotca/hata 1.6.0.