The Wheels

SVGLoader

fetch → Light DOM 注入 / 失敗時プレースホルダ / 見た目属性

Preview

基本

flip / rotate

失敗時

HTML

<tw-svg-loader
  id="…"
  width="32"
  height="32"
  stroke-color="var(--tw-text-main)"
  aria-label="チェック"
></tw-svg-loader>

<tw-svg-loader
  id="…"
  width="32"
  height="32"
  stroke-color="var(--tw-text-main)"
  aria-label="開く"
></tw-svg-loader>
<tw-svg-loader
  id="…"
  width="32"
  height="32"
  rotate="180"
  stroke-color="var(--tw-text-main)"
  aria-label="閉じる"
></tw-svg-loader>
<tw-svg-loader
  id="…"
  width="32"
  height="32"
  flip="horizontal"
  stroke-color="var(--tw-text-main)"
  aria-label="メニュー"
></tw-svg-loader>

<tw-svg-loader
  src="/this-file-does-not-exist.svg"
  width="32"
  height="32"
  aria-label="読み込み失敗の例"
></tw-svg-loader>
import "@b4moss/the-wheels";
import checkUrl from "@b4moss/the-wheels-components/assets/check.svg?url";
import chevronUrl from "@b4moss/the-wheels-components/assets/chevron.svg?url";
import menuUrl from "@b4moss/the-wheels-components/assets/menu.svg?url";

document.getElementById("icon-check")?.setAttribute("src", checkUrl);
document.getElementById("icon-chevron")?.setAttribute("src", chevronUrl);
document.getElementById("icon-chevron-rot")?.setAttribute("src", chevronUrl);
document.getElementById("icon-menu")?.setAttribute("src", menuUrl);
import "@b4moss/the-wheels";
import checkUrl from "@b4moss/the-wheels-components/assets/check.svg?url";
import chevronUrl from "@b4moss/the-wheels-components/assets/chevron.svg?url";
import menuUrl from "@b4moss/the-wheels-components/assets/menu.svg?url";

document.getElementById("icon-check")?.setAttribute("src", checkUrl);
document.getElementById("icon-chevron")?.setAttribute("src", chevronUrl);
document.getElementById("icon-chevron-rot")?.setAttribute("src", chevronUrl);
document.getElementById("icon-menu")?.setAttribute("src", menuUrl);