Add icons loading and demo to Storybook

client/storybook/preview-body.html

@@ -0,0 +1,7 @@
+<div data-sprite></div>
+<script>
+    // Load icon sprite into the DOM, just like in the Wagtail admin.
+    window.fetch('/pattern-library/api/v1/sprite')
+        .then((res) => res.text())
+        .then((html) => document.querySelector('[data-sprite]').innerHTML = html);
+</script>

client/storybook/preview.scss

@@ -1,7 +1,10 @@
 @import '../scss/settings';
 @import '../scss/tools';
 
-// Fix compatibility issue with Wagtail’s headings.
+body {
+  font-size: 1rem;
+}
+
 h1,
 h2 {
   text-transform: initial;
@@ -12,3 +15,7 @@ h2 {
 .sbdocs .tag::before {
   all: revert;
 }
+
+.icon {
+  @include svg-icon(1.5em);
+}

wagtail/admin/templates/wagtailadmin/shared/icons.stories.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import { renderPattern } from 'storybook-django';
+
+const fetchIconTemplate = () =>
+  renderPattern(
+    window.PATTERN_LIBRARY_API,
+    'wagtailadmin/shared/icon.html',
+    {
+      name: '__icon__',
+    },
+    {},
+  ).then((res) => res.text());
+
+/**
+ * Displays all icons within our sprite.
+ */
+const Icons = () => {
+  const [template, setTemplate] = useState<string>('');
+  const [icons, setIcons] = useState<string[]>([]);
+
+  useEffect(() => {
+    const sprite = document.querySelector('[data-sprite]');
+    if (sprite) {
+      const symbols = Array.from(sprite.querySelectorAll('symbol'));
+      setIcons(symbols.map((s) => s.id.replace('icon-', '')));
+    }
+
+    fetchIconTemplate().then((html) => setTemplate(html));
+  }, []);
+
+  return (
+    <ul>
+      {icons.map((icon) => (
+        <li key={icon}>
+          <span
+            dangerouslySetInnerHTML={{
+              __html: template.replace(/__icon__/g, icon),
+            }}
+          />
+          <code>{`{% icon name="${icon}" %}`}</code>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default {
+  title: 'Shared / Icons',
+  component: Icons,
+};
+
+export const All = () => <Icons />;

wagtail/tests/urls.py

@@ -4,6 +4,7 @@ from django.http import HttpResponse
 from django.urls import include, path
 
 from wagtail.admin import urls as wagtailadmin_urls
+from wagtail.admin.views import home
 from wagtail.api.v2.router import WagtailAPIRouter
 from wagtail.api.v2.views import PagesAPIViewSet
 from wagtail.contrib.sitemaps import Sitemap
@@ -45,6 +46,11 @@ urlpatterns = [
 
 if apps.is_installed("pattern_library"):
     urlpatterns += [
+        path(
+            "pattern-library/api/v1/sprite",
+            home.sprite,
+            name="pattern_library_sprite",
+        ),
         path("pattern-library/", include("pattern_library.urls")),
     ]