✨ Site > File tree > Add folder icons

site/src/components/file-icon/script.js

@@ -35,7 +35,9 @@ export default
             git: ['gitignore', 'gitkeep'],
             xml: ['xml'],
             twig: ['twig'],
-            c: ['c', 'h']
+            c: ['c', 'h'],
+            folder: ['folder'],
+            'folder-active': ['folder-active']
         }
 
         this.icon = 'random'

site/src/components/files-tree-folder/script.js

@@ -1,4 +1,5 @@
 import FilesTreeFile from '@/components/files-tree-file'
+import FileIcon from '@/components/file-icon/'
 
 export default
 {
@@ -6,7 +7,8 @@ export default
 
     components:
     {
-        FilesTreeFile
+        FilesTreeFile,
+        FileIcon
     },
 
     props:

site/src/components/files-tree-folder/template.html

@@ -1,6 +1,10 @@
 <div>
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
-        {{ content.name }}
+        <file-icon class="icon" extension="folder-active" v-show="open"></file-icon>
+        <file-icon class="icon" extension="folder" v-show="!open"></file-icon>
+        <span class="text">
+            {{ content.name }}
+        </span>
     </a>
     <div v-show="open">
         <files-tree-folder v-for="folder of content.folders" :key="folder.name" :content="folder" :depth="depth + 1"></files-tree-folder>