editable image add image icon

src/assets/main.scss

@@ -1070,9 +1070,11 @@ div.editable-image{
     text-align: center;
     transition: all 0.2s ease-in-out;
     position: relative;
-    >span{
+    >svg{
       display: inline-block;
       vertical-align: middle;
+      width:50px; height:50px;
+      color: #333;
     }
     cursor: pointer;
     box-sizing: border-box;
@@ -1081,6 +1083,9 @@ div.editable-image{
     }
 
   }
+  div.delete-btn{
+    cursor: pointer;
+  }
   input[type="file"]{
     display: none;
   }

src/components/contents/Entite.vue

@@ -59,6 +59,7 @@ export default {
   <section class="entite">
     <section v-if="entite.image.length || entite.can_update" class="image">
       <ImageEditable 
+        :can_update="entite.can_update"
         :image="entite.image"
         :data="{
           entitytype: 'node',

src/components/editable/ImageEditable.vue

@@ -9,16 +9,19 @@ import { UserStore } from '@stores/user'
 
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiTrashCanOutline } from '@mdi/js';
+import { mdiImagePlus } from '@mdi/js';
 
 export default {
   props: {
+    can_update: Boolean,
     image: Object,
     data: Object
   },
   emits: ['updated'],
   data(){
     return {
-      mdiTrashCanOutline_path: mdiTrashCanOutline
+      mdiTrashCanOutline_path: mdiTrashCanOutline,
+      mdiImagePlus_path: mdiImagePlus
     }
   },
   computed: {
@@ -121,13 +124,15 @@ export default {
         <img :src="image[0].url" :alt="image[0].alt"/>
         <figcaption v-if="image[0].alt">{{ image[0].alt }}</figcaption>
       </figure>
-      <svg-icon type="mdi" :path="mdiTrashCanOutline_path" @click="onDeleteImg" />
+      <div v-if="can_update" @click="onDeleteImg" class="delete-btn">
+        <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
+      </div>
     </template>
     <!-- with out img -->
-    <template v-else>
+    <template v-else-if="can_update">
       <div @click="addImage" class="btn">
-
+        <svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
-        <span>ajouter une image</span>
+        <!-- <span>ajouter une image</span> -->
       </div>
       <input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
     </template>