<!-- Иконка вебкамов в плашке — знак раздела: стоит перед заголовком блока на
листингах и перед заголовком выдачи в разделе `/webcams`. Нарисована руками:
в спрайте проекта камеры такого вида (объектив на штативе) нет. -->
<template>
  <span class="webcam-icon">
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <circle
        cx="12"
        cy="9"
        r="6.5"
      />
      <circle
        cx="12"
        cy="9"
        r="2.5"
        fill="currentColor"
      />
      <path d="M12 15.5V19"/>
      <path d="M8 20h8"/>
    </svg>
  </span>
</template>

<style lang="scss">
.webcam-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 24px;
  height: 24px;
  color: $webcam-icon-text;
  background-color: $webcam-icon-bg;
  border-radius: $radius-6;

  & > svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
  }
}
</style>
