Как правильно сверстать SVG внутри тега li?

Question

Хочу разместить вот так спрайты как на картинке, и чтобы они все были разные и внутри тега li:

Пытался через ::before, relative, и absolute, но все равно все криво работало.

Если кто-то с этим сталкивался подскажите пожалуйста, спасибо.

Answer 1

Это можно сделать так:

ul {
  background-color: #FFE5B4;
  padding: 40px;
}

li {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
}

li:last-of-type {
  margin-bottom: 0;
}

li > svg {
  width: 30px;
  height: auto;
  margin-right: 30px;
}

li > svg, li > span {
  display: block;
}

<ul>
  <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 373.12c-25.24-31.67-40.08-59.43-45-83.18-22.55-88 112.61-88 90.06 0-5.45 24.25-20.29 52-45 83.18zm138.15 73.23c-42.06 18.31-83.67-10.88-119.3-50.47 103.9-130.07 46.11-200-18.85-200-54.92 0-85.16 46.51-73.28 100.5 6.93 29.19 25.23 62.39 54.43 99.5-32.53 36.05-60.55 52.69-85.15 54.92-50 7.43-89.11-41.06-71.3-91.09 15.1-39.16 111.72-231.18 115.87-241.56 15.75-30.07 25.56-57.4 59.38-57.4 32.34 0 43.4 25.94 60.37 59.87 36 70.62 89.35 177.48 114.84 239.09 13.17 33.07-1.37 71.29-37.01 86.64zm47-136.12C280.27 35.93 273.13 32 224 32c-45.52 0-64.87 31.67-84.66 72.79C33.18 317.1 22.89 347.19 22 349.81-3.22 419.14 48.74 480 111.63 480c21.71 0 60.61-6.06 112.37-62.4 58.68 63.78 101.26 62.4 112.37 62.4 62.89.05 114.85-60.86 89.61-130.19.02-3.89-16.82-38.9-16.82-39.58z"></path></svg><span>AirBnB</span></li>
  <li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path></svg><span>Apple</span></li>
</ul>

Если вы загружаете SVG как картинку (тег img или picture) то общий принцип будет тот же.

SVG-иконки скачаны из библиотеки Font Awesome.

БЛОГ НА HUSL

Как правильно сверстать SVG внутри тега li?

Ответы (1 шт):