using <wa-icon> for icon-only logos

Author: talbs

packages/webawesome/docs/_includes/base.njk

@@ -88,7 +88,9 @@
     {% if hasSidebar %}
     <div class="wa-mobile-only" slot="navigation-header">
       <div class="wa-cluster wa-gap-s">
-        <a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
+        <a href="/" class="logo-app" aria-label="Web Awesome">
+          <wa-icon name="web-awesome" family="brands"></wa-icon>
+        </a>
         <div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
           {% include "theme-selector.njk" %}
           {% include "color-scheme-selector.njk" %}

packages/webawesome/docs/_includes/logo-simple.njk

@@ -532,7 +532,7 @@
 
 <div class="wa-stack wa-gap-xl" id="colophon">
   <div class="wa-stack wa-gap-xs">
-    {% include "logo-simple.njk" %}
+    <wa-icon name="web-awesome" family="brands" class="logo-app"></wa-icon>
     <h2 class="wa-heading-s">Web Awesome</h2>
     <p class="wa-caption-xs wa-cluster wa-gap-xs">
       Version {{ package.version }}

packages/webawesome/docs/_includes/logo.njk

@@ -22,7 +22,7 @@
   }
 
   /* #region brand utilities */
-  .logo-webawesome {
+  .logo-app {
     color: var(--wa-brand-orange);
   }
   /* #endregion */

packages/webawesome/docs/_includes/sidebar.njk

@@ -64,11 +64,9 @@ layout: page
     & .emphasis::after {
       background-color: var(--wa-brand-grey);
     }
-    & .wa-crown svg {
-      width: 4rem;
-      & path {
-        fill: white;
-      }
+
+    .logo-app {
+      color: var(--wa-color-brand-on-loud)
     }
   }
   .hero-cta {
@@ -162,6 +160,7 @@ layout: page
     flex-direction: column;
     gap: 1rem;
     font-size: 0.875rem;
+
     & .wa-crown svg {
       width: 2rem;
     }
@@ -229,9 +228,7 @@ layout: page
 
 <div class="hero-background">
   <div class="hero-content">
-    <div class="wa-crown">
-      {% include "logo-simple.njk" %}
-    </div>
+    <wa-icon name="web-awesome" family="brands" class="logo-app wa-heading-4xl"></wa-icon>
     <h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
     <div class="hero-cta">
       {%- raw -%}
@@ -397,9 +394,7 @@ layout: page
 <wa-divider></wa-divider>
 
   <footer>
-    <div class="wa-crown">
-      {% include "logo-simple.njk" %}
-    </div>
+    <wa-icon name="web-awesome" family="brands" class="logo-app wa-body-l"></wa-icon>
     <div class="split-block">
       <div>
         <strong class="brand-font tagline">Let's Make Something Awesome</strong>