Add the design foundation: self-hosted Nunito, type scale, new tokens and an Icon component

Elternbeirat.Web/Shared/Icon.razor.cs

@@ -0,0 +1,46 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Elternbeirat.Web.Shared;
+
+/// <summary>
+///     Renders a decorative line icon from <see cref="IconSet"/> as inline SVG.
+/// </summary>
+/// <remarks>
+///     Inline SVG, not an <c>&lt;img&gt;</c> or icon font: no extra request, nothing
+///     from a third-party host, and the icon follows the text colour (including dark
+///     mode) through <c>currentColor</c>. The icon is hidden from assistive technology,
+///     so it must never be the only carrier of meaning.
+/// </remarks>
+/// <example>
+///     <code>
+///         &lt;Icon Name="map-pin" /&gt; Aula
+///         &lt;Icon Name="calendar" Size="16" /&gt;
+///     </code>
+/// </example>
+/// <seealso cref="IconSet"/>
+public partial class Icon
+{
+    /// <summary>
+    ///     The inner SVG markup of the current icon, or <see langword="null"/> when the
+    ///     name is unknown and nothing should render.
+    /// </summary>
+    private MarkupString? _markup;
+
+    /// <summary>
+    ///     The icon name, e.g. <c>calendar</c>; see <see cref="IconSet"/> for the set.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public string Name { get; set; } = "";
+
+    /// <summary>
+    ///     Width and height in CSS pixels. Defaults to <c>20</c>, which sits well next
+    ///     to body text.
+    /// </summary>
+    [Parameter]
+    public int Size { get; set; } = 20;
+
+    /// <inheritdoc/>
+    protected override void OnParametersSet() =>
+        _markup = IconSet.Find(Name) is { } markup ? new MarkupString(markup) : null;
+}