CSSの疑似要素にSVGタグを使って、アイコンを表示する

投稿日2020.01.04

こんにちは。やまぐちなな（@nana_winter_web ）です。

CSSの疑似要素にSVGタグを使う方法があるのでメモ。

コード
色を指定したい場合
IEことInternet Explorerに対応するには一手間必要
まとめ

コード

.code:after {
	content: url( 'data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 73.8"><title>folder</title><g><g><path d="M90,12H40L28,0H10A10,10,0,0,0,0,10V63.8a10,10,0,0,0,10,10H90a10,10,0,0,0,10-10V22A10,10,0,0,0,90,12Z"/></g></g></svg>' );
}

「url('data:image/svg+xml;文字コード,SVGタグ')」を指定すると疑似要素にSVGタグを使うことができます。

contentか、background-imageに指定すればアイコンなどを表示できます。
displayの指定が必要ですが、background-imageのほうが、幅や高さ、位置などの調節がしやすいです。

上のコードを使って、指定すると下のようになります。

色を指定したい場合

SVGタグにfill属性もしくはstroke属性を追加し、色を指定すれば指定した色に変わります。
SVGタグ内のそれぞれのタグにfill属性を追加すれば、パーツごとに色が変わります。
気をつけないといけないのは、カラーコードの#を%23に置き換え、fill="%23fff"とすることです。

.code:after {
	content: url( 'data:image/svg+xml;utf-8,<svg fill="%23fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 73.8"><!-- 省略 --></svg>' );
}

IEことInternet Explorerに対応するには一手間必要

これ使えば、SCSSの関数を使って色を変更できると思ったのですが、文字コードがUTF-8だとIEでは表示されません。

SVGタグをBase64に変換、文字コードの部分をBase64に変更すれば表示されるようになりますが、どこで色を指定しているかが、すぐには分からなくなってしまうので、SCSSの関数を使って色を変換するということは難しくなります。

.code:after {
    content: url( 'data:image/svg+xml;base64,PHN2ZyBmaWxsPSIlMjNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCA3My44Ij48dGl0bGU+Zm9sZGVyPC90aXRsZT48Zz48Zz48cGF0aCBkPSJNOTAsMTJINDBMMjgsMEgxMEExMCwxMCwwLDAsMCwwLDEwVjYzLjhhMTAsMTAsMCwwLDAsMTAsMTBIOTBhMTAsMTAsMCwwLDAsMTAtMTBWMjJBMTAsMTAsMCwwLDAsOTAsMTJaIi8+PC9nPjwvZz48L3N2Zz4=' );
}