Re-implement styleguide icons list as an auto-generated sequence of tables

wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss

@@ -15,33 +15,6 @@ section {
   }
 }
 
-.icons {
-  :before,
-  :after {
-    font-size: 2em;
-  }
-
-  .icon {
-    @include svg-icon(1.5em);
-  }
-
-  ul {
-    column-count: 3;
-  }
-
-  li {
-    margin-bottom: 1em;
-  }
-
-  .spinner {
-    position: relative;
-  }
-
-  // .spinner .icon-spinner:after {
-  //     position: absolute;
-  // }
-}
-
 .timepicker {
   height: 150px;
 }

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -635,114 +635,40 @@
         </section>
 
         <section id="icons" class="icons">
-            <h2>SVG Icons</h2>
-
-            <style>
-                .spinning {
-                    animation-name: spin-wag;
-                    animation-duration: 500ms;
-                    animation-iteration-count: infinite;
-                    animation-timing-function: linear;
-                }
-            </style>
-
-            <ul class="w-list-none">
-                <li>{% icon 'wagtail-icon' %} wagtail</li>
-                <li>{% icon 'wagtail-inverse' %} wagtail-inverse</li>
-                <li>{% icon 'cogs' %} cogs</li>
-                <li>{% icon 'doc-empty-inverse' %} doc-empty-inverse</li>
-                <li>{% icon 'doc-empty' %} doc-empty</li>
-                <li>{% icon 'edit' %} edit</li>
-                <li>{% icon 'arrow-up' %} arrow-up</li>
-                <li>{% icon 'arrow-down' %} arrow-down</li>
-                <li>{% icon 'search' %} search</li>
-                <li>{% icon 'cross' %} cross</li>
-                <li>{% icon 'folder-open-1' %} folder-open-1</li>
-                <li>{% icon 'folder-inverse' %} folder-inverse</li>
-                <li>{% icon 'mail' %} mail</li>
-                <li>{% icon 'arrows-up-down' %} arrows-up-down</li>
-                <li>{% icon 'lock' %} lock (locked)</li>
-                <li>{% icon 'lock-open' %} lock-open (unlocked)</li>
-                <li>{% icon 'arrow-right' %} arrow-right</li>
-                <li>{% icon 'doc-full' %} doc-full / file-text-alt</li>
-                <li>{% icon 'image' %} image / picture</li>
-                <li>{% icon 'doc-full-inverse' %} doc-full-inverse</li>
-                <li>{% icon 'draft' %} draft</li>
-                <li>{% icon 'folder' %} folder</li>
-                <li>{% icon 'plus' %} plus</li>
-                <li>{% icon 'tag' %} tag</li>
-                <li>{% icon 'folder-open-inverse' %} folder-open-inverse</li>
-                <li>{% icon 'clipboard-list' %} clipboard-list</li>
-                <li>{% icon 'tasks' %} tasks</li>
-                <li>{% icon 'cog' %} cog</li>
-                <li>{% icon 'tick' %} tick</li>
-                <li>{% icon 'user' %} user</li>
-                <li>{% icon 'arrow-left' %} arrow-left</li>
-                <li>{% icon 'tick-inverse' %} tick-inverse</li>
-                <li>{% icon 'plus-inverse' %} plus-inverse</li>
-                <li>{% icon 'snippet' %} snippet</li>
-                <li>{% icon 'bold' %} bold</li>
-                <li>{% icon 'italic' %} italic</li>
-                <li>{% icon 'undo' %} undo</li>
-                <li>{% icon 'history' %} history</li>
-                <li>{% icon 'repeat' %} repeat</li>
-                <li>{% icon 'list-ol' %} list-ol</li>
-                <li>{% icon 'list-ul' %} list-ul</li>
-                <li>{% icon 'link' %} link</li>
-                <li>{% icon 'link-external' %} link-external</li>
-                <li>{% icon 'superscript' %} superscript</li>
-                <li>{% icon 'subscript' %} subscript</li>
-                <li>{% icon 'strikethrough' %} strikethrough</li>
-                <li>{% icon 'radio-full' %} radio-full</li>
-                <li>{% icon 'radio-empty' %} radio-empty</li>
-                <li>{% icon 'arrow-up-big' %} arrow-up-big</li>
-                <li>{% icon 'arrow-down-big' %} arrow-down-big</li>
-                <li>{% icon 'group' %} group</li>
-                <li>{% icon 'media' %} media</li>
-                <li>{% icon 'horizontalrule' %} horizontalrule</li>
-                <li>{% icon 'password' %} password</li>
-                <li>{% icon 'download' %} download</li>
-                <li>{% icon 'duplicate' %} duplicate</li>
-                <li>{% icon 'download-alt' %} download-alt</li>
-                <li>{% icon 'upload' %} upload</li>
-                <li>{% icon 'order' %} order</li>
-                <li>{% icon 'grip' %} grip</li>
-                <li>{% icon 'home' %} home</li>
-                <li>{% icon 'order-down' %} order-down</li>
-                <li>{% icon 'order-up' %} order-up</li>
-                <li>{% icon 'bin' %} bin</li>
-
-                <li>{% icon 'spinner' 'icon spinning' %} spinner</li>
-
-                <li>{% icon 'pick' %} pick</li>
-                <li>{% icon 'redirect' %} redirect</li>
-                <li>{% icon 'view' %} view</li>
-                <li>{% icon 'no-view' %} no-view</li>
-                <li>{% icon 'collapse-up' %} collapse-up</li>
-                <li>{% icon 'collapse-down' %} collapse-down</li>
-                <li>{% icon 'comment' %} comment</li>
-                <li>{% icon 'help' %} help</li>
-                <li>{% icon 'warning' %} warning</li>
-                <li>{% icon 'error' %} error</li>
-                <li>{% icon 'success' %} success</li>
-                <li>{% icon 'date' %} date</li>
-                <li>{% icon 'time' %} time</li>
-                <li>{% icon 'form' %} form</li>
-                <li>{% icon 'site' %} site</li>
-                <li>{% icon 'placeholder' %} placeholder</li>
-                <li>{% icon 'pilcrow' %} pilcrow</li>
-                <li>{% icon 'title' %} title</li>
-                <li>{% icon 'code' %} code</li>
-                <li>{% icon 'openquote' %} openquote</li>
-                <li>{% icon 'chain-broken' %} chain-broken</li>
-                <li>{% icon 'table' %} table</li>
-                <li>{% icon 'login' %} login</li>
-                <li>{% icon 'logout' %} logout</li>
-
-                <li>{% icon 'thumbtack' %} thumbtack</li>
-                <li>{% icon 'resubmit' %} resubmit</li>
-                <li>{% icon 'uni52' %} uni52</li>
-            </ul>
+            <h2>Icons</h2>
+
+            {% for source, icons in all_icons %}
+                {% if source == "wagtailadmin/icons" %}
+                    <!-- Copy this section to update the `icons.md` documentation (wagtail_icons.html file). -->
+                    {# Copy the markup with good line breaks to review icon update diffs in git. #}
+                    <!-- In DevTools: copy($$('[data-icons-table^="wagtailadmin"]')[0].innerHTML.replace(/\s+/g, ' ').replace(/<t>/g, '\n<t>')) -->
+                {% endif %}
+                <div class="w-mb-10" data-icons-table="{{ source }}">
+                    <!-- Auto-generated with Wagtail’s styleguide. -->
+                    <table class="w-w-full">
+                        <caption><code>register_icons</code> entries from <code>{{ source }}</code></caption>
+                        <thead>
+                            <tr>
+                                <th scope="col">Visual</th>
+                                <th scope="col">Name</th>
+                                <th scope="col">File path</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for item in icons %}
+                                <tr>
+                                    {# Renders the icon’s SVG within a SVG element, #}
+                                    {# so we fully control the rendering without changing the icon’s markup. #}
+                                    {# Icons are loaded with render_to_string in Python, so need |safe. #}
+                                    <td><svg width="32" height="32" fill="currentColor">{{ item.icon|safe }}</svg></td>
+                                    <td><code>{{ item.id }}</code></td>
+                                    <td><code>{{ item.file_path }}</code></td>
+                                </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+            {% endfor %}
         </section>
     </div>
 

wagtail/contrib/styleguide/views.py

@@ -1,8 +1,15 @@
+import itertools
+import os
+import re
+from collections import defaultdict
+
 from django import forms
 from django.core.paginator import Paginator
+from django.template.loader import render_to_string
 from django.template.response import TemplateResponse
 from django.utils.translation import gettext as _
 
+from wagtail import hooks
 from wagtail.admin import messages
 from wagtail.admin.forms.search import SearchForm
 from wagtail.admin.rich_text import get_rich_text_editor_widget
@@ -84,6 +91,9 @@ class ExampleForm(forms.Form):
     snippet_chooser = forms.BooleanField(required=True)
 
 
+icon_id_pattern = re.compile(r"id=\"icon-([a-z0-9-]+)\"")
+
+
 def index(request):
 
     form = SearchForm(placeholder=_("Search something"))
@@ -109,10 +119,28 @@ def index(request):
     paginator = Paginator(list(range(100)), 10)
     page = paginator.page(2)
 
+    icon_hooks = hooks.get_hooks("register_icons")
+    registered_icons = itertools.chain.from_iterable(hook([]) for hook in icon_hooks)
+    all_icons = defaultdict(list)
+    for icon_path in registered_icons:
+        source, filename = os.path.split(icon_path)
+        icon = render_to_string(icon_path)
+        id_match = icon_id_pattern.search(icon)
+
+        all_icons[source].append(
+            {
+                "source": source,
+                "file_path": icon_path,
+                "id": id_match.group(1) if id_match else None,
+                "icon": icon,
+            }
+        )
+
     return TemplateResponse(
         request,
         "wagtailstyleguide/base.html",
         {
+            "all_icons": all_icons.items(),
             "search_form": form,
             "example_form": example_form,
             "example_page": page,