テーマDawnのヘッダーのアイコンSVGを差し替えたがサイズが大きくなってしまう

日本語 ディスカッション 技術的なQ＆A
1

テーマDawnを利用しています。

ヘッダーのカートアイコンをFontawsomeのカートアイコンに差し替えたのですが、他の検索アイコンやアカウントアイコンよりサイズが大きく表示されてしまいます。

SVGのviewBoxでサイズ変更ができるかと思い、viewBox="0 0 576 512"を、他のアイコンと同じviewBox="0 0 40 40"に変更してみましたが、カートアイコンがさらに拡大されて一部表示されている状態になってしまいました。

他のアイコンと同じサイズで表示する方法をご教示頂けると助かります。

カートアイコンを差し替えた手順を以下に記載します。

①新しいカートアイコン用のsnippetsを追加（icon-cart01.liquidとしました）し、以下のコードを記載。（classは元のカートアイコンのclass名に変更してあります。それ以外はFontawsomeの元のソースコードのままです。）

② header.liquid の render ‘icon-cart’ を追加したスニペット名（ render ‘icon-cart01.liquid’）に変更。

以上、よろしくお願いいたします。

2

Dawnのカートアイコンは添付のように余白が入っています。
余白のないFontawesomeのカートアイコンに差し替えただけでは余白が埋まってしまう分、大きく表示されます。

おそらくはカートに追加した際の数字バッジの為かと思われます。

svg-icon.png
svg-icon.png1680×958 19.6 KB

また、出力されるSVGのサイズはCSSで指定されているので、viewBoxは関係ありません。

対処方法としては以下が考えられます。

  1. Fontawesomeのアイコンを編集して余白をつける
  2. base.cssを編集してアイコンのサイズを調整する

CSSを編集する場合は上手くやらないと、数字バッジだけでなく他のアイコンにも影響がでる可能性がありますのでご注意ください。

1 Like
3

原因と対処方法についてわかりやすく記載いただきありがとうございます。

FontawsomeのSVGに余白を追加する方法で一度試してみます。

1 Like
4

@nishi-ec

ちょうど同じ作業をしていたところでしたので、参考にしていただければ幸いです。

HTMLやCSSの構造はコーダーのクセが出ます。
モバイルのメニューアイコンとか、何でこんな面倒くさい構造にしてるんだろうと思いながらCSSを調整する方向で進めました。

1 Like
5

ありがとうございます。原因は分かったのですが、対処でつまづいている状況です。

CSSで他の箇所に影響が出るのは避けたいので、画像データ自体に余白を追加する方法で試したいのですが、SVGに余白を追加する方法がみつからなかったので、pngなど他の形式に変換して余白を追加したものをアップロードしてみようかと思います。

6

pngデータだと画質がもやもやしてしまったので、svgデータでpaddingのcss調整をする形で対応しました。

ありがとうございました。