Add support for a message icon

3 files changed, 8 insertions, 3 deletions

diff --git a/docs/configuration.md b/docs/configuration.md
index 0e5d002..2cdc10e 100644
--- a/docs/configuration.md
+++ b/docs/configuration.md
@@ -68,6 +68,7 @@ message:
   # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
   style: "is-warning"
   title: "Optional message!"
+  icon: "fa fa-exclamation-triangle"
   content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
 
 # Optional navbar
diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist
index 92133d9..85478ec 100644
--- a/public/assets/config.yml.dist
+++ b/public/assets/config.yml.dist
@@ -42,7 +42,8 @@ colors:
 message:
   #url: https://b4bz.io
   style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
-  title: "👋 Demo !"
+  title: "Demo !"
+  icon: "fa fa-grin"
   content: "This is a dummy homepage demo. <br /> Find more information on <a href='https://github.com/bastienwirtz/homer'>github.com/bastienwirtz/homer</a>"
 
 # Optional navbar
diff --git a/src/components/Message.vue b/src/components/Message.vue
index d007d3e..5a1e0ea 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -1,7 +1,10 @@
 <template>
   <article v-if="show" class="message" :class="message.style">
-    <div v-if="message.title" class="message-header">
-      <p>{{ message.title }}</p>
+    <div v-if="message.title || message.icon" class="message-header">
+      <p>
+        <i v-if="message.icon" :class="`fa-fw ${message.icon}`"></i>
+        {{ message.title }}
+      </p>
     </div>
     <div
       v-if="message.content"