Added SVG icon to button

package.json

@@ -4,7 +4,7 @@
   "license": "GPL-3.0",
   "scripts": {
     "build:assets": "cpx \"src/**/*.{json,png}\" dist/",
-    "watch:assets": "cpx --watch -v \"src/**/*.{json,png}\" dist/",
+    "watch:assets": "cpx --watch -v \"src/**/*.{json,png,svg}\" dist/",
     "build:parcel": "cross-env NODE_ENV=production parcel build --no-source-maps --no-minify \"src/scripts/*.{js,ts}\" \"src/**/*.html\"",
     "watch:parcel": "parcel watch --no-hmr --no-source-maps \"src/scripts/*.{js,jsx,ts,tsx}\" \"src/**/*.html\"",
     "build": "npm-run-all -l -p build:parcel build:assets",

src/icons/lbry-logo.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="80.207558mm"
+   height="58.081333mm"
+   viewBox="0 0 284.20001 205.8"
+   id="svg3479"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="lbry-white-logo-only.svg">
+  <defs
+     id="defs3481" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="-470.0429"
+     inkscape:cy="-5.6714247"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="0"
+     inkscape:window-y="24"
+     inkscape:window-maximized="1"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata3484">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-363.61433,-320.89078)">
+    <g
+       id="g3396"
+       transform="translate(363.61433,320.89078)">
+      <g
+         id="g3398">
+        <polygon
+           style="fill:#ffffff"
+           points="138.8,155.2 271,74 271,68.2 146.2,8 7,94.1 7,132.6 138.8,197.8 276.4,113.4 280.3,119.4 139.2,205.8 0,137 0,90.2 145.8,0 278,63.8 278,77.9 139.2,163.2 34.6,111.9 34.8,104 "
+           id="polygon3400" />
+      </g>
+      <g
+         id="g3402">
+        <polygon
+           style="fill:#ffffff"
+           points="276.5,128.5 278.5,115.9 266.3,113.8 267.1,108.9 284.2,111.8 281.4,129.3 "
+           id="polygon3404" />
+      </g>
+    </g>
+  </g>
+</svg>

src/manifest.json

@@ -33,7 +33,8 @@
   },
   "web_accessible_resources": [
     "popup.html",
-    "tools/YTtoLBRY.html"
+    "tools/YTtoLBRY.html",
+    "icons/lbry-logo.svg"
   ],
   "icons": {
     "16": "icons/icon16.png",

src/scripts/ytContent.tsx

@@ -65,7 +65,12 @@ async function findMountPoint(): Promise<HTMLDivElement | void> {
 function WatchOnLbryButton({ url }: { url?: string }) {
   if (!url) return null;
   return <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
-    <a href={url} onClick={pauseVideo} role='button' children='Watch on Lbry'
+    <a href={url} onClick={pauseVideo} role='button'
+      children={<div>
+        <img src={chrome.runtime.getURL('icons/lbry-logo.svg')} height={10} width={14}
+          style={{ marginRight: 12, transform: 'scale(1.75)' }} />
+        Watch on LBRY
+        </div>}
       style={{
         borderRadius: '2px',
         backgroundColor: '#075656',