✨ Site > File tree > Add icons

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

@@ -1,17 +1,20 @@
+import FileIcon from '@/components/file-icon/'
+
 export default
 {
     name: 'files-tree-file',
 
+    components:
+    {
+        FileIcon
+    },
+
     props:
     {
         depth: { type: Number, default: 0 },
         content: { type: Object }
     },
 
-    created()
-    {
-    },
-
     methods:
     {
         onNameClick()

site/src/components/files-tree-file/style.styl

@@ -0,0 +1,9 @@
+.icon
+    display inline-block
+    width 12px
+    height 12px
+
+    img
+        display inline-block
+        width 100%
+        height 100%

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

@@ -1,5 +1,8 @@
 <div>
     <a href="#" class="name" :style="{ paddingLeft:depth * 20 + 'px' }" @click.prevent="onNameClick">
-        {{ content.name }}
+        <file-icon class="icon" :extension="content.data.extension"></file-icon>
+        <span class="text">
+            {{ content.name }}
+        </span>
     </a>
 </div>