✨ UI部品初級

エラーアイコン

エラー状態を示す円形アイコン。SVG で描画されたアラート記号を含む UI 部品で、accessibility 対応により視覚障害ユーザーには非表示。

用途

フォームのエラーメッセージやアラートバナー、バリデーション失敗時の通知表示など、ストア全体のエラー表現を統一したいとき。

設置場所

snippets/icon-error.liquid などのアイコン専用スニペットとして配置し、エラーメッセージを表示する section / snippet 内で `{% render 'icon-error' %}` で呼び出す。

注意点

外側の SVG タグに `viewBox` 属性がないため、親要素で幅・高さを明示的に指定する。`aria-hidden="true"` で支援技術から隠しているので、エラーテキスト本体は別途 `<p role="alert">` 等でマークアップして情報を伝える。アイコンのサイズは `icon-svg--size-24` など CSS クラスで制御し、複数サイズが必要なら class を変数化する。

タグ:iconsvgerroralertaccessibility

コード

8 行 / liquid

<svg
  class="icon-svg icon-svg--size-24 notice__icon"
  aria-hidden="true"
  focusable="false"
>
  <svg id="error"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0-16c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1s-1-.448-1-1V7c0-.552.448-1 1-1zm-1.5 10.5c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z"></path></svg></svg>
</svg>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/issue-156/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

エラーアイコン

コード

出典・ライセンス

関連項目

成功チェックマークアイコン

カスタム要素のラッパーコンポーネント

静的コンテンツ

テキスト

セクション共通ヘッダー（タイトル・説明文）

SVG アイコンの埋め込みテンプレート