[dark] fix inverted icons

assets/dark.scss

@@ -210,7 +210,7 @@ body[data-theme="dark"] {
     }
   }
 
-  .icon, .reversible {
+  .invertible {
     filter: invert(1);
   }
 

assets/style.scss

@@ -167,6 +167,6 @@ form[disabled] {
     }
 }
 
-.icon, .reversed {
+.inverted {
     filter: invert(1);
 }

components/Authors.vue

@@ -1,7 +1,7 @@
 <template>
     <ul class="list-unstyled">
         <li class="mb-2">
-            <Icon v="collective-logo.svg"/>
+            <Icon v="collective-logo.svg" class="invertible"/>
             <nuxt-link :to="`/${config.contact.team.route}`">
                 <T>contact.team.name</T>
             </nuxt-link>

components/Opinion.vue

@@ -1,7 +1,7 @@
 <template>
     <span>
         <strong v-if="opinion === 1">
-            <img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" :aria-label="$t('profile.opinion.yes')" class="icon"/>
+            <img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" :aria-label="$t('profile.opinion.yes')" class="icon invertible"/>
             <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
             <span v-else><Spelling escape :text="word"/></span>
         </strong>

routes/profile.vue

@@ -48,7 +48,7 @@
         <section v-if="profile.age || profile.description.trim().length || profile.team">
             <p v-if="profile.team" class="mb-2">
                 <nuxt-link :to="`/${config.contact.team.route}`" class="badge bg-primary text-white">
-                    <Icon v="collective-logo.svg" class="reversed"/>
+                    <Icon v="collective-logo.svg" class="inverted"/>
                     <T>contact.team.member</T>
                 </nuxt-link>
             </p>

routes/team.vue

@@ -1,12 +1,12 @@
 <template>
     <div>
         <h2>
-            <Icon v="collective-logo.svg"/>
+            <Icon v="collective-logo.svg" class="invertible"/>
             <T>contact.team.name</T>
         </h2>
 
         <figure class="float-end border rounded">
-            <img src="/img/collective-logo.svg" alt="" class="reversible"/>
+            <img src="/img/collective-logo.svg" alt="" class="invertible"/>
             <figcaption>
                 <p><T>contact.team.logo</T></p>
                 <p class="text-center bigger mb-0">
@@ -14,7 +14,7 @@
                     +
                     <Icon v="comment"/>
                     =
-                    <Icon v="collective-logo.svg"/>
+                    <Icon v="collective-logo.svg" class="invertible"/>
                 </p>
             </figcaption>
         </figure>