Поместите SVG в класс

Question

Я хотел бы знать, как поместить созданный мной svg в класс css или scss, чтобы назначать только класс в значке, как в этом примере w3:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-home"></i>

Answer 1

Если вы хотите отобразить пользовательский SVG через CSS, вы можете сделать это в два шага:

1. Превратить SVG в изображение данных
2. Использовать SVG-изображение в качествеCSS Background

Рабочий пример:

div {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 1px;
background-color: rgb(255, 0, 0);
}

.svg-background {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="2" y="3" width="36" height="5" fill="rgb(255, 255, 255)" /><rect x="2" y="11" width="36" height="5" fill="rgb(255, 255, 255)" /><rect x="2" y="19" width="36" height="5" fill="rgb(255, 255, 255)" /></svg>');
}

<div></div>
<div class="svg-background"></div>