✨ UI部品初級

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

緑色の円形背景にチェックマークを描いたSVGアイコン。フォームやメッセージの完了状態を視覚的に表現する。

用途

注文完了画面、フォーム送信成功、メッセージ表示など、ユーザーアクションの成功を示すUI要素として使用。

設置場所

snippets/icon-success.liquid に配置し、テンプレートやセクション内で `{% render 'icon-success' %}` で呼び出す。背景色は stroke="white" で白い枠線、fill="#428445" で緑に固定されている。

注意点

SVG内に色がハードコードされているため、テーマ設定で色を切り替えたい場合は fill と stroke を Liquid 変数に置き換える必要がある。スクリーンリーダー対応として aria-hidden="true" と role="presentation" が指定されているため、アイコン単体では意味が伝わらず、テキストラベルと組み合わせて使う。viewBox="0 0 13 13" で枠に余白がないため、親要素の padding で余白を調整する。

タグ:iconsvgsuccessui-elementcheckmark

コード

6 行 / liquid

<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-success" viewBox="0 0 13 13">
  <path d="M6.5 12.35C9.73087 12.35 12.35 9.73086 12.35 6.5C12.35 3.26913 9.73087 0.65 6.5 0.65C3.26913 0.65 0.65 3.26913 0.65 6.5C0.65 9.73086 3.26913 12.35 6.5 12.35Z" fill="#428445" stroke="white" stroke-width="0.7"/>
  <path d="M5.53271 8.66357L9.25213 4.68197" stroke="white"/>
  <path d="M4.10645 6.7688L6.13766 8.62553" stroke="white">
</svg>

出典・ライセンス

Source:: instantcommerce/shopify-headless-theme/snippets/icon-success.liquid
Repository:: https://github.com/instantcommerce/shopify-headless-theme
License:: MIT

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

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

コード

出典・ライセンス

関連項目

エラーアイコン

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

静的コンテンツ

テキスト

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

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