From a821339c08fa64360ffd577ef400cde240eea82c Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Mon, 11 May 2020 18:53:54 +0100
Subject: [PATCH] Add an icon to the Story list view

---
 src/views/StoryList.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/views/StoryList.vue b/src/views/StoryList.vue
index 191a40c..076e43f 100644
--- a/src/views/StoryList.vue
+++ b/src/views/StoryList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="story-list">
-    <h1>Stories</h1>
+    <h1><FontAwesomeIcon icon="book" fixed-width />Stories</h1>
     <StoryFilters @filter-change="getStories" />
     <Spinner v-if="loading" :fullScreen="true" />
     <StoryListItem v-for="story in stories" :key="story.id" :story="story" />
@@ -8,15 +8,22 @@
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBook } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
 import story from '@/api/story.js'
 
 import StoryListItem from '@/components/StoryListItem.vue'
 import StoryFilters from '@/components/StoryFilters'
 import Spinner from '@/components/Spinner'
 
+library.add(faBook)
+
 export default {
   name: 'StoryListView',
   components: {
+    FontAwesomeIcon,
     StoryListItem,
     StoryFilters,
     Spinner
@@ -46,3 +53,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.svg-inline--fa {
+  margin-right: 30px;
+  color: #999;
+}
+</style>