`Shape`型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

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 type { Shape } from "@johnmorrisdotca/hata";

定義

type Shape = "flag" | "4:3" | "1:1" | "round";

例

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>'
]

出力（このページを作ったときに実行した結果）

ソースを見る GitHub で編集@johnmorrisdotca/hata 1.6.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。

Shape型

定義

例

`Shape`型