fix svg errors on display and add flagged

front/src/components/utils/SvgLoader.vue

@@ -6,6 +6,11 @@ const props = defineProps({
     isDisabled: Boolean,
     classes: String,
     loading: { type: Boolean, default: false },
+    color: {
+        type: String,
+        default: `brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(1934%) hue-rotate(130deg)
+            brightness(114%) contrast(100%)`,
+    },
 });
 
 console.log(props.loading);
@@ -15,22 +20,27 @@ const pathSvg = () => require(`@/assets/svg/${props.svg}.svg`);
 <template>
     <div class="mainSvg">
         <div class="lds-dual-ring" v-if="loading"></div>
-        <img v-if="!loading" :disabled="props.isDisabled" :src="pathSvg()" :class="props.classes" />
+        <img
+            v-if="!loading"
+            :disabled="props.isDisabled"
+            :src="pathSvg()"
+            :class="props.classes"
+            :style="{ filter: color }"
+        />
     </div>
 </template>
 
 <style scoped>
 .mainSvg {
-    max-height: 26px;
+    display: inherit;
 }
 
 img {
-    filter: var(--svg-primary-text);
     padding: 1px;
 }
 
 img.danger {
-    filter: var(--svg-danger);
+    filter: var(--svg-danger) !important;
 }
 
 .lds-dual-ring {