<template>
  <div class="icon-container">
    <svg xmlns="http://www.w3.org/2000/svg" class="camera-all-icon" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
      <path fill="currentColor"
        d="M12 17.5q1.875 0 3.188-1.312T16.5 13t-1.312-3.187T12 8.5T8.813 9.813T7.5 13t1.313 3.188T12 17.5m0-2q-1.05 0-1.775-.725T9.5 13t.725-1.775T12 10.5t1.775.725T14.5 13t-.725 1.775T12 15.5M4 21q-.825 0-1.412-.587T2 19V7q0-.825.588-1.412T4 5h3.15L8.4 3.65q.275-.3.663-.475T9.875 3h4.25q.425 0 .813.175t.662.475L16.85 5H20q.825 0 1.413.588T22 7v12q0 .825-.587 1.413T20 21z" />
    </svg>
  </div>
</template>

<style scoped>
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.camera-all-icon {
  width: 2rem; /* 控制图标的宽度 */
  height: 2rem; /* 控制图标的高度 */
  fill: #29099c;
  opacity: 0.8;
  color: rgb(40, 222, 235);
  background-color: transparent;
  border-radius: 4px;
}
</style>
