Reference · Codes, URLs and SVG helpers
Shapetype
The shapes a flag can be framed in. flag is its own aspect ratio; 4:3 and 1:1 are the icon sizes most
flag sets ship; round is a circle, as on a map pin or an avatar.
Import it
import type { Shape } from "@johnmorrisdotca/hata";Definition
type Shape = "flag" | "4:3" | "1:1" | "round";Examples
import { frame, type Shape } from "@johnmorrisdotca/hata";
import japan from "@johnmorrisdotca/hata/flags/jp";
const shapes: Shape[] = ["flag", "4:3", "1:1", "round"];
const icons = shapes.map((shape) => frame(japan, { shape }));
console.log(icons);[
'<svg data-hata="jp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600"><path fill="#fff" d="M0 0h900v600H0z"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg>',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><svg data-hata="jp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" x="0" y="0" width="640" height="480" preserveAspectRatio="xMidYMid slice"><path fill="#fff" d="M0 0h900v600H0z"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg></svg>',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><svg data-hata="jp" 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="#fff" d="M0 0h900v600H0z"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg></svg>',
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><clipPath id="hata-round-9rys11"><circle cx="256" cy="256" r="256"/></clipPath></defs><g clip-path="url(#hata-round-9rys11)"><svg data-hata="jp" 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="#fff" d="M0 0h900v600H0z"/><circle cx="450" cy="300" r="180" fill="#bc002d"/></svg></g></svg>'
]What it prints (run when this page was built)