add lbry icon in header

src/ui/component/common/icon-custom.jsx

@@ -1,6 +1,6 @@
 // @flow
 import * as ICONS from 'constants/icons';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 type IconProps = {
   size: number,
@@ -16,7 +16,7 @@ const buildIcon = iconStrokes => (props: IconProps) => {
       viewBox="0 0 24 24"
       width={size}
       height={size}
-      fill="none"
+      fill="solid"
       stroke={color}
       strokeWidth="2"
       strokeLinecap="round"
@@ -114,5 +114,16 @@ export const customIcons = {
   [ICONS.UNSUBSCRIBE]: buildIcon(
     <path d="M 12,5.67 10.94,4.61 C 5.7533356,-0.57666427 -2.0266644,7.2033357 3.16,12.39 l 1.06,1.06 7.78,7.78 7.78,-7.78 1.06,-1.06 c 2.149101,-2.148092 2.149101,-5.6319078 0,-7.78 -2.148092,-2.1491008 -5.631908,-2.1491008 -7.78,0 L 9.4481298,8.2303201 15.320603,9.2419066 11.772427,13.723825" />
   ),
-  [ICONS.LBRY]: <span>LBRY</span>, // Fix this
+  [ICONS.LBRY]: buildIcon(
+    <Fragment>
+      <path
+        transform="scale(0.15)"
+        d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z"
+      />
+      <path
+        transform="scale(0.15)"
+        d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z"
+      />
+    </Fragment>
+  ),
 };

src/ui/component/common/icon.jsx

@@ -46,7 +46,8 @@ class IconComponent extends React.PureComponent<Props> {
   render() {
     const { icon, tooltip, iconColor, size } = this.props;
     const Icon = customIcons[this.props.icon] || FeatherIcons[this.props.icon];
-
+    console.log('icon', icon);
+    console.log('Icon', Icon);
     if (!Icon) {
       return null;
     }

src/ui/component/header/view.jsx

@@ -77,7 +77,7 @@ const Header = (props: Props) => {
         {/* @if TARGET='web' */}
         <Button
           className="header__navigation-item header__navigation-item--lbry"
-          label={__('LBRY  (logo)')}
+          label={__('LBRY')}
           iconRight={ICONS.LBRY}
           navigate="/"
         />

src/ui/constants/icons.js

@@ -50,4 +50,4 @@ export const SECURE = 'Lock';
 export const MENU = 'Menu';
 export const BACKUP = 'Database';
 export const TRANSACTIONS = 'FileText';
-export const LBRY = '';
+export const LBRY = 'Lbry';

src/ui/scss/component/_header.scss

@@ -31,7 +31,7 @@
       width: 250px;
       /* @endif */
       /* @if TARGET='web' */
-      // width: 170px;
+      width: 170px;
       /* @endif */
     }
 
@@ -89,10 +89,13 @@
   flex: 1;
   font-weight: 800;
   font-size: 1.2rem;
-  padding-left: var(--spacing-vertical-large);
+  margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off
 
-  .button__content {
+  svg {
-    text-align: left;
+    overflow: visible;
+    color: $lbry-white;
+    opacity: 1;
+    top: -0.2rem;
   }
 }
 

src/ui/scss/init/_vars.scss

@@ -39,7 +39,7 @@ $large-breakpoint: 1921px;
   --button-height: 36px;
 
   // Header
-  --header-height: 3.25rem; // 60px;
+  --header-height: 3.5rem;
 
   // Header -> search
   --search-modal-input-height: 70px;