SVGをcssからパスとして管理

no_image cssの武器
no_image

SVGファイルは画像としてフォルダに入れて管理し、imgやbackground-imgなどで呼び出して使うのではなく、cssからパスとして管理することをおすすめします。

デモと結論

デモ

sgv-icon

コード

mixin.scss

style.scss(使い方)

 

「なぜ?」と「メリット」

  • 読み込みが早い
  • 色を簡単に変更できる
  • 管理しやすい(imgで書くとパスが面倒)
  • hoverに簡単に対応できる

上記が主なメリットであり、これならのメリットがあるからsccから管理した方が良いというのが理由です。

「色を簡単に変更できる」「srcを記載しなくていい」という面が大きなポイントになります。

hoverなどでアイコンの色を変更したい時、もし、画像として管理してしまうと2つのデータを用意しなければいけません。それは手間です。さらに読み込みが発生してしまうので、ちらついたり、画像が入れ変わる際に高さが潰れることがあります。

そして、パスの記載はとても面倒ですよね。

今のディレクトリから考えて1つ上の階層にあるimgフォルダの….考えるのがめんどくさいですし、ディレクトリ構造の変化やwordpress化した際にパスを通し直すのが面倒です。

これらの問題をsccから管理することで解決することができます。

作り方の手順

  1. SVG画像を圧縮する
  2. テンプレートにパスと関数名を記載する
  3. 色を設定している箇所に変数を埋め込む

作り方

1:SVG画像を圧縮する

より読み込みを早くするために画像を圧縮したパスを生成します。

こちらのサイトで簡単に圧縮することができます。

SVGOMG - SVGO's Missing GUI

 

open SVGをクリックして画像をアップ

SVG画像の圧縮

アップすると圧縮された画像が表示されるのでMARKUPをクリックしてパスを表示し、このパスをコピーしておきましょう。

SVG画像の圧縮-2

 

テンプレートにパスと関数名を記載

テンプレート

上記のテンプレにパスと関数名を記載します。

 

色を設定している箇所に変数を埋め込む

色を設定している箇所はSVG画像によって様々なので#から始まるカラーコードを探してカラコード部分を全て変数に置き換えてください。

例えば以下のコードの場合ですとfill=””の一箇所ですね

 

これで完成です。

使い方

このmixinを記載しているscssファイルを@importで読み込み、@includeで使用できます。

このままですと、幅と高さが0で表示されませんので必ずwidth,heightを設定してください。

hoverなどで色を変更したい場合はカッコ内のカラーコードを変更するだけで簡単に色を変更することができます。

 

まとめ

メリット

  • 読み込みが早い
  • 色を簡単に変更できる
  • 管理しやすい(imgで書くとパスが面倒)
  • hoverに簡単に対応できる

デメリット

  • なし

コード

mixin.scss

style.scss

 

コメント

サンプル1
タイトルとURLをコピーしました