Adds hamburger icon to header and inlines SVGs.

Inlining SVGs is helpful for scaling them correctly. SVGs behave slightly differently when loaded via an `<img>` tag vs inlined in HTML (see https://css-tricks.com/scale-svg/). Inlining also makes things a little more performant by avoiding unnecessary network requests and reducing the change of CLS.

docs/components/header/BUILD.bazel

@@ -1,18 +1,18 @@
-load("//:index.bzl", "css_library", "prerender_component", "web_resources")
+load("//:index.bzl", "css_library", "prerender_component")
 load("//tools/jasmine:defs.bzl", "jasmine_node_test")
 load("//tools/typescript:defs.bzl", "ts_project")
 
 prerender_component(
     name = "header",
     prerender = ":prerender",
     styles = ":styles",
-    resources = ":resources",
     visibility = ["//docs/components/layout:__pkg__"],
 )
 
 ts_project(
     name = "prerender",
     srcs = ["header.tsx"],
+    data = ["hamburger.svg", "github_dark.svg", "github_light.svg"],
     deps = [
         "//:node_modules/@rules_prerender/preact",
         "//:node_modules/preact",
@@ -42,11 +42,3 @@ css_library(
     srcs = ["header.css"],
     deps = ["//docs:theme"],
 )
-
-web_resources(
-    name = "resources",
-    entries = {
-        "/resources/header/github-dark.svg": "github_dark.svg",
-        "/resources/header/github-light.svg": "github_light.svg",
-    },
-)

docs/components/header/LICENSE

@@ -0,0 +1,8 @@
+## Material Icons
+
+The [hamburger icon](./hamburger.svg) originated from Google Fonts
+([link](https://fonts.google.com/icons?selected=Material+Symbols+Outlined:menu:FILL@0;wght@400;GRAD@0;opsz@24)).
+It is property of Google and licensed as
+[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0.html).
+
+The icon was modified slightly to be more customizable via CSS.

docs/components/header/header.css

@@ -10,27 +10,40 @@
     --header-unpadded-height: calc(100% - 1rem /* padding */);
 }
 
-/* Matches `#github` sizing so the title is properly centered. */
-#left-spacer {
+.icon {
     height: var(--header-unpadded-height);
     padding: var(--header-padding);
     aspect-ratio: 1;
 }
 
-/* IFCHANGE: Also update `#left-spacer` sizing to match. */
+#hamburger {
+    /* Center the child SVG icon. */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#hamburger svg {
+    height: 100%;
+    aspect-ratio: 1;
+    fill: currentColor;
+}
+
 #github {
     align-self: flex-end;
-    height: var(--header-unpadded-height);
-    padding: var(--header-padding);
-    aspect-ratio: 1;
 }
-/* ENDIFCHANGE */
 
-#github img {
-    width: 100%;
+#github > * {
     height: 100%;
 }
 
+#github svg {
+    height: 100%;
+    aspect-ratio: 1;
+    fill: currentColor;
+    color: var(--light-text);
+}
+
 #title {
     flex-grow: 1;
     margin-block: 0;

docs/components/header/header.tsx

@@ -1,4 +1,4 @@
-import { inlineStyle, Template } from '@rules_prerender/preact';
+import { InlinedSvg, Template, inlineStyle } from '@rules_prerender/preact';
 import { VNode } from 'preact';
 
 /**
@@ -12,7 +12,12 @@ export function Header({ title }: { title?: string }): VNode {
         <Template shadowrootmode="open">
             {inlineStyle('./header.css', import.meta)}
 
-            <div id="left-spacer"></div>
+            <InlinedSvg
+                id="hamburger"
+                src="./hamburger.svg"
+                importMeta={import.meta}
+                class="icon"
+            />
 
             {/* Only render `<h1>` when there is a title. Rendering an empty
             `<h1>` is bad for a11y. */}
@@ -23,8 +28,9 @@ export function Header({ title }: { title?: string }): VNode {
             <a href="https://github.com/dgp1130/rules_prerender/"
                 rel="noopener"
                 id="github"
-                target="_blank">
-                <img src="/resources/header/github-dark.svg" />
+                target="_blank"
+                class="icon">
+                <InlinedSvg src="./github_dark.svg" importMeta={import.meta} />
             </a>
         </Template>
     </header>;

docs/components/header/header_test.tsx

@@ -12,6 +12,10 @@ describe('header', () => {
             expect(title).not.toBeNull();
             expect(title!.textContent).toBe('Hello!');
 
+            // Renders the hamburger icon.
+            const hamburger = fragment.querySelector('#hamburger svg');
+            expect(hamburger).not.toBeNull();
+
             // Renders the GitHub link.
             const githubLink = fragment.querySelector('#github');
             expect(githubLink).not.toBeNull();