SVGファイルは画像としてフォルダに入れて管理し、imgやbackground-imgなどで呼び出して使うのではなく、cssからパスとして管理することをおすすめします。
デモと結論
デモ
コード
mixin.scss
1 2 3 4 5 6 7 8 9 10 11 |
@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>' ); } |
style.scss(使い方)
1 2 3 4 |
@import 'mixin'; width:20px; height:20px; @include mailIcon(カラーコード); |
「なぜ?」と「メリット」
- 読み込みが早い
- 色を簡単に変更できる
- 管理しやすい(imgで書くとパスが面倒)
- hoverに簡単に対応できる
上記が主なメリットであり、これならのメリットがあるからsccから管理した方が良いというのが理由です。
「色を簡単に変更できる」「srcを記載しなくていい」という面が大きなポイントになります。
hoverなどでアイコンの色を変更したい時、もし、画像として管理してしまうと2つのデータを用意しなければいけません。それは手間です。さらに読み込みが発生してしまうので、ちらついたり、画像が入れ変わる際に高さが潰れることがあります。
そして、パスの記載はとても面倒ですよね。
今のディレクトリから考えて1つ上の階層にあるimgフォルダの….考えるのがめんどくさいですし、ディレクトリ構造の変化やwordpress化した際にパスを通し直すのが面倒です。
これらの問題をsccから管理することで解決することができます。
作り方の手順
- SVG画像を圧縮する
- テンプレートにパスと関数名を記載する
- 色を設定している箇所に変数を埋め込む
作り方
1:SVG画像を圧縮する
より読み込みを早くするために画像を圧縮したパスを生成します。
こちらのサイトで簡単に圧縮することができます。
open SVGをクリックして画像をアップ
アップすると圧縮された画像が表示されるのでMARKUPをクリックしてパスを表示し、このパスをコピーしておきましょう。
テンプレートにパスと関数名を記載
テンプレート
1 2 3 4 5 6 7 8 9 10 11 |
@mixin 関数名($color) { background: { repeat: no-repeat; position: 50% 50%; }; background-image: inline-svg( 'SVGの開始タグ パス SVGの終了タグ' ); } |
上記のテンプレにパスと関数名を記載します。
色を設定している箇所に変数を埋め込む
色を設定している箇所はSVG画像によって様々なので#から始まるカラーコードを探してカラコード部分を全て変数に置き換えてください。
例えば以下のコードの場合ですとfill=””の一箇所ですね
1 2 3 4 5 6 7 8 9 10 11 |
@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>' ); } |
↓
1 2 3 4 5 6 7 8 9 10 11 |
@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を記載しているscssファイルを@importで読み込み、@includeで使用できます。
このままですと、幅と高さが0で表示されませんので必ずwidth,heightを設定してください。
1 2 3 |
width:20px; height:20px; @include mailIcon(#fff); |
hoverなどで色を変更したい場合はカッコ内のカラーコードを変更するだけで簡単に色を変更することができます。
1 2 3 4 5 6 7 8 |
.mail-icon{ width:20px; height:20px; @include mailIcon(#000); &:hover{ @include mailIcon(#fff); } } |
まとめ
メリット
- 読み込みが早い
- 色を簡単に変更できる
- 管理しやすい(imgで書くとパスが面倒)
- hoverに簡単に対応できる
デメリット
- なし
コード
mixin.scss
1 2 3 4 5 6 7 8 9 10 11 |
@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>' ); } |
style.scss
1 2 3 4 |
@import 'mixin'; width:20px; height:20px; @include mailIcon(#000); |
コメント