Use vector version of openHAB logo (#1027)

This also implements vector favicons for browsers that support it,
support for browsers that do not allow vector favicons has not changed.

Signed-off-by: Ethan Dye <mrtops03@gmail.com>

README.md

@@ -1,6 +1,6 @@
 # openHAB Web Interface Add-ons
 
-<img align="right" width="220" src="./logo.png" />
+<img align="right" width="220" src="./logo.svg" type="image/svg+xml"/>
 
 [![Build Status](https://ci.openhab.org/job/openHAB-WebUI/badge/icon)](https://ci.openhab.org/job/openHAB-WebUI/)
 [![EPL-2.0](https://img.shields.io/badge/license-EPL%202-green.svg)](https://opensource.org/licenses/EPL-2.0)

bundles/org.openhab.ui/web/src/components/app.vue

@@ -5,14 +5,15 @@
       <f7-page>
         <f7-link href="/" class="logo no-ripple" panel-close v-if="themeOptions.dark === 'dark'">
           <div class="logo-inner">
-            <img src="@/images/openhab-logo-white.png" width="100%">
+            <img src="@/images/openhab-logo-white.svg" type="image/svg+xml" width="196px">
           </div>
         </f7-link>
         <f7-link href="/" class="logo no-ripple" panel-close v-else>
           <div class="logo-inner">
-            <img src="@/images/openhab-logo.png" width="100%">
+            <img src="@/images/openhab-logo.svg" type="image/svg+xml" width="196px">
           </div>
         </f7-link>
+        </f7-link>
         <f7-list v-if="ready">
           <f7-list-item v-if="$store.getters.apiEndpoint('ui') && (!pages || !pages.length)">
             <span><em>{{ $t('sidebar.noPages') }}</em></span>
@@ -129,7 +130,7 @@
   <!-- <f7-login-screen id="my-login-screen" :opened="loginScreenOpened">
     <f7-view name="login" v-if="$device.cordova">
       <f7-page login-screen>
-        <f7-login-screen-title><img width="200px" src="res/img/openhab-logo.png"><br>Login</f7-login-screen-title>
+        <f7-login-screen-title><img src="@/images/openhab-logo.svg" type="image/svg+xml" width="200px"><br>Login</f7-login-screen-title>
         <f7-list form>
           <f7-list-input
             type="text"

bundles/org.openhab.ui/web/src/index.html

@@ -22,6 +22,7 @@
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <link rel="apple-touch-icon" href="/res/icons/apple-touch-icon.png" crossorigin="use-credentials">
+  <link rel="icon" href="/res/icons/favicon.svg" type="image/svg+xml" crossorigin="use-credentials">
   <link rel="icon" href="/res/icons/favicon.png" crossorigin="use-credentials">
   <link rel="manifest" href="/manifest.json" crossorigin="use-credentials">
   <% } %>

bundles/org.openhab.ui/web/src/pages/about.vue

@@ -6,7 +6,7 @@
         <f7-col>
           <!-- <f7-block-title>About openHAB</f7-block-title> -->
           <f7-block>
-            <img src="/res/icons/128x128.png" width="96" class="padding float-right">
+            <img src="../res/icons/favicon.svg" type="image/svg+xml" width="96" class="padding float-right">
             <h2 v-if="$store.state.runtimeInfo" class="block-title-medium">
               openHAB {{ $store.state.runtimeInfo.version }}<br><small>{{ $store.state.runtimeInfo.buildString }}</small>
             </h2>

bundles/org.openhab.ui/web/src/pages/wizards/setup-wizard.vue

@@ -3,7 +3,7 @@
     <f7-tabs animated>
       <f7-tab id="intro" ref="intro" tab-active>
         <f7-login-screen-title>
-          <img class="intro-logo" src="@/images/openhab-logo.png">
+          <img class="intro-logo" src="@/images/openhab-logo.svg" type="image/svg+xml">
         </f7-login-screen-title>
         <f7-list form style="margin-top: 4rem" v-if="i18nReady">
           <f7-list-item

bundles/org.openhab.ui/web/src/res/icons/favicon.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+	<circle cx="20" cy="20" r="20" fill="#fff"/>
+	<path fill="#e64a19" d="M3.416 27.913l14.476-14.487L20 11.318l2.108 2.108 10.686 10.686-.016.054-.21.62-.24.607-.269.591-.296.577-.269.468L20 15.534 4.954 30.592c-.58-.853-1.117-1.732-1.538-2.68z"/>
+	<path fill="#474747" d="M20 1.502c10.189 0 18.498 8.31 18.498 18.498S30.19 38.498 20 38.498c-5.565 0-10.569-2.481-13.964-6.392l.653-.656.475-.475.475-.476.476-.475.02-.02c2.852 3.378 7.114 5.53 11.865 5.53 8.556 0 15.535-6.977 15.535-15.534S28.556 4.465 20 4.465C11.443 4.465 4.465 11.443 4.465 20c0 1.152.128 2.275.368 3.358l-1.03 1.033-1.376 1.376A18.378 18.378 0 011.502 20C1.502 9.811 9.81 1.502 20 1.502z"/>
+</svg>

logo.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37 37">
+	<path fill="#e64a19" d="M1.916 26.413l14.476-14.487L18.5 9.818l2.108 2.108 10.686 10.686-.016.054-.21.62-.24.607-.269.591-.296.577-.269.468L18.5 14.034 3.454 29.092c-.58-.853-1.117-1.732-1.538-2.68z"/>
+	<path fill="#474747" d="M18.5.002c10.189 0 18.498 8.31 18.498 18.498S28.69 36.998 18.5 36.998c-5.565 0-10.569-2.481-13.964-6.392l.653-.656.475-.475.475-.476.476-.475.02-.02c2.852 3.378 7.114 5.53 11.865 5.53 8.556 0 15.535-6.977 15.535-15.534S27.056 2.965 18.5 2.965C9.943 2.965 2.965 9.943 2.965 18.5c0 1.152.128 2.275.368 3.358l-1.03 1.033-1.376 1.376A18.378 18.378 0 01.002 18.5C.002 8.311 8.31.002 18.5.002z"/>
+</svg>