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

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

デモと結論
1. デモ
2. コード
「なぜ？」と「メリット」
作り方の手順
作り方
まとめ

デモと結論

デモ

コード

mixin.scss

@mixin mailIcon($color) {
  background: {
    repeat: no-repeat;
    position: 50% 50%;
  };
  background-image: inline-svg(
    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12.8">
      <path data-name="パス 6" d="M14.4 0H1.6A1.6 1.6 0 00.008 1.6L0 11.2a1.6 1.6 0 001.6 1.6h12.8a1.6 1.6 0 001.6-1.6V1.6A1.6 1.6 0 0014.4 0zm0 3.2L8 7.2l-6.4-4V1.6l6.4 4 6.4-4z" fill="#{$color}"/>
    </svg>'
  );
}

@mixin mailIcon($color) {

background: {

repeat: no-repeat;

position: 50% 50%;

};

'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12.8">

</svg>'

);

}

style.scss（使い方）

@import 'mixin';
width:20px;
height:20px;
@include mailIcon(カラーコード);

@import 'mixin';

width:20px;

height:20px;

@include mailIcon(カラーコード);

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

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

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

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

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

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

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

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

作り方の手順

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

作り方

1:SVG画像を圧縮する

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

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

SVGOMG - SVGO's Missing GUI

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

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

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

テンプレート

@mixin 関数名($color) {
  background: {
    repeat: no-repeat;
    position: 50% 50%;
  };
  background-image: inline-svg(
    'SVGの開始タグ
      パス
    SVGの終了タグ'
  );
}

@mixin 関数名($color) {

background: {

repeat: no-repeat;

position: 50% 50%;

};

'SVGの開始タグ

パス

SVGの終了タグ'

);

}

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

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

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

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

@mixin mailIcon($color) {
  background: {
    repeat: no-repeat;
    position: 50% 50%;
  };
  background-image: inline-svg(
    '<svg xmlns="http://www.w3.org/2000/svg">
      <path data-name="パス 6" d="M14.4 0H1.6A1.6 1.6 0 00.008 1.6L0 11.2a1.6 1.6 0 001.6 1.6h12.8a1.6 1.6 0 001.6-1.6V1.6A1.6 1.6 0 0014.4 0zm0 3.2L8 7.2l-6.4-4V1.6l6.4 4 6.4-4z" fill="#ffffff"/>
    </svg>'
  );
}

@mixin mailIcon($color) {

background: {

repeat: no-repeat;

position: 50% 50%;

};

'<svg xmlns="http://www.w3.org/2000/svg">

</svg>'

);

}

↓

@mixin mailIcon($color) {
  background: {
    repeat: no-repeat;
    position: 50% 50%;
  };
  background-image: inline-svg(
    '<svg xmlns="http://www.w3.org/2000/svg">
      <path data-name="パス 6" d="M14.4 0H1.6A1.6 1.6 0 00.008 1.6L0 11.2a1.6 1.6 0 001.6 1.6h12.8a1.6 1.6 0 001.6-1.6V1.6A1.6 1.6 0 0014.4 0zm0 3.2L8 7.2l-6.4-4V1.6l6.4 4 6.4-4z" fill="#{$color}"/>
    </svg>'
  );
}

@mixin mailIcon($color) {

background: {

repeat: no-repeat;

position: 50% 50%;

};

'<svg xmlns="http://www.w3.org/2000/svg">

</svg>'

);

}

これで完成です。

使い方

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

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

width:20px;
height:20px;
@include mailIcon(#fff);

width:20px;

height:20px;

@include mailIcon(#fff);

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

.mail-icon{
  width:20px;
  height:20px;
  @include mailIcon(#000);
  &:hover{
    @include mailIcon(#fff);
  }
}

.mail-icon{

width:20px;

height:20px;

@include mailIcon(#000);

&:hover{

@include mailIcon(#fff);

}

まとめ

メリット

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

デメリット

なし

コード

mixin.scss

@mixin mailIcon($color) {
  background: {
    repeat: no-repeat;
    position: 50% 50%;
  };
  background-image: inline-svg(
    '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
      <path data-name="パス 6" d="M14.4 0H1.6A1.6 1.6 0 00.008 1.6L0 11.2a1.6 1.6 0 001.6 1.6h12.8a1.6 1.6 0 001.6-1.6V1.6A1.6 1.6 0 0014.4 0zm0 3.2L8 7.2l-6.4-4V1.6l6.4 4 6.4-4z" fill="#{$color}"/>
    </svg>'
  );
}

@mixin mailIcon($color) {

background: {

repeat: no-repeat;

position: 50% 50%;

};

'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">

</svg>'

);

}

style.scss

@import 'mixin';
width:20px;
height:20px;
@include mailIcon(#000);

@import 'mixin';

width:20px;

height:20px;

@include mailIcon(#000);