Изменила img на icon font

src/components/HeaderActiveClientPanel.vue

@@ -7,19 +7,19 @@
       .icon-wrapper.icon-down-arrow.flex.items-center.justify-center.text-xxs(@click="changeState")
     .options.flex.flex-col.p-4.mt-1.font-medium.text-sm.gap-y-3(v-if="isOpen")
       .flex.items-center
-        img.options-icon-wrapper.mr-2(src="@/assets/icons/white-star.svg")
+        .options-icon-wrapper.icon-star-off.flex.items-center.justify-center.text-base.mr-2
         span Снять с ведения
       .flex.items-center
-        img.options-icon-wrapper.mr-2(src="@/assets/icons/table.svg")
+        .options-icon-wrapper.icon-table.flex.items-center.justify-center.text-lg.mr-2.pb-px
         span Перейти в таблицу
       .flex.items-center
-        .options-icon-wrapper.flex.items-center.justify-center.icon-user-data.text-base.mr-2(src="@/assets/icons/table.svg")
+        .options-icon-wrapper.flex.items-center.justify-center.icon-user-data.text-base.mr-2
         span Данные 
 </template>
 
 <script>
 export default {
-  name: "HeaderChargePerson",
+  name: "HeaderActiveClientPanel",
   props: {
     info: Object,
   },

src/components/HeaderInputs.vue

@@ -2,7 +2,7 @@
   .header-inputs-wrapper.flex.items-center.font-medium.text-base(:class="{ open: isOpen }")
     .select-container(@click="changeState")
       .select-wrapper.flex.items-center.cursor-pointer.mx-4.my-2
-        img.icon-wrapper.flex.justify-center.items-center(src="@/assets/icons/search.svg" alt="Search")
+        .icon-wrapper.icon-search.flex.text-lg.justify-center.items-center
         span.custom-input.select-input.inline-block.box-border.align-middle.pl-2.pr-1 {{ selectedFilter }}
         .arrow.icon-down-arrow.text-xsm.mt-px.flex.justify-center.items-center
       .options-wrapper.flex.flex-col.box-border.p-4.mt-1(v-if="isOpen")
@@ -77,6 +77,10 @@ export default {
   &::placeholder
     color: var(--font-grey-color)
 
+.icon-search
+  color: var(--btn-blue-color)
+  opacity: 0.5
+
 .option-list
   &:last-child
     margin: 0

src/components/TheHeader.vue

@@ -4,7 +4,7 @@
       img.logo-img.mr-16(src="@/assets/images/logo.svg" alt="Logo")
       header-inputs
     .charge-person-container
-      header-charge-person(:info="chargePersonInfo")
+      header-active-client-panel(:info="chargePersonInfo")
     .flex.ml-auto
       header-add-client-button.mr-9
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
@@ -19,11 +19,11 @@
 import img from "@/assets/images/avatar.svg";
 import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
-import HeaderChargePerson from "./HeaderChargePerson.vue";
+import HeaderActiveClientPanel from "./HeaderActiveClientPanel.vue";
 import HeaderAddClientButton from "./HeaderAddClientButton.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs, HeaderChargePerson, HeaderAddClientButton },
+  components: { HeaderInputs, HeaderActiveClientPanel, HeaderAddClientButton },
   data() {
     return {
       avatarSrc: img,

src/components/base/buttons/BaseArrowButton.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-1
+  button.arrow-button.flex.items-center.icon-down-arrow.text-base.px-2.pt-3px
 </template>
 
 <script>

tailwind.config.js

@@ -26,6 +26,7 @@ module.exports = {
       spacing: {
         "6px": "6px",
         "10px": "10px",
+        "3px": "3px",
       },
     },
   },