Uweb

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

こんにちは。やまぐちなな(@nana_winter_web )です。

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

コード

.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=' );
}

まとめ

SVGまでのパスを指定しても良いですが、SVGタグを指定すれば、色の変更ができるようになり、自由度が高まります。
ボタンにSVGのアイコンを使えば、hover時などに色を変えるときに色違いのアイコンを作成して書き出す手間が減りますね。

IE対応が不要な時に、使ってみようかなと思います。

シェア

最新記事