Allow icons with unquoted/single-quoted ids in the styleguide

docs/advanced_topics/icons.md

@@ -30,7 +30,7 @@ Draw or download an icon and save it in a template folder:
 
 The `svg` tag should:
 
--   Set the `id="icon-<name>"` attribute, icons are referenced by this name.
+-   Set the `id="icon-<name>"` attribute, icons are referenced by this `name`. The `name` should only contain lowercase letters, numbers, and hyphens.
 -   Set the `xmlns="http://www.w3.org/2000/svg"` attribute.
 -   Set the `viewBox="..."` attribute, and no `width` and `height` attributes.
 -   If the icon should be mirrored in right-to-left (RTL) languages, set the `class="icon--directional"` attribute.

wagtail/contrib/styleguide/tests.py

@@ -21,3 +21,47 @@ def test_styleguide(self):
         self.assertContains(response, custom_css)
         self.assertContains(response, widget_css)
         self.assertContains(response, widget_js)
+
+    def test_icons(self):
+        def register_icons(icons):
+            return icons + [
+                "tests/icons/no-quotes.svg",  # id=icon-no-quotes
+                "tests/icons/single-quotes.svg",  # id='icon-single-quotes'
+            ]
+
+        with self.register_hook("register_icons", register_icons):
+            response = self.client.get(reverse("wagtailstyleguide"))
+
+        self.assertEqual(response.status_code, 200)
+        # Should render the icons in the table
+        self.assertContains(
+            response,
+            '<use href="#icon-no-quotes"></use>',
+            html=True,
+        )
+        self.assertContains(
+            response,
+            "<td>Custom icon with no quotes for the id</td>",
+            html=True,
+        )
+        self.assertContains(
+            response,
+            '<use href="#icon-single-quotes"></use>',
+            html=True,
+        )
+        self.assertContains(
+            response,
+            "<td>Custom icon with single quotes for the id</td>",
+            html=True,
+        )
+        # Built-in icon, not from the above hook
+        self.assertContains(
+            response,
+            '<use href="#icon-h1"></use>',
+            html=True,
+        )
+        self.assertContains(
+            response,
+            "<td>Custom icon</td>",
+            html=True,
+        )

wagtail/contrib/styleguide/views.py

@@ -101,7 +101,10 @@ def media(self):
         )
 
 
-icon_id_pattern = re.compile(r"id=\"icon-([a-z0-9-]+)\"")
+# Allow no quotes, single quotes, and double quotes for the ID.
+# For simplicity and readability, we don't enforce the opening
+# and closing quotes to match.
+icon_id_pattern = re.compile(r"""id=["']?icon-([a-z0-9-]+)["']?""")
 icon_comment_pattern = re.compile(r"<!--!(.*?)-->")