✨ UI部品初級

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

エラーアイコン、ユーザープロフィールアイコン、背景グラフィックなど複数の SVG を HTML に埋め込むテンプレート。symbol 要素で定義したアイコンを use タグで参照し、再利用可能な構成にしている。

用途

ストアの各ページで繰り返し使うアイコンやイラストを SVG シンボルで一元管理し、クラス名やインラインスタイルで出し分けるとき。

設置場所

snippets/icons.liquid として配置し、必要なテンプレートやセクションで `{% render 'icons' %}` で呼び出すか、theme.liquid の <head> または <body> 末尾に直接埋め込む。

注意点

最初の SVG ブロックの display: none は、symbol タグの定義用なので削除しない。各 use タグで参照するときは id 属性の値を正確に指定する。SVG 内の fill="currentColor" はテキストカラーを継承するため、親要素の color プロパティで色を制御できる。複数ページで使う場合は外部ファイル化(svg-sprite.svg)に切り替えると、キャッシュ効率が上がる。

タグ:svgiconsymbolui-componentsprite

コード

25 行 / liquid

svg tags are black holes that are reindented
<div>
<svg style="display: none">
<use id="icon-error" />
<symbol id="icon-error" viewBox="0 0 13 13">
  <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
  <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
  <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
  <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</symbol>
</svg>
</div>

<svg
  xmlns="http://www.w3.org/2000/svg"
  aria-hidden="true"
  focusable="false"
  fill="none"
  viewBox="0 0 18 19"
>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4.5a3 3 0 116 0 3 3 0 01-6 0zm3-4a4 4 0 100 8 4 4 0 000-8zm5.58 12.15c1.12.82 1.83 2.24 1.91 4.85H1.51c.08-2.6.79-4.03 1.9-4.85C4.66 11.75 6.5 11.5 9 11.5s4.35.26 5.58 1.15zM9 10.5c-2.5 0-4.65.24-6.17 1.35C1.27 12.98.5 14.93.5 18v.5h17V18c0-3.07-.77-5.02-2.33-6.15-1.52-1.1-3.67-1.35-6.17-1.35z" fill="currentColor">
</svg>

<svg preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false" role="presentation" class="email-signup-banner-background email-signup-banner-background-mobile" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.45 238.04"><defs><style>.cls-1{fill:none;}.cls-2,.cls-4,.cls-5{fill:rgb(var(--color-base-accent-1));;}.cls-3{opacity:0.55;}.cls-4{opacity:0.75;}.cls-5{opacity:0.1;}</style></defs><path class="cls-1" d="M89.5,238c-7.27-1.67-14.13-5.11-20.52-8.82a87.1,87.1,0,0,1-30.36-30.35c-6.72-11.64-9.49-24.91-9.49-39.33H29v0c0,14.42,2.77,27.71,9.49,39.36a87.1,87.1,0,0,0,30.36,30.35c6.39,3.71,13.25,7.15,20.52,8.82h.46Z"/><path class="cls-2" d="M106.58,95.46v-.6a80.39,80.39,0,0,1-9.11,24.62l-.6,1a80,80,0,0,1-25.22,26.36c-1,.67-2.07,1.33-3.14,1.95a78,78,0,0,1-25.42,9.44,80.26,80.26,0,0,1-14,1.26c0,14.42,2.77,27.69,9.49,39.33A87.1,87.1,0,0,0,69,229.17c6.39,3.71,13.25,7.15,20.52,8.82l.31,0H93.7a15.28,15.28,0,0,1,3.38,0,74.24,74.24,0,0,0,10.2,0h-.64Z"/><g class="cls-3"><path class="cls-2" d="M357,118.48A78.88,78.88,0,0,0,346.42,158v0h0v0A78.9,78.9,0,0,0,357,197.68a79.76,79.76,0,0,0,17.46,20.88v-121A79.52,79.52,0,0,0,357,118.48Z"/><path class="cls-2" d="M346.42,0a78.9,78.9,0,0,1-10.56,39.25,79.66,79.66,0,0,1-28.95,29,78.58,78.58,0,0,1-39.17,10.6,78.6,78.6,0,0,1,39.15,10.59A79.23,79.23,0,0,1,346.42,158V78.86a79,79,0,0,1,28-60.49V0Z"/><path class="cls-2" d="M114.22,27.3a79.2,79.2,0,0,1-5-27.3h-79V0H0V53.79a39.51,39.51,0,0,1,29.37-13l.86,0A39.58,39.58,0,0,1,69,78.88c0,.5,0,1,0,1.51A39.62,39.62,0,0,1,0,107v47a78,78,0,0,0,29,5.56v0h.15a80.26,80.26,0,0,0,14-1.26,78,78,0,0,0,25.42-9.44c1.07-.62,2.11-1.28,3.14-1.95a80,80,0,0,0,25.22-26.36l.6-1a80.39,80.39,0,0,0,9.11-24.62V78.57l24.69-24.1h0a79,79,0,0,1-11.41-15.19A79.32,79.32,0,0,1,114.22,27.3Z"/></g><path class="cls-2" d="M357,39.26a79.64,79.64,0,0,1,17.46-20.89h0A79.64,79.64,0,0,0,357,39.26Z"/><path class="cls-2" d="M357,118.46A78.93,78.93,0,0,0,346.42,158v0a79.09,79.09,0,0,1,28-60.44h0A79.64,79.64,0,0,0,357,118.46Z"/><path class="cls-2" d="M357,197.68a78.9,78.9,0,0,1-10.57-39.6v0h0v0a79.06,79.06,0,0,0-78.68-79.14,78.58,78.58,0,0,0,39.17-10.6,79.66,79.66,0,0,0,28.95-29A78.9,78.9,0,0,0,346.42,0c0-.12,0-.23,0-.35H267.37v0H109.28V0h0a79.2,79.2,0,0,0,5,27.3,79.32,79.32,0,0,0,5.63,12,79,79,0,0,0,11.41,15.19L187,0h0l57,55.91h0l23.36,22.93h0l0,0V238h107V218.56A79.76,79.76,0,0,1,357,197.68Z"/><path class="cls-2" d="M29.37,120A39.62,39.62,0,0,0,69,80.39c0-.51,0-1,0-1.51A39.56,39.56,0,0,0,30.23,40.79l-.86,0A39.51,39.51,0,0,0,0,53.79V107A39.52,39.52,0,0,0,29.37,120Z"/><path class="cls-4" d="M94.12,238h2.82A12.66,12.66,0,0,0,94.12,238Z"/><path class="cls-5" d="M38.47,198.87C31.75,187.22,29,173.93,29,159.51A78,78,0,0,1,0,154V238H89.35c-7.27-1.67-14.13-5.11-20.52-8.82A87.1,87.1,0,0,1,38.47,198.87Z"/><path class="cls-4" d="M267.41,78.88l0,0h0L244,55.91h0L187,0h0L131.26,54.46h0l-24.69,24.1V93.82c0-.21.11-.42.15-.6v25.21l0,79V238h1.41l-.91,0H267.41V78.88ZM187.17,44.49A9.88,9.88,0,1,1,197,34.61,9.88,9.88,0,0,1,187.17,44.49Z"/><path class="cls-4" d="M106.78,238h0V197.42l0-79V93.22c0,.18-.1.39-.15.6v1.64L106.64,238h.64l.91,0Z"/><path class="cls-5" d="M357,39.26a78.9,78.9,0,0,0-10.57,39.6V158a79,79,0,0,1,28-60.43V18.37A79.64,79.64,0,0,0,357,39.26Z"/><circle class="cls-5" cx="187.17" cy="34.61" r="9.88"/></svg>

出典・ライセンス

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

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

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

コード

出典・ライセンス

関連項目

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

エラーアイコン

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

静的コンテンツ

テキスト

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