Add a customizable logo to QR (#1955)

* add QR_LOGO variable
* add logo to images folder
* css for overlaying logo on qr
* qr url on settings
* add qr url to global env
* add QR url input on theme tab in adminUI
* new component added
* use svg
* remove white border around logo in the QR

---------

Co-authored-by: Pavol Rusnak <pavol@rusnak.io>
Co-authored-by: dni ⚡ <office@dnilabs.com>

lnbits/static/js/components.js

@@ -356,6 +356,24 @@ Vue.component('lnbits-lnurlpay-success-action', {
   }
 })
 
+Vue.component('lnbits-qrcode', {
+  mixins: [windowMixin],
+  props: ['value'],
+  components: {[VueQrcode.name]: VueQrcode},
+  data() {
+    return {
+      logo: LNBITS_QR_LOGO
+    }
+  },
+  template: `
+  <div class="qrcode__wrapper">
+    <qrcode :value="value"
+    :options="{errorCorrectionLevel: 'Q'}" class="rounded-borders"></qrcode>    
+    <img class="qrcode__image" :src="logo" alt="..." />    
+  </div>
+  `
+})
+
 Vue.component('lnbits-notifications-btn', {
   mixins: [windowMixin],
   props: ['pubkey'],