добавлен svg шрифт. Заменены импорты svg, на использование шрифта

src/assets/css/iconfonts.css

@@ -0,0 +1,150 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon.eot?d07d1g');
+  src:  url('../fonts/icomoon.eot?d07d1g#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?d07d1g') format('truetype'),
+    url('../fonts/icomoon.woff?d07d1g') format('woff'),
+    url('../fonts/icomoon.svg?d07d1g#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"]::before, [class*=" icon-"]::before {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-settings:before {
+  content: "\e925";
+}
+.icon-home:before {
+  content: "\e926";
+}
+.icon-calendar-2:before {
+  content: "\e927";
+}
+.icon-person-2:before {
+  content: "\e928";
+}
+.icon-basket:before {
+  content: "\e900";
+}
+.icon-bell:before {
+  content: "\e901";
+}
+.icon-calendar:before {
+  content: "\e902";
+}
+.icon-cancel:before {
+  content: "\e903";
+}
+.icon-cancel-mini:before {
+  content: "\e904";
+}
+.icon-change-place:before {
+  content: "\e905";
+}
+.icon-close-eye:before {
+  content: "\e906";
+}
+.icon-copy:before {
+  content: "\e907";
+}
+.icon-discord:before {
+  content: "\e908";
+}
+.icon-doc-ok:before {
+  content: "\e909";
+}
+.icon-dots:before {
+  content: "\e90a";
+}
+.icon-down-arrow:before {
+  content: "\e90b";
+}
+.icon-edit:before {
+  content: "\e90c";
+}
+.icon-export:before {
+  content: "\e90d";
+}
+.icon-eye:before {
+  content: "\e90e";
+}
+.icon-files:before {
+  content: "\e90f";
+}
+.icon-filtre:before {
+  content: "\e910";
+}
+.icon-google:before {
+  content: "\e911";
+}
+.icon-group:before {
+  content: "\e912";
+}
+.icon-long-arrow:before {
+  content: "\e913";
+}
+.icon-mail:before {
+  content: "\e914";
+}
+.icon-ok:before {
+  content: "\e915";
+}
+.icon-person:before {
+  content: "\e916";
+}
+.icon-phone:before {
+  content: "\e917";
+}
+.icon-plus:before {
+  content: "\e918";
+}
+.icon-search:before {
+  content: "\e919";
+}
+.icon-slack:before {
+  content: "\e91a";
+}
+.icon-sort-number:before {
+  content: "\e91b";
+}
+.icon-sort-word:before {
+  content: "\e91c";
+}
+.icon-star:before {
+  content: "\e91d";
+}
+.icon-star-black:before {
+  content: "\e91e";
+}
+.icon-table:before {
+  content: "\e91f";
+}
+.icon-telegram:before {
+  content: "\e920";
+}
+.icon-time:before {
+  content: "\e921";
+}
+.icon-up-tag:before {
+  content: "\e922";
+}
+.icon-user-data:before {
+  content: "\e923";
+}
+.icon-vk:before {
+  content: "\e924";
+}

src/components/baseComponents/buttons/ButtonPlus.vue

@@ -1,15 +1,10 @@
 <template lang="pug">
-  button(class="button-plus")
+  button.icon-plus(class="button-plus")
-    basic-icon(width="12" height="12" icon-color="#4169E1" )
-      plus-icon
 </template>
 
 <script>
-  import PlusIcon from "@/components/iconsComponents/PlusIcon"
-  import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
   export default {
     name: "ButtonPlus",
-    components: {BasicIcon, PlusIcon}
   }
 </script>
 
@@ -17,9 +12,10 @@
   .button-plus
     outline: none
     border: none
+    font-size: 12px
     cursor: pointer
-    width: fit-content
+    color: #4772F2
+    padding: 7px 7px 5px 7px
     background-color: rgba(65, 105, 225, 0.25)
-    padding: 7px 7px 3px 7px
     border-radius: 50%
 </style>

src/components/iconsComponents/ArrowDownIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M7.53033 9.46967C7.23744 9.17678 6.76256 9.17678 6.46967 9.46967C6.17678 9.76256 6.17678 10.2374 6.46967 10.5303L7.53033 9.46967ZM12 15L11.4697 15.5303C11.7626 15.8232 12.2374 15.8232 12.5303 15.5303L12 15ZM17.5303 10.5303C17.8232 10.2374 17.8232 9.76256 17.5303 9.46967C17.2374 9.17678 16.7626 9.17678 16.4697 9.46967L17.5303 10.5303ZM6.46967 10.5303L11.4697 15.5303L12.5303 14.4697L7.53033 9.46967L6.46967 10.5303ZM12.5303 15.5303L17.5303 10.5303L16.4697 9.46967L11.4697 14.4697L12.5303 15.5303Z"/>
-  </g>
-</template>

src/components/iconsComponents/CalendarIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M6.66675 17.5833C6.25253 17.5833 5.91675 17.9191 5.91675 18.3333C5.91675 18.7475 6.25253 19.0833 6.66675 19.0833V17.5833ZM25.7501 5C25.7501 4.58579 25.4143 4.25 25.0001 4.25C24.5859 4.25 24.2501 4.58579 24.2501 5H25.7501ZM24.2501 11.6667C24.2501 12.0809 24.5859 12.4167 25.0001 12.4167C25.4143 12.4167 25.7501 12.0809 25.7501 11.6667H24.2501ZM15.7501 5C15.7501 4.58579 15.4143 4.25 15.0001 4.25C14.5859 4.25 14.2501 4.58579 14.2501 5H15.7501ZM14.2501 11.6667C14.2501 12.0809 14.5859 12.4167 15.0001 12.4167C15.4143 12.4167 15.7501 12.0809 15.7501 11.6667H14.2501ZM33.3334 17.5833H6.66675V19.0833H33.3334V17.5833ZM7.41675 31.6667V11.6667H5.91675V31.6667H7.41675ZM10.0001 34.25C8.57335 34.25 7.41675 33.0934 7.41675 31.6667H5.91675C5.91675 33.9218 7.74492 35.75 10.0001 35.75V34.25ZM10.0001 7.58333C7.74492 7.58333 5.91675 9.4115 5.91675 11.6667H7.41675C7.41675 10.2399 8.57335 9.08333 10.0001 9.08333V7.58333ZM34.0834 31.6667V18.3333H32.5834V31.6667H34.0834ZM34.0834 18.3333V11.6667H32.5834V18.3333H34.0834ZM30.0001 35.75C32.2552 35.75 34.0834 33.9218 34.0834 31.6667H32.5834C32.5834 33.0934 31.4268 34.25 30.0001 34.25V35.75ZM30.0001 9.08333C31.4268 9.08333 32.5834 10.2399 32.5834 11.6667H34.0834C34.0834 9.4115 32.2552 7.58333 30.0001 7.58333V9.08333ZM30.0001 7.58333H10.0001V9.08333H30.0001V7.58333ZM30.0001 34.25H10.0001V35.75H30.0001V34.25ZM24.2501 5V11.6667H25.7501V5H24.2501ZM14.2501 5V11.6667H15.7501V5H14.2501Z"/>
-  </g>
-</template>

src/components/iconsComponents/ClockIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M10.75 6.5C10.75 6.08579 10.4142 5.75 10 5.75C9.58579 5.75 9.25 6.08579 9.25 6.5H10.75ZM10 10.5H9.25C9.25 10.6989 9.32902 10.8897 9.46967 11.0303L10 10.5ZM11.4697 13.0303C11.7626 13.3232 12.2374 13.3232 12.5303 13.0303C12.8232 12.7374 12.8232 12.2626 12.5303 11.9697L11.4697 13.0303ZM9.25 6.5V10.5H10.75V6.5H9.25ZM9.46967 11.0303L11.4697 13.0303L12.5303 11.9697L10.5303 9.96967L9.46967 11.0303ZM18.25 10.5C18.25 15.0563 14.5563 18.75 10 18.75V20.25C15.3848 20.25 19.75 15.8848 19.75 10.5H18.25ZM10 18.75C5.44365 18.75 1.75 15.0563 1.75 10.5H0.25C0.25 15.8848 4.61522 20.25 10 20.25V18.75ZM1.75 10.5C1.75 5.94365 5.44365 2.25 10 2.25V0.75C4.61522 0.75 0.25 5.11522 0.25 10.5H1.75ZM10 2.25C14.5563 2.25 18.25 5.94365 18.25 10.5H19.75C19.75 5.11522 15.3848 0.75 10 0.75V2.25Z"/>
-  </g>
-</template>

src/components/iconsComponents/CloseIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M15.5303 1.53033C15.8232 1.23744 15.8232 0.762563 15.5303 0.46967C15.2374 0.176777 14.7626 0.176777 14.4697 0.46967L15.5303 1.53033ZM0.46967 14.4697C0.176777 14.7626 0.176777 15.2374 0.46967 15.5303C0.762563 15.8232 1.23744 15.8232 1.53033 15.5303L0.46967 14.4697ZM1.53034 0.46967C1.23745 0.176777 0.762577 0.176777 0.469684 0.46967C0.176791 0.762563 0.176791 1.23744 0.469684 1.53033L1.53034 0.46967ZM14.4697 15.5303C14.7626 15.8232 15.2375 15.8232 15.5304 15.5303C15.8232 15.2374 15.8232 14.7626 15.5304 14.4697L14.4697 15.5303ZM14.4697 0.46967L0.46967 14.4697L1.53033 15.5303L15.5303 1.53033L14.4697 0.46967ZM0.469684 1.53033L14.4697 15.5303L15.5304 14.4697L1.53034 0.46967L0.469684 1.53033Z"/>
-  </g>
-</template>

src/components/iconsComponents/HomeIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M20 5L20.5303 4.46967C20.3897 4.32902 20.1989 4.25 20 4.25C19.8011 4.25 19.6103 4.32902 19.4697 4.46967L20 5ZM8.33331 16.6667L7.80298 16.1363C7.66233 16.277 7.58331 16.4678 7.58331 16.6667L8.33331 16.6667ZM31.6666 16.6667H32.4166C32.4166 16.4678 32.3376 16.277 32.197 16.1363L31.6666 16.6667ZM31.6667 33.3333V34.0833C31.8656 34.0833 32.0563 34.0043 32.197 33.8637C32.3376 33.723 32.4167 33.5322 32.4167 33.3333H31.6667ZM8.33332 33.3333H7.58332C7.58332 33.7475 7.91911 34.0833 8.33332 34.0833V33.3333ZM19.4697 4.46967L7.80298 16.1363L8.86364 17.197L20.5303 5.53033L19.4697 4.46967ZM32.197 16.1363L20.5303 4.46967L19.4697 5.53033L31.1363 17.197L32.197 16.1363ZM30.9166 16.6667L30.9167 33.3333H32.4167L32.4166 16.6667L30.9166 16.6667ZM31.6667 32.5833H8.33332V34.0833H31.6667V32.5833ZM9.08332 33.3333L9.08331 16.6667L7.58331 16.6667L7.58332 33.3333H9.08332Z"/>
-  </g>
-</template>

src/components/iconsComponents/MailIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M8.58579 9.08574L9.11612 8.55541L9.11611 8.55541L8.58579 9.08574ZM11.4142 9.08574L10.8839 8.55541L10.8839 8.55541L11.4142 9.08574ZM2 2.25H18V0.75H2V2.25ZM18.25 2.5V14.5H19.75V2.5H18.25ZM18 14.75H2V16.25H18V14.75ZM1.75 14.5V2.5H0.25V14.5H1.75ZM2 14.75C1.86193 14.75 1.75 14.6381 1.75 14.5H0.25C0.25 15.4665 1.0335 16.25 2 16.25V14.75ZM18.25 14.5C18.25 14.6381 18.1381 14.75 18 14.75V16.25C18.9665 16.25 19.75 15.4665 19.75 14.5H18.25ZM2 0.75C1.51696 0.75 1.07843 0.946697 0.762563 1.26256L1.82322 2.32322C1.86929 2.27716 1.93076 2.25 2 2.25V0.75ZM0.762563 1.26256C0.446697 1.57843 0.25 2.01696 0.25 2.5H1.75C1.75 2.43076 1.77716 2.36929 1.82322 2.32322L0.762563 1.26256ZM18 2.25C18.0692 2.25 18.1307 2.27716 18.1768 2.32322L19.2374 1.26256C18.9216 0.946695 18.483 0.75 18 0.75V2.25ZM18.1768 2.32322C18.2228 2.36928 18.25 2.43076 18.25 2.5H19.75C19.75 2.01696 19.5533 1.57843 19.2374 1.26256L18.1768 2.32322ZM8.05546 9.61607C9.1294 10.69 10.8706 10.69 11.9445 9.61607L10.8839 8.55541C10.3957 9.04357 9.60427 9.04356 9.11612 8.55541L8.05546 9.61607ZM0.762565 2.32323L8.05546 9.61607L9.11611 8.55541L1.82322 1.26256L0.762565 2.32323ZM11.9445 9.61607L19.2374 2.32323L18.1768 1.26256L10.8839 8.55541L11.9445 9.61607Z"/>
-  </g>
-</template>

src/components/iconsComponents/PlusIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M6.75 1C6.75 0.585786 6.41421 0.25 6 0.25C5.58579 0.25 5.25 0.585786 5.25 1H6.75ZM5.25 11C5.25 11.4142 5.58579 11.75 6 11.75C6.41421 11.75 6.75 11.4142 6.75 11H5.25ZM1 5.25C0.585786 5.25 0.25 5.58579 0.25 6C0.25 6.41421 0.585786 6.75 1 6.75V5.25ZM11 6.75C11.4142 6.75 11.75 6.41421 11.75 6C11.75 5.58579 11.4142 5.25 11 5.25V6.75ZM5.25 1V11H6.75V1H5.25ZM1 6.75H11V5.25H1V6.75Z"/>
-  </g>
-</template>

src/components/iconsComponents/UserIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M33.3334 35V35.75C33.7476 35.75 34.0834 35.4142 34.0834 35H33.3334ZM6.66675 35H5.91675C5.91675 35.4142 6.25253 35.75 6.66675 35.75V35ZM13.3334 25.75H26.6667V24.25H13.3334V25.75ZM32.5834 31.6667V35H34.0834V31.6667H32.5834ZM7.41675 35V31.6667H5.91675V35H7.41675ZM26.6667 25.75C29.9344 25.75 32.5834 28.399 32.5834 31.6667H34.0834C34.0834 27.5706 30.7629 24.25 26.6667 24.25V25.75ZM13.3334 24.25C9.2373 24.25 5.91675 27.5706 5.91675 31.6667H7.41675C7.41675 28.399 10.0657 25.75 13.3334 25.75V24.25ZM25.9167 11.6667C25.9167 14.9344 23.2678 17.5833 20.0001 17.5833V19.0833C24.0962 19.0833 27.4167 15.7628 27.4167 11.6667H25.9167ZM20.0001 17.5833C16.7324 17.5833 14.0834 14.9344 14.0834 11.6667H12.5834C12.5834 15.7628 15.904 19.0833 20.0001 19.0833V17.5833ZM14.0834 11.6667C14.0834 8.39898 16.7324 5.75 20.0001 5.75V4.25C15.904 4.25 12.5834 7.57055 12.5834 11.6667H14.0834ZM20.0001 5.75C23.2678 5.75 25.9167 8.39898 25.9167 11.6667H27.4167C27.4167 7.57055 24.0962 4.25 20.0001 4.25V5.75ZM6.66675 35.75H33.3334V34.25H6.66675V35.75Z"/>
-  </g>
-</template>

src/components/iconsComponents/UserSmallIcon.vue

@@ -1,5 +0,0 @@
-<template>
-  <g>
-    <path d="M17 19.5V20.25C17.4142 20.25 17.75 19.9142 17.75 19.5H17ZM1 19.5H0.25C0.25 19.9142 0.585786 20.25 1 20.25L1 19.5ZM5 14.25H13V12.75H5V14.25ZM16.25 17.5V19.5H17.75V17.5H16.25ZM1.75 19.5V17.5H0.25V19.5H1.75ZM13 14.25C14.7949 14.25 16.25 15.7051 16.25 17.5H17.75C17.75 14.8766 15.6234 12.75 13 12.75V14.25ZM5 12.75C2.37665 12.75 0.25 14.8766 0.25 17.5H1.75C1.75 15.7051 3.20507 14.25 5 14.25V12.75ZM12.25 5.5C12.25 7.29493 10.7949 8.75 9 8.75V10.25C11.6234 10.25 13.75 8.12335 13.75 5.5H12.25ZM9 8.75C7.20507 8.75 5.75 7.29493 5.75 5.5H4.25C4.25 8.12335 6.37665 10.25 9 10.25V8.75ZM5.75 5.5C5.75 3.70507 7.20507 2.25 9 2.25V0.75C6.37665 0.75 4.25 2.87665 4.25 5.5H5.75ZM9 2.25C10.7949 2.25 12.25 3.70507 12.25 5.5H13.75C13.75 2.87665 11.6234 0.75 9 0.75V2.25ZM1 20.25H17V18.75H1V20.25Z"/>
-  </g>
-</template>

src/components/iconsComponents/basicIcon/BasicIcon.vue

@@ -1,52 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg"
-       :width="width"
-       :height="height"
-       :viewBox="viewBox"
-       :aria-labelledby="iconName"
-       role="presentation"
-  >
-    <title
-        :id="iconName"
-        lang="en"
-    >{{iconName}} icon</title>
-    <g :fill="iconColor">
-      <slot />
-    </g>
-  </svg>
-</template>
-
-<script>
-export default {
-  props: {
-    iconName: {
-      type: String,
-      default: 'box'
-    },
-    width: {
-      type: [Number, String],
-      default: 40
-    },
-    height: {
-      type: [Number, String],
-      default: 40
-    },
-    iconColor: {
-      type: String,
-      default: 'currentColor'
-    },
-  },
-  computed: {
-    viewBox() {
-      return `0 0 ${this.width} ${this.height}`
-    }
-  }
-}
-</script>
-
-<style scoped>
-svg {
-  display: inline-block;
-  vertical-align: baseline;
-}
-</style>

src/components/pages/calendarPages/FormAddEvent.vue

@@ -3,21 +3,18 @@
     .form-item-container
       .close-icon-position
         span.title-form Ответственный
-        basic-icon.close-icon(width="16" height="16" icon-color="#252850" @click="closeEventForm")
+        .icon-cancel.close-icon(@click="closeEventForm")
-          close-icon
       .input-container(@click="openSelectResponsible")
         .form-select
           .form-item-input.select-container-res {{eventData.responsible}}
             .option-container(v-if="selectResponsibleOpen" id="responsible" @click="(event)=>chooseOption(event)")
               .option-item(v-for="(responsible, index) in listResponsible" :key="index" :id="index") {{responsible}}
         .select-form-separator
-        basic-icon(width="24" height="24" icon-color="#090A15")
+        .icon-down-arrow.arrow-icon
-          arrow-down-icon
     .form-item-container
       span.title-form Оновная информация
       .form-inform-container
-        basic-icon(width="24" height="24" icon-color="#090A15" )
+        .icon-time.container-icon
-          clock-icon
         .time-input-container
           .input-container
             input.form-item-input(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
@@ -25,8 +22,7 @@
           .input-container
             input.form-item-input(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
       .form-inform-container
-        basic-icon(width="24" height="24" icon-color="#090A15")
+        .icon-person.container-icon
-          user-icon
         .input-container
           input.form-item-input(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
     .form-item-container(class='additional-information')
@@ -45,32 +41,24 @@
             .option-container(v-if="selectKindEventOpen" id="kind" @click="(event)=>chooseOption(event)")
               .option-item(v-for="(kind, index) in kindEvents" :key="index" :id="index") {{kind}}
         .select-form-separator
-        basic-icon(width="24" height="24" icon-color="#090A15")
+        .icon-down-arrow.arrow-icon
-          arrow-down-icon
     .form-item-container
       .form-inform-container
         span.title-form Контакты
         button-plus(id="addContact" @click="(e)=>addFriendInfo(e)")
       .form-inform-container(v-for="(contact, index) in listContacts" :key="index")
-        basic-icon(width="24" height="20" icon-color="#090A15")
+        .icon-mail.container-icon
-          mail-icon
         .input-container
           input.form-item-input(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
     add-event-button(@click="createEvent")
 </template>
 
 <script>
-import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
-import ArrowDownIcon from "@/components/iconsComponents/ArrowDownIcon";
-import ClockIcon from  "@/components/iconsComponents/ClockIcon";
-import UserIcon from "@/components/iconsComponents/UserSmallIcon";
-import MailIcon from "@/components/iconsComponents/MailIcon";
-import CloseIcon from "@/components/iconsComponents/CloseIcon"
 import AddEventButton from "@/components/baseComponents/buttons/AddEventButton";
 import ButtonPlus from "@/components/baseComponents/buttons/ButtonPlus";
 export default {
   name: "FormChangeEvent",
-  components: {ClockIcon, ArrowDownIcon, UserIcon, MailIcon, CloseIcon, BasicIcon, AddEventButton, ButtonPlus},
+  components: {AddEventButton, ButtonPlus},
   props: {
     listResponsible: {
       default: ["Захарова А.О.", "Коломойцев И.К.", "Ситников А.Г."]
@@ -188,8 +176,24 @@ export default {
     column-gap: 16px
   .number-additional
     margin-left: 6px
+  .arrow-icon
+    margin-bottom: -12px
+    text-align: center
+    font-size: 14px
+    color: var(--font-black-color)
+    &:hover
+      color: var(--btn-blue-color)
+  .container-icon
+    width: 24px
+    height: 24px
+    font-size: 21px
+    color: var(--font-black-color)
   .close-icon
     cursor: pointer
+    font-size: 14px
+    color: var(--font-black-color)
+    &:hover
+      color: var(--btn-blue-color)
   .close-icon-position
     display: flex
     justify-content: space-between

src/components/theComponents/TheButtonSidebar.vue

@@ -1,15 +1,12 @@
 <template lang="pug">
   a(:href="path")
     button(:id="id" class='button-icon-item')
-      basic-icon(icon-color="#252850" width="40" height="40" )
+      slot
-        slot
 </template>
 
 <script>
-  import BasicIcon from "@/components/iconsComponents/basicIcon/BasicIcon";
   export default {
     name: "ButtonSidebar",
-    components: {BasicIcon},
     props: {
       path: String,
       id: String,
@@ -28,6 +25,7 @@
     width: fit-content
     padding: 12px 16px 12px 12px
     cursor: pointer
+    font-size: 40px
     background-color: rgb(65, 105, 225, 0)
     border-radius: 0 4px 4px 0
     border-left-color: rgb(65, 105, 225, 0)
@@ -39,11 +37,9 @@
   .button-icon-item:focus
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)
-    path
+    color: #4169E1
-      fill: #4169E1
   .button-icon-item:hover
     background-color: rgb(65, 105, 225, 0.3)
     border-left-color: rgb(65, 105, 225, 1)
-    path
+    color: #4169E1
-      fill: #4169E1
 </style>

src/components/theComponents/TheSidebar.vue

@@ -2,30 +2,28 @@
   .sidebar-container
     .top-button-container
       the-button-sidebar(id="home" path="#/")
-        home-icon
+        .icon-home
       the-button-sidebar(id="calendar" path="#/calendar")
-        calendar-icon
+        .icon-calendar-2
       the-button-sidebar(id="user" path="#/user")
-        user-icon
+        .icon-person-2
     .bottom-button-container
       the-button-sidebar(id="settings" path="#/settings")
-        settings-icon
+        .icon-settings
 </template>
 
 <script>
-  import HomeIcon from '@/components/iconsComponents/HomeIcon';
-  import CalendarIcon from '@/components/iconsComponents/CalendarIcon';
-  import UserIcon from '@/components/iconsComponents/UserIcon';
-  import SettingsIcon from '@/components/iconsComponents/SettingsIcon';
   import TheButtonSidebar from "@/components/theComponents/TheButtonSidebar";
 
   export default {
     name: "SidebarComponent",
-    components: {TheButtonSidebar, HomeIcon, CalendarIcon, UserIcon, SettingsIcon},
+    components: {TheButtonSidebar},
   }
 </script>
 
 <style lang="sass">
+  #person
+    font-style: normal
   .sidebar-container
     display: flex
     flex-direction: column
@@ -38,6 +36,8 @@
 
   .top-button-container
     display: flex
+    font-size: 40px
     flex-direction: column
     row-gap: 24px
+    color: #9C27B0
 </style>

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from "./router";
 import './assets/sass/styles.sass'
+import './assets/css/iconfonts.css'
 import './assets/css/variables.css'
 import { Quasar } from 'quasar'
 import quasarUserOptions from '../quasar-user-options'