ログインアイコン・カートアイコンを変更したい

[みかん]

Brooklynテーマをカスタムしています。

ログインアイコン・カートアイコンを変更したいです。

・assets/icons.json

・assets/icons.svg

・assets/theme.scss.liquid

・sections/header.liquid

↑あたりを見てみましたが、うまくいきません…ご教示いただきたくよろしくお願いいたします。

[みかん]

やり方が合っているかわかりませんが、とりあえず自己解決できましたので下記します。
どなたかのご参考になれば幸いです…。

【やりたいこと】
ログインアイコン・カートアイコンを変更したい

①
上記アイコン２種類をsvgで用意。
設定→ファイルからアップロード+各svgのurlをコピー。

②
sections /header.liquid

◆<span class="icon icon-customer" aria-hidden="true"> </span>
◆<span class="icon icon-cart" aria-hidden="true"></span>
↑それぞれ<span>内に<img>で①svgファイルを読み込む

③

assets /timber.scss.liquid

◆.icon-cart:before { content:'\e600'; }

◆.icon-customer:before { content:'\e605'; }

 ↑コメント化して、非表示

④

新規cssを作成+layout /theme.liquidで新規cssを読み込ませる

【新規css記述】

span.icon.icon-customer,

span.icon.icon-cart {

width: 1em;

}

以上です。

合っているかどうかも自信がなく（汗）

ほかにスマートなやり方等ありましたら、引き続きご教示いただけますと幸いです。

テーマカスタム引き続き学習していきたいと思いますので、また不明な点があれば質問させてください。

よろしくお願いいたします。

[mrtc · Accepted solution]

ほぼ完璧です。

好みもありますが、ShopifyではSVGアイコンはSnippetsにファイルを設けSVGコードを貼るのがスタンダードのようです。
case/whenを使えば、管理もしやすくディレクトリもスッキリするのでよく使っています。

Snippets/svg-icons.liquid

{%- case svg-icons -%}
    {%- when 'home' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
    {%- when 'search' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
    {%- when 'cart' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
    {%- when 'login' -%}
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">xxx</svg>
{%- endcase -%}

検索アイコンの場合は以下のコードで出力します。

{% render 'svg-icons' with 'search' %}

 参考になれば幸いです。

[みかん]

mrtcさま

お教えいただいたやり方でもアイコン変更ができました！

SnippetsでSVGコードを管理するやり方で進めていきたいと思います。
ありがとうございました！

[こまつな]

いきなり質問すいません。

こちらのコードをコピペさせてもらい、httpの部分を変更したのですが反映されません。

他に変更しなくてはいけない箇所があれば教えていただけないでしょうか？

よろしくお願いします。

[mrtc]

こまつなさん

コピペしたコードというのは私が回答したcase/whenを使った方法のことでしょうか？

紹介したコードで変更するのは<svg>タグ全体で、もしSVGタグのxmlns属性をアップロードしたファイルのURLに変更したのなら、間違ったやり方です。

SVGファイルをエディタで開き、そのコード（<svg>〜</svg>）を差し替えてください。
pngなどの画像ファイルなら<img>タグを使ってください。

また、必要に応じてCSSファイルも編集する必要があります。

HTMLやCSSの知識がある程度ないとテーマカスタマイズは難しいので、勉強するか外部委託をお勧めします。