add twemoji

resources/js/components/FilesView/FileItemList.vue

@@ -30,7 +30,7 @@
                 <FontAwesomeIcon v-if="isFolder && !folderIconHandle" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
 
                 <!-- If folder have set emoji -->
-                <div class="emoji" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
+                <div class="emoji-wrapper" v-if="isFolder && folderIconHandle"> {{folderIconHandle}}</div>
                
             </div>
 
@@ -280,8 +280,13 @@ export default {
         }, 300)
     },
     created() {
+    
+        this.$emojisCustomize()
+
         this.itemName = this.data.name
 
+
+
         events.$on('newFolder:focus', (unique_id) => {
 
             if(this.data.unique_id == unique_id) {
@@ -312,6 +317,13 @@ export default {
 @import '@assets/vue-file-manager/_variables';
 @import '@assets/vue-file-manager/_mixins';
 
+img.emoji {
+   height: 20px;
+   width: 20px;
+   margin: 0 .05em 0 .1em;
+   vertical-align: -0.1em;
+}
+
 .slide-from-left-move {
     transition: transform 300s ease;
 }
@@ -464,8 +476,8 @@ export default {
         line-height: 0;
         margin-right: 20px;
 
-        .emoji {
-            @include font-size(35)
+        .emoji-wrapper {
+            padding: 5px;    
         }
 
         .folder-icon {

resources/js/components/Others/SetFolderIcon.vue

@@ -2,14 +2,14 @@
     <div class="set-folder-icon">
 
         <TableWrapper >
-            <TableOption :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
+            <TableOption id="emoji-list" :title="$t('popup_rename.tab_emoji_title')" icon="emoji">
                 <div class="select-emoji-wrapper">
                     <label class="main-label">Pick Yout Emoji Icon:</label>
 
                     <div @click="openMenu" v-if="!selectOpen" class="select-input-wrapper">
 
                         <div class="select-input" v-if="selectedEmoji">
-                            <span>{{selectedEmoji.char}}</span>
+                            <div class="emoji-preview">{{selectedEmoji.char}}</div>
                             <span>{{selectedEmoji.name}}</span>
                         </div>
                     
@@ -76,6 +76,9 @@
                 if(this.searchEmoji !== undefined) {
                     emojisList = this.emojis.filter(emoji => emoji.name.includes(this.searchEmoji))
                 }
+
+                this.$emojisCustomize('emoji-list')
+
                 return emojisList ? emojisList : "Not Found"
             },
         },
@@ -87,13 +90,16 @@
                 selectOpen: false,
                 emojis: emojis,
                 colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
-		  '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
-		  '#80B300', '#809900', '#E6B3B3', '#6680B3']
+                        '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
+                        '#80B300', '#809900', '#E6B3B3', '#6680B3']
             }
         },
         methods: {
             openMenu() {
                 this.selectOpen = ! this.selectOpen
+
+                 this.$emojisCustomize('emoji-list')
+
             },
             setIcon(value) {
                 if(value.emoji)
@@ -106,6 +112,9 @@
 
 
                 this.selectOpen = false
+
+                this.$emojisCustomize()
+
             }
         },
         mounted () {
@@ -194,9 +203,10 @@
 
             .option {
                 list-style: none;
-                padding: 8px;
+                width: 45px;
+                height: 45px;
+                padding: 6px;
                 cursor: pointer;
-                @include font-size(30);
 
                 &:hover {
                     background: $light_background;
@@ -234,6 +244,15 @@
         .select-input {
             @include font-size(16);
             font-weight: 700;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .emoji-preview {
+                width: 25px;
+                height: 25px;
+                margin-right: 10px;
+            }
         }
 
         .not-selected {

resources/js/components/Others/ThumbnailItem.vue

@@ -16,7 +16,7 @@
             <!--Else show only folder icon-->
             <FontAwesomeIcon ref="folderIcon" v-if="isFolder && !folderIconHandle" class="folder-icon" icon="folder"/>
 
-            <div v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
+            <div id="thumbnail-emoji" v-if="isFolder && folderIconHandle" class="folder-emoji">{{folderIconHandle}}</div>
         </div>
 
         <!--Name-->
@@ -54,6 +54,7 @@
             folderIconHandle(){
                 let icon = undefined
 
+                this.$emojisCustomize()
                 // Set icon folder if set folder from rename popup
                 if(this.setFolderIcon){
 

resources/js/helpers.js

@@ -1,5 +1,6 @@
 import i18n from '@/i18n/index'
 import store from './store/index'
+import twemoji from 'twemoji'
 import {debounce, includes} from "lodash";
 import {events} from './bus'
 import axios from 'axios'
@@ -351,7 +352,21 @@ const Helpers = {
 				let body = document.body
 				body.classList.add('windows')
 			}
-		}
+        },
+        Vue.prototype.$emojisCustomize = function (elementId) {
+            this.$nextTick(() => {
+                
+                let list = elementId ? document.getElementById(elementId) : document.body
+
+                twemoji.parse(list, {
+                    folder: 'svg',
+                    ext: '.svg',
+                    attributes: () => ({
+                        loading: 'lazy'
+                    }) 
+                })
+            })
+        }
 	}
 }