emoji ios styling for list

resources/js/components/FilesView/FolderIcon.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
-        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: `${folderColor}`}"/>
+        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: folderColor}"/>
     </div>
 </template>
 

resources/js/components/Others/Emoji.vue

@@ -1,39 +1,36 @@
 <template>
     <div>
-        <div v-if="transferEmoji && !isApple"  v-html="transferEmoji"/>
+        <span v-if="transferEmoji && !isApple" class="twemoji-emoji" v-html="transferEmoji"></span>
-        <span v-if="transferEmoji && isApple" class="apple-emoji">{{transferEmoji}}</span>
+        <span v-if="transferEmoji && isApple" class="apple-emoji">{{ transferEmoji }}</span>
     </div>
-    
 </template>
 
 <script>
 import twemoji from 'twemoji'
+
 export default {
     name: 'Emoji',
     props: ['emoji'],
     computed: {
-        transferEmoji () {
+        transferEmoji() {
 
             // Transfer single emoji to twemoji
             let tweomjiParse = twemoji.parse(this.emoji.char, {
-                        folder: 'svg',
+                folder: 'svg',
-                        ext: '.svg',
+                ext: '.svg',
-                        attributes: () => ({
+                attributes: () => ({
-                            loading: 'lazy',
+                    loading: 'lazy'
-                        }) 
+                })
-                    }) 
+            })
 
             // Check the OS, if is OS not iOS return transfered emoji to twemoji
             return !this.isApple ? tweomjiParse : this.emoji.char
-        },
-    },
-    data () {
-        return {
-            isApple: false
         }
     },
-    created () {
+    data() {
-        this.isApple = this.$isApple()
+        return {
+            isApple: this.$isApple()
+        }
     }
 }
 </script>
@@ -42,6 +39,10 @@ export default {
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
+.apple-emoji {
+    font-size: 49px;
+    line-height: 1.2;
+}
 
 </style>