Add Icons for diet

src/App.vue

@@ -18,7 +18,8 @@
           Developed by <a href="https://webschneider.org">webschneider.org</a>
           &copy; {{ new Date().getFullYear() }}
         </span>
-        <span><a href="https://webschneider.org/impress">Impressum</a></span>
+        <span><a href="https://webschneider.org/impress">Impressum</a></span><br>
+        <span>Icons made by <a href="https://www.flaticon.com/authors/smashicons">Smashicons</a> from <a href="https://www.flaticon.com">www.flaticon.com</a></span>
       </div>
     </footer>
   </div>

src/assets/svg/001-food.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 59 59"><path d="M57.8 27c2-2.6 1.1-5 .4-6a9.3 9.3 0 0 0-6.2-4l-.6-.2.7-.7c1.8-1.6 2.6-3.4 2.5-5.2A7 7 0 0 0 52 6c-4.1-2.8-8.7.6-9 .7V7l-.2.3A8.2 8.2 0 0 0 39 1.8a6.5 6.5 0 0 0-7-.8l-1.2.8c-1-.3-2.2-.4-3.3 0a4 4 0 0 0-2.8 3.6c-.1 1.7.8 3.5 2.3 4.3a13 13 0 0 1 4.7 5c-1 0-1.9.1-2.7.4C23.9 17 3.7 46.4 0 56a2 2 0 0 0 .5 2.2c.3.3.8.5 1.3.5l.9-.1C12.4 55 42 35 43.8 30c.2-.7.3-1.4.3-2.2a13 13 0 0 1 5 3.7 5.9 5.9 0 0 0 4.6 2.5c1.6 0 2.9-.7 3.7-1.9 1.2-1.7.7-3.6.1-4.8l.3-.3zm-1.2-4.7c.1.1 1 1.4-.3 3.3l-.1-.1a17.6 17.6 0 0 0-.8-.9l-.2-.2a14 14 0 0 0-10-4 18.3 18.3 0 0 0-2.9.2l.5-.2.5-.3.5-.1.8-.3.6-.2a23.1 23.1 0 0 1 3-.7h3.4a8 8 0 0 1 5 3.5zm-12.3-14c.6-.3 3.9-2.4 6.5-.6.2.2 1.7 1.5 1.8 3.3 0 1.2-.5 2.5-1.9 3.7a19 19 0 0 1-2.7 2.1l-.4.1-.9.1-.5.2-.7.1a19.4 19.4 0 0 0-2.3.8l-.6.2-.4.1-2.4 1.2a30 30 0 0 0 1.7-4l.1-.2.3-.8.2-.5.2-.7v-.5a19.5 19.5 0 0 0 .5-2v-.3l1.5-2.2zM32.8 2.9c2.6-1.3 4.8.5 4.9.6h.1c1.6 1 2.6 2.5 3 4.3v2.5a19 19 0 0 1-1.1 4.7c0-1 0-2-.2-3a13.6 13.6 0 0 0-.2-1l-.1-.4-.2-.5v-.2c-.5-1.4-1.3-2.7-2.5-4v-.1l-.6-.5-.2-.3-.5-.4a15.8 15.8 0 0 0-1.3-1l-1-.7zM28 8a2.6 2.6 0 0 1-1.3-2.4A2 2 0 0 1 28 3.7a3 3 0 0 1 1-.1 4.5 4.5 0 0 1 1.6.3l.5.2.3.1.3.2.2.1c.5.3 1 .6 1.1.8l.2.1 1.2 1 .3.4.7.8.3.3a10.2 10.2 0 0 1 1.2 2.3l.1.2c.7 1.8.9 4 .5 6.3a20 20 0 0 1-1.3 4.3l-.5-1.7-.1-.3-.5-1.5-.1-.2c-2.2-5.4-5-8-7-9.3zm14 21.3c-.6 1.5-4.3 4.8-9.4 8.6l-.3-.1c-1.6-.2-3.7-1-4.8-2.5a1 1 0 0 0-1.6 1.1c1.1 1.6 3 2.5 4.6 3a253 253 0 0 1-10.3 7 1 1 0 0 0-.5-.2c-1-.1-2.4-.6-3-1.6a1 1 0 1 0-1.6 1.2c.7 1 1.8 1.7 3 2-6.5 4.2-12.7 7.7-16 8.9a59 59 0 0 1 4.2-8.4l.1.1 2.3 1.4a1 1 0 0 0 1.3-.5 1 1 0 0 0-.4-1.3c-.7-.3-1.4-.7-2-1.2a1 1 0 0 0-.3-.1c2.3-4 5.1-8.3 8-12.3.4 1 1 2 2 2.6l.5.2a1 1 0 0 0 .6-1.8c-1-.7-1.4-2-1.6-3v-.2l6.3-8.4a8.5 8.5 0 0 0 3 4.5c.2.2.4.2.6.2a1 1 0 0 0 .6-1.8c-1.5-1-2.3-3.1-2.5-4.8v-.1a18 18 0 0 1 4.9-4.8l1.5-.3 1.6.3 1.2 3.2v.2l.5 1.5v.4L35 24v.2h.1v.1l.1.1v.1h.1l.1.1h.1v.1h.1l.2.1 1.6.4.4.2 1.3.3.3.1 1.2.5h.2l1.4.5c.1.9 0 1.7-.2 2.4zM55.7 31c-.5.8-1.4 1-2 1-1.1 0-2.3-.6-3-1.6a17.1 17.1 0 0 0-7.4-5v-.1h-.1a35.4 35.4 0 0 0-4-1.5l-.4-.1.2-.1h.1c3.1-1.2 8.5-2.3 13 1l.8.5.3.3a11 11 0 0 1 2.1 2.2l.1.1c.4.5 1.2 2 .3 3.3z"/><path d="M40.4 29c-2-.8-4-2.2-5.7-4.2a1 1 0 1 0-1.5 1.3 16.1 16.1 0 0 0 6.8 4.8 1 1 0 0 0 .4-2z"/></svg>

src/assets/svg/002-steak.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.8 51.8"><path d="M49.6 14.1C47.7 9.6 44.3 3.7 38.4 1.3 34-.4 29 0 23.4 2.5c-7 3.2-9.2 9-6.4 16a6.5 6.5 0 0 1-7 9c-3.8-.4-6.7.4-8.4 2.5C.3 31.6-1 34.7 1 40.2v.1a21 21 0 0 0 12 10.2c1.9.6 3.8.8 5.6 1H22A38 38 0 0 0 36.3 49 24 24 0 0 0 51 31.7a29 29 0 0 0-1.5-17.6zM49 31.2a22 22 0 0 1-13.6 15.9c-7.1 3-14.3 2.5-16.4 2.4h-.3a19.3 19.3 0 0 1-16-10c-1.2-3.6-1-6.5.3-8.2 1.3-1.6 3.6-2.2 6.6-1.8A8.5 8.5 0 0 0 19 18c-2.5-6.3-.7-10.8 5.4-13.6 5-2.3 9.5-2.7 13.3-1.1 5.3 2 8.4 7.5 10.1 11.7 2.2 5.4 2.7 11 1.4 16.4z"/><path d="M33.5 18.8a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-8a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/><path d="M47.8 24.2a26 26 0 0 0-1.9-8.5C41.6 5 34.4 1.7 24.7 6.2c-1.9.8-7.8 3.5-4.6 11.6a9 9 0 0 1-1 8.7 9.3 9.3 0 0 1-8.9 4c-2.6-.4-4.6 0-5.5 1.4-1 1.3-1 3.7 0 6.6l.1.1c.5 1 3.3 6 9.7 8 1.4.6 3 .7 4.7.9h.3l2.7.1c18.9 0 23.8-11.8 25-16.8.5-2 .7-4.2.6-6.4v-.2zM25.6 8a17 17 0 0 1 7-1.8c4.8 0 8.7 3.5 11.4 10.2.9 2 1.4 4.1 1.6 6.2-4.4-1.3-12.4 2.7-13.7 3.3-6 2-8.7-.8-9.5-1.7.6-2.3.5-4.8-.4-7.1-2.2-5.6.6-7.7 3.6-9.1zm-4.8 19.6l.8-1.4c1.2 1 3.3 2.4 6.5 2.4a14.7 14.7 0 0 0 4.7-.8c3.9-2 10.7-4.6 13-3 0 1.9-.1 3.7-.6 5.5v.1c-2.2-.6-7.5-1.2-16.2 3-3 1.4-5.5 1.7-7.6.8-2-.8-3.2-2.6-3.7-3.6a11 11 0 0 0 3.1-3zm-1.1 17.9h-.3c-1.6-.2-3-.3-4.3-.7a15.4 15.4 0 0 1-8.5-7c-.8-2.6-.7-4.2-.2-4.8.4-.6 1.8-.8 3.6-.6 2 .3 4 0 5.7-.7l.2 1c.5 3.5 2.5 6.7 5.3 8.7 2 1.4 3.5 2.7 3.5 4.1a39.5 39.5 0 0 1-5 0zm7-.2c-.1-2.7-2.8-4.5-4.3-5.6a11 11 0 0 1-3.9-4.9c.6.5 1.3 1 2 1.3 2.7 1 5.9.8 9.4-.9 8.2-4 13-3.3 14.7-2.8-1.6 4.5-6 11.5-17.9 13z"/></svg>

src/assets/svg/003-fish.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.5 47.5"><path d="M9 32.3a3 3 0 0 0-4.2 4.2 3 3 0 0 0 4.3 0 3 3 0 0 0 0-4.2zM7.8 35a1 1 0 1 1 0-1.4l.2.7c0 .2 0 .5-.2.7z"/><path d="M47.3 13.7c-.2-.7-.6-1.4-1.3-1.7-.5-.2-.6-.6-.9-1.4-.2-.7-.6-2.1-2.2-2-.5 0-1 0-1.3-.4-.3-.3-.5-.8-.4-1.3 0-1.1-.3-2.2-1-3-.7-.6-1.7-1-2.8-1v-.1C37.2 2 36.9.5 34.8.2c-.4-.2-1.5-.4-2.4.1-.4.3-.9.8-1 2v6.2H21.2c-1.6 0-3.2.2-4.7.5-.5-2-1.4-3.9-2.6-5.6l-.5-.7-.8.4C12.4 3 8 5.4 6.7 9.3c-.5 1.6-.4 3.2.3 4.8A21 21 0 0 0 .2 29.5v18H18a21 21 0 0 0 16.3-7.7 16.8 16.8 0 0 0 11.3-3.2l.7-.5-.4-.7c0-.3-2.7-5.3-7-6.2l.2-2.8V16.2l6.3.1a2 2 0 0 0 1.3-.6c.4-.6.6-1.3.5-2zm-38.7-1c-.3-1-.3-1.8 0-2.8.7-2.2 3-3.9 4.2-4.6a15 15 0 0 1 1.8 4.3l-2.6 1-.6.3-.8.5a20.5 20.5 0 0 0-1.6 1l-.4.3zm30 18.5c2.5.5 4.4 3 5.2 4.3a14.7 14.7 0 0 1-8 2.4 22 22 0 0 0 2.8-6.5v-.2zm6.7-16.9h-8.1v12a19 19 0 0 1-.3 3.5v.1a18.6 18.6 0 0 1-3.8 8.3l-.4.5-1.1 1.2A19 19 0 0 1 18 45.5H2v-16a19 19 0 0 1 12-17.6 19 19 0 0 1 7-1.4h12.3V2h.8l.2.1c.8.1.9.4 1 1 .1.6.4 2 2 1.9.6 0 1 0 1.4.4.3.3.4.8.4 1.3-.1 1.1.2 2.2 1 3 .7.7 1.7 1 2.8 1l.2.5c.3.8.7 2 2 2.7l.1.2v.2zm.1.2l.6.5-.6-.5z"/><path d="M7 24.9v2a14 14 0 0 1 14 14h2a16 16 0 0 0-16-16z"/><path d="M10.2 21.6v2a14 14 0 0 1 14 14h2a16 16 0 0 0-16-16z"/><path d="M13.3 18.5v2a14 14 0 0 1 14 14h2a16 16 0 0 0-16-16z"/><path d="M16.6 15.3v2a14 14 0 0 1 14 14h2a16 16 0 0 0-16-16z"/></svg>

src/components/Mensa.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="mensa">
-    <h3 id="date">{{date}}</h3>
+    <h2 id="date">{{date}}</h2>
       <div class="meal" v-for="meal in meals">
-        <h3>{{meal.category}}</h3>
+        <h2>{{meal.category}}
+          <img v-if="meal.diet === 'fleischlos'" class="svg-icon" src="../assets/svg/001-food.svg" title="ohne Fleisch" alt="ohne Fleisch">
+          <img v-else-if="meal.diet === 'mit Fleisch'" class="svg-icon" src="../assets/svg/002-steak.svg" title="mit Fleisch" alt="mit Fleisch">
+          <img v-if="meal.diet === 'mit Fisch/ Meeresfrüchten' || meal.diet === 'MSC zertifiziert'" class="svg-icon" src="../assets/svg/003-fish.svg" title="mit Fisch" alt="mit Fisch">
+        </h2>
         <p>{{meal.title}}</p>
       </div>
   </div>
@@ -13,7 +17,7 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'mensa',
-  computed:{
+  computed: {
     ...mapGetters({
       meals: 'getMeals',
       date: 'getDate'
@@ -22,22 +26,27 @@ export default {
 }
 </script>
 <style>
-.meal{
+.meal {
   margin: 2em 0;
 }
 
-.meal>h3{
-  margin-bottom:0em;
+.meal > h2 {
+  margin-bottom: 0em;
 }
 
-.meal>p{
+.meal > p {
   margin-top: 0.4em;
 }
 
-#date{
+#date {
   margin-bottom: -1em;
 }
-.mensa{
+.mensa {
   margin-bottom: 3em;
 }
+
+.svg-icon {
+  height: 1em;
+  width: 1em;
+}
 </style>