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

[nishi-ec]

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

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

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

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

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

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

<svg class="icon icon-cart" aria-hidden="true" focusable="false" data-prefix="fas" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"></path>
</svg>

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

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

[mrtc · Accepted solution]

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

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

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

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

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

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

[nishi-ec]

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

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

[mrtc]

@nishi-ec 

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

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

[nishi-ec]

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

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

[nishi-ec]

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

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