やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

SVG画像を擬似要素で表示し、なおかつサイズも調整したい

普通にSVG画像を擬似要素のcontentとして指定すると、
大きさを変更することができず、不便である。

div:before{
  content:url('../../../img/icon.svg');
  width:20px;
  height:20px;
}


これだとwidthもheightも効かない

そこで、背景画像として指定すると良い。

div:before{
  content:'';
  background-image: url('../../../img/icon.svg');
  display: block;
  width:20px;
  height:20px;
  background-size: cover;
}

参考
blog.mktia.com