画像を変換
SVG画像を CSS の background-image に変換
https://blog.s0014.com/posts/2017-01-19-il-to-svg/
変換前のSVG
stroke は輪郭の色
fill は背景色
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="12" r="9" />
<path d="M9 12l2 2l4 -4" />
</svg>変換後 CSS
背景画像を真ん中にするため、background-position:center
背景画像を繰り返さない background-repeat: no-repeat
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-circle-check%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%221.5%22%20stroke%3D%22%230099CC%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%20%2F%3E%20%3Cpath%20d%3D%22M9%2012l2%202l4%20-4%22%20%2F%3E%3C%2Fsvg%3E');
background-position: center;
background-repeat: no-repeat
background-color: #xxx;あとから色を変更
画像の輪郭を帰る場合はXXXXXXを変更する
stroke%3D%22%23XXXXXX
%3D は =
%22 は "
%23 は #
使用例
.el:before {
width: 36px;
height: 36px;
content: "";
background-position: center;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22icon%20icon-tabler%20icon-tabler-pencil%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2024%2024%22%20stroke-width%3D%222%22%20stroke%3D%22%23ffffff%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22%234D4D4D%22%2F%3E%20%3Cpath%20d%3D%22M4%2020h4l10.5%20-10.5a1.5%201.5%200%200%200%20-4%20-4l-10.5%2010.5v4%22%20%2F%3E%20%3Cline%20x1%3D%2213.5%22%20y1%3D%226.5%22%20x2%3D%2217.5%22%20y2%3D%2210.5%22%20%2F%3E%3C%2Fsvg%3E");
}