Иконка состоит из двух элементов, что делать?

Question

[Ivanushka255]

Возможно, я не совсем точно выразился, поэтому прилагаю внизу фото как это выглядит.

Вот вся иконка:



Вот ее нижняя часть:



Вот ее верхняя часть:



Как это решать? Выгружать по отдельности, а потом располагать position первую и вторую части, накладывая одну на другую z-index? Не видел что такое бывает.

Answer 1

[Ankhena]

Нет, конечно.
Это делается одним элементом.
Фон и скругления задаются в CSS

.icon {
display: block; /*или другой по обстоятельствам*/
width: 30px;
height: 30px;
border-radius: 10px;
background-color: blue; /*цвет фона*/
background-image: url(путь к картинке);
background-position: center;
background-repeat: no-repeat;
background-size: нужный-размер;
}

Если картинке нужно менять цвет при разных состояниях, то её вставляют как инлайн SVG (желательно спрайтом).

Answer 2

[McBernar]

Да просто оберните в div. Фон и уголки иконки — это стили слоя, а внутри одна белая свгшка.