create-swift-rust 0.4.0 → 0.7.0

package/templates/default/src/app/dashboard/page.tsx

@@ -0,0 +1,181 @@
+import { formatNumber, formatPercent, relativeTime } from "@/lib/format";
+import { posts } from "@/lib/posts";
+import { stats, trafficMax, trafficSeries } from "@/lib/stats";
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+
+export const metadata: Metadata = { title: "Dashboard" };
+
+const ACTIVITY = [
+  {
+    who: "alex@swift-rust.dev",
+    what: "published",
+    target: "Streaming SSR in Rust",
+    when: "2026-06-01T08:32:00Z",
+  },
+  {
+    who: "maria@swift-rust.dev",
+    what: "updated",
+    target: "Geist font spec",
+    when: "2026-05-31T15:10:00Z",
+  },
+  {
+    who: "jordan@swift-rust.dev",
+    what: "deployed",
+    target: "v0.0.9-rc3",
+    when: "2026-05-31T09:45:00Z",
+  },
+  {
+    who: "priya@swift-rust.dev",
+    what: "merged",
+    target: "feat: edge streaming",
+    when: "2026-05-30T18:22:00Z",
+  },
+  {
+    who: "sam@swift-rust.dev",
+    what: "commented on",
+    target: "binary size regression",
+    when: "2026-05-30T11:08:00Z",
+  },
+];
+
+export default function DashboardOverviewPage() {
+  return (
+    <div className="px-6 py-10 sm:px-10">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            Overview
+          </p>
+          <h1 className="mt-1 text-3xl font-semibold tracking-tight">Welcome back, Alex</h1>
+          <p className="mt-1 text-[var(--color-fg-muted)]">
+            Here&apos;s what happened across your projects in the last 30 days.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Link href="/dashboard/posts/new" className="btn btn-outline btn-sm">
+            New post
+          </Link>
+          <Link href="/dashboard/settings" className="btn btn-primary btn-sm">
+            Settings
+          </Link>
+        </div>
+      </div>
+
+      <div className="mt-10 grid gap-px overflow-hidden rounded-2xl border border-[var(--color-border)] bg-[var(--color-border)] sm:grid-cols-2 lg:grid-cols-4">
+        {stats.map((s) => (
+          <div key={s.label} className="bg-[var(--color-surface)] p-6">
+            <p className="text-[0.8125rem] text-[var(--color-fg-muted)]">{s.label}</p>
+            <p className="mt-2 text-3xl font-semibold tracking-tight">{s.value}</p>
+            <div className="mt-3 flex items-center gap-2 text-[0.75rem]">
+              <span
+                className={`inline-flex items-center gap-0.5 font-medium ${
+                  s.delta >= 0 ? "text-[#16a34a]" : "text-[#dc2626]"
+                }`}
+              >
+                {s.delta >= 0 ? "↑" : "↓"} {formatPercent(Math.abs(s.delta))}
+              </span>
+              <span className="text-[var(--color-fg-subtle)]">{s.context}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6 grid gap-6 lg:grid-cols-[1.4fr_1fr]">
+        <div className="card p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-[0.95rem] font-semibold">Traffic</h2>
+              <p className="text-[0.8125rem] text-[var(--color-fg-muted)]">Last 7 days</p>
+            </div>
+            <div className="flex items-center gap-1 text-[0.75rem]">
+              <span className="badge badge-dot badge-success">Healthy</span>
+            </div>
+          </div>
+          <div className="mt-6 flex h-48 items-end gap-2">
+            {trafficSeries.map((d) => (
+              <div key={d.day} className="flex flex-1 flex-col items-center gap-2">
+                <div
+                  className="w-full rounded-t-md bg-[var(--color-accent)]/80 transition-colors hover:bg-[var(--color-accent)]"
+                  style={{ height: `${(d.requests / trafficMax) * 100}%` }}
+                  title={`${d.requests.toLocaleString()} requests`}
+                />
+                <span className="text-[0.7rem] font-medium text-[var(--color-fg-subtle)]">
+                  {d.day}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="mt-4 flex items-center justify-between border-t border-[var(--color-border)] pt-4 text-[0.8125rem]">
+            <span className="text-[var(--color-fg-muted)]">Total</span>
+            <span className="font-mono font-medium">
+              {formatNumber(trafficSeries.reduce((s, d) => s + d.requests, 0))}
+            </span>
+          </div>
+        </div>
+
+        <div className="card p-6">
+          <h2 className="text-[0.95rem] font-semibold">Recent activity</h2>
+          <ul className="mt-4 -mx-2 divide-y divide-[var(--color-border)]">
+            {ACTIVITY.map((a, i) => (
+              <li key={i} className="flex items-start gap-3 px-2 py-3">
+                <div className="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-[var(--color-accent)]" />
+                <div className="min-w-0 flex-1">
+                  <p className="text-[0.875rem] leading-snug text-[var(--color-fg)]">
+                    <span className="font-medium">{a.who}</span>{" "}
+                    <span className="text-[var(--color-fg-muted)]">{a.what}</span>{" "}
+                    <span className="font-medium">{a.target}</span>
+                  </p>
+                  <p className="mt-0.5 text-[0.75rem] text-[var(--color-fg-subtle)]">
+                    {relativeTime(a.when)}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+
+      <div className="mt-6 card p-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-[0.95rem] font-semibold">Latest posts</h2>
+          <Link
+            href="/dashboard/posts"
+            className="text-[0.8125rem] font-medium text-[var(--color-accent)] hover:text-[var(--color-accent-hover)]"
+          >
+            View all
+          </Link>
+        </div>
+        <table className="mt-4 w-full text-left text-[0.875rem]">
+          <thead>
+            <tr className="border-b border-[var(--color-border)] text-[0.7rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+              <th className="pb-2 font-semibold">Title</th>
+              <th className="pb-2 font-semibold">Author</th>
+              <th className="pb-2 font-semibold">Status</th>
+              <th className="pb-2 text-right font-semibold">Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {posts.slice(0, 4).map((p) => (
+              <tr key={p.slug} className="border-b border-[var(--color-border)] last:border-0">
+                <td className="py-3 pr-4">
+                  <Link
+                    href={`/blog/${p.slug}`}
+                    className="font-medium text-[var(--color-fg)] hover:text-[var(--color-accent)]"
+                  >
+                    {p.title}
+                  </Link>
+                </td>
+                <td className="py-3 pr-4 text-[var(--color-fg-muted)]">{p.author.name}</td>
+                <td className="py-3 pr-4">
+                  <span className="badge badge-success badge-dot">Published</span>
+                </td>
+                <td className="py-3 text-right text-[var(--color-fg-subtle)]">{p.date}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/dashboard/posts/[id]/not-found.tsx

@@ -0,0 +1,23 @@
+import { Link } from "swift-rust";
+
+export default function PostNotFound() {
+  return (
+    <div className="mx-auto max-w-md px-6 py-20 text-center sm:px-10">
+      <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+        404
+      </p>
+      <h1 className="mt-2 text-3xl font-semibold tracking-tight">Post not found</h1>
+      <p className="mt-3 text-[var(--color-fg-muted)]">
+        That post doesn&apos;t exist, was unpublished, or you don&apos;t have access.
+      </p>
+      <div className="mt-6 flex justify-center gap-2">
+        <Link href="/dashboard/posts" className="btn btn-primary btn-sm">
+          Back to posts
+        </Link>
+        <Link href="/dashboard" className="btn btn-outline btn-sm">
+          Dashboard
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/dashboard/posts/[id]/page.tsx

@@ -0,0 +1,87 @@
+import { formatDate } from "@/lib/format";
+import { getPost, posts } from "@/lib/posts";
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+import { notFound } from "swift-rust/router";
+
+export function generateStaticParams() {
+  return posts.map((p) => ({ id: p.slug }));
+}
+
+export function generateMetadata({ params }: { params: { id: string } }): Metadata {
+  const post = getPost(params.id);
+  if (!post) return { title: "Post not found" };
+  return { title: `Edit: ${post.title}` };
+}
+
+export default function DashboardPostPage({ params }: { params: { id: string } }) {
+  const post = getPost(params.id);
+  if (!post) notFound();
+
+  return (
+    <div className="mx-auto max-w-3xl px-6 py-10 sm:px-10">
+      <Link
+        href="/dashboard/posts"
+        className="inline-flex items-center gap-1.5 text-[0.875rem] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          className="h-3.5 w-3.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M19 12H5M11 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        All posts
+      </Link>
+
+      <div className="mt-8 flex items-start justify-between gap-4">
+        <div>
+          <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            Post
+          </p>
+          <h1 className="mt-1 text-3xl font-semibold tracking-tight">{post.title}</h1>
+          <p className="mt-2 text-[0.875rem] text-[var(--color-fg-muted)]">
+            By {post.author.name} · {formatDate(post.date)} · {post.readingTime}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="badge badge-success badge-dot">Published</span>
+          <Link href={`/blog/${post.slug}`} className="btn btn-outline btn-sm">
+            View live
+          </Link>
+        </div>
+      </div>
+
+      <div className="mt-8 card p-6">
+        <h2 className="text-[0.95rem] font-semibold">Excerpt</h2>
+        <p className="mt-2 text-[0.9375rem] leading-relaxed text-[var(--color-fg-muted)]">
+          {post.excerpt}
+        </p>
+      </div>
+
+      <div className="mt-6 card p-6">
+        <h2 className="text-[0.95rem] font-semibold">Tags</h2>
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {post.tags.map((t) => (
+            <span key={t} className="badge badge-accent">
+              {t}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-6 card p-6">
+        <h2 className="text-[0.95rem] font-semibold">Body preview</h2>
+        <div className="mt-3 max-h-72 overflow-y-auto text-[0.875rem] leading-relaxed text-[var(--color-fg-muted)]">
+          {post.body.split("\n\n").map((p, i) => (
+            <p key={i} className="mb-3">
+              {p}
+            </p>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/dashboard/posts/new/page.tsx

@@ -0,0 +1,103 @@
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+
+export const metadata: Metadata = { title: "New post" };
+
+export default function NewPostPage() {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-10 sm:px-10">
+      <Link
+        href="/dashboard/posts"
+        className="inline-flex items-center gap-1.5 text-[0.875rem] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+      >
+        <svg
+          viewBox="0 0 24 24"
+          className="h-3.5 w-3.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path d="M19 12H5M11 18l-6-6 6-6" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+        All posts
+      </Link>
+
+      <h1 className="mt-6 text-3xl font-semibold tracking-tight">New post</h1>
+      <p className="mt-1 text-[var(--color-fg-muted)]">
+        Compose a draft. Save without publishing, or hit publish when you&apos;re ready.
+      </p>
+
+      <form className="mt-8 space-y-6">
+        <div>
+          <label
+            htmlFor="title"
+            className="block text-[0.8125rem] font-medium text-[var(--color-fg)]"
+          >
+            Title
+          </label>
+          <input
+            id="title"
+            name="title"
+            type="text"
+            placeholder="A title for your post"
+            className="input mt-2"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="slug"
+            className="block text-[0.8125rem] font-medium text-[var(--color-fg)]"
+          >
+            Slug
+          </label>
+          <input
+            id="slug"
+            name="slug"
+            type="text"
+            placeholder="a-slug-for-your-post"
+            className="input mt-2 font-mono"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="excerpt"
+            className="block text-[0.8125rem] font-medium text-[var(--color-fg)]"
+          >
+            Excerpt
+          </label>
+          <textarea
+            id="excerpt"
+            name="excerpt"
+            placeholder="A short summary that shows up on the blog index."
+            className="textarea mt-2"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="body"
+            className="block text-[0.8125rem] font-medium text-[var(--color-fg)]"
+          >
+            Body
+          </label>
+          <textarea
+            id="body"
+            name="body"
+            placeholder="Write your post here. Markdown is supported."
+            className="textarea mt-2 min-h-[16rem] font-mono"
+          />
+        </div>
+        <div className="flex items-center justify-end gap-2 border-t border-[var(--color-border)] pt-6">
+          <Link href="/dashboard/posts" className="btn btn-outline">
+            Cancel
+          </Link>
+          <button type="button" className="btn btn-ghost">
+            Save draft
+          </button>
+          <button type="submit" className="btn btn-accent">
+            Publish
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/templates/default/src/app/dashboard/posts/page.tsx

@@ -0,0 +1,81 @@
+import { formatDate } from "@/lib/format";
+import { posts } from "@/lib/posts";
+import type { Metadata } from "swift-rust";
+import { Link } from "swift-rust";
+
+export const metadata: Metadata = { title: "Posts" };
+
+export default function PostsPage() {
+  return (
+    <div className="px-6 py-10 sm:px-10">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+            Dashboard
+          </p>
+          <h1 className="mt-1 text-3xl font-semibold tracking-tight">Posts</h1>
+          <p className="mt-1 text-[var(--color-fg-muted)]">{posts.length} total</p>
+        </div>
+        <Link href="/dashboard/posts/new" className="btn btn-primary btn-sm">
+          <svg
+            viewBox="0 0 24 24"
+            className="h-4 w-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path d="M12 5v14M5 12h14" strokeLinecap="round" />
+          </svg>
+          New post
+        </Link>
+      </div>
+
+      <div className="mt-8 card overflow-hidden">
+        <table className="w-full text-left text-[0.875rem]">
+          <thead>
+            <tr className="border-b border-[var(--color-border)] bg-[var(--color-surface-2)] text-[0.7rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+              <th className="px-5 py-3 font-semibold">Title</th>
+              <th className="px-5 py-3 font-semibold">Author</th>
+              <th className="px-5 py-3 font-semibold">Status</th>
+              <th className="px-5 py-3 font-semibold">Tags</th>
+              <th className="px-5 py-3 text-right font-semibold">Date</th>
+            </tr>
+          </thead>
+          <tbody>
+            {posts.map((p) => (
+              <tr
+                key={p.slug}
+                className="border-b border-[var(--color-border)] last:border-0 hover:bg-[var(--color-surface-2)]"
+              >
+                <td className="px-5 py-3.5">
+                  <Link
+                    href={`/dashboard/posts/${p.slug}`}
+                    className="font-medium text-[var(--color-fg)] hover:text-[var(--color-accent)]"
+                  >
+                    {p.title}
+                  </Link>
+                </td>
+                <td className="px-5 py-3.5 text-[var(--color-fg-muted)]">{p.author.name}</td>
+                <td className="px-5 py-3.5">
+                  <span className="badge badge-success badge-dot">Published</span>
+                </td>
+                <td className="px-5 py-3.5">
+                  <div className="flex flex-wrap gap-1">
+                    {p.tags.map((t) => (
+                      <span key={t} className="badge">
+                        {t}
+                      </span>
+                    ))}
+                  </div>
+                </td>
+                <td className="px-5 py-3.5 text-right text-[var(--color-fg-subtle)]">
+                  <time dateTime={p.date}>{formatDate(p.date)}</time>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/dashboard/settings/page.tsx

@@ -0,0 +1,119 @@
+import type { Metadata } from "swift-rust";
+
+export const metadata: Metadata = { title: "Settings" };
+
+export default function SettingsPage() {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-10 sm:px-10">
+      <p className="text-[0.75rem] font-semibold uppercase tracking-wider text-[var(--color-fg-subtle)]">
+        Dashboard
+      </p>
+      <h1 className="mt-1 text-3xl font-semibold tracking-tight">Settings</h1>
+      <p className="mt-1 text-[var(--color-fg-muted)]">Manage your project preferences.</p>
+
+      <div className="mt-10 space-y-10">
+        <section>
+          <h2 className="text-[0.95rem] font-semibold">Profile</h2>
+          <p className="mt-1 text-[0.875rem] text-[var(--color-fg-muted)]">
+            Information that shows up on posts you author.
+          </p>
+          <div className="mt-5 space-y-4">
+            <div>
+              <label htmlFor="name" className="block text-[0.8125rem] font-medium">
+                Name
+              </label>
+              <input id="name" type="text" defaultValue="Alex Chen" className="input mt-1.5" />
+            </div>
+            <div>
+              <label htmlFor="email" className="block text-[0.8125rem] font-medium">
+                Email
+              </label>
+              <input
+                id="email"
+                type="email"
+                defaultValue="alex@swift-rust.dev"
+                className="input mt-1.5"
+              />
+            </div>
+            <div>
+              <label htmlFor="bio" className="block text-[0.8125rem] font-medium">
+                Bio
+              </label>
+              <textarea
+                id="bio"
+                className="textarea mt-1.5"
+                defaultValue="Founding engineer at Swift Rust. Likes Rust, dislikes webpack."
+              />
+            </div>
+          </div>
+        </section>
+
+        <section className="border-t border-[var(--color-border)] pt-8">
+          <h2 className="text-[0.95rem] font-semibold">Rendering</h2>
+          <p className="mt-1 text-[0.875rem] text-[var(--color-fg-muted)]">
+            How the framework renders pages for this project.
+          </p>
+          <div className="mt-5 grid gap-2">
+            {[
+              {
+                id: "ssr-wasm",
+                label: "SSR + WASM",
+                hint: "Default. Server-rendered HTML, WASM-hydrated.",
+              },
+              { id: "ssr", label: "SSR only", hint: "No client JavaScript." },
+              { id: "ssr-htmx", label: "SSR + HTMX", hint: "Progressive enhancement." },
+              { id: "wasm", label: "Full WASM SPA", hint: "Single-page app in WebAssembly." },
+            ].map((opt, i) => (
+              <label
+                key={opt.id}
+                className="flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--color-border)] p-4 transition-colors hover:bg-[var(--color-surface-2)] has-[:checked]:border-[var(--color-accent)] has-[:checked]:bg-[var(--color-accent-soft)]"
+              >
+                <input
+                  type="radio"
+                  name="renderer"
+                  defaultChecked={i === 0}
+                  className="mt-1 h-4 w-4 cursor-pointer accent-[var(--color-accent)]"
+                />
+                <div>
+                  <p className="font-medium">{opt.label}</p>
+                  <p className="text-[0.8125rem] text-[var(--color-fg-muted)]">{opt.hint}</p>
+                </div>
+              </label>
+            ))}
+          </div>
+        </section>
+
+        <section className="border-t border-[var(--color-border)] pt-8">
+          <h2 className="text-[0.95rem] font-semibold">Danger zone</h2>
+          <p className="mt-1 text-[0.875rem] text-[var(--color-fg-muted)]">
+            Irreversible actions. Be sure before proceeding.
+          </p>
+          <div className="mt-5 flex items-center justify-between rounded-lg border border-[#fecaca] bg-[#fef2f2] p-4">
+            <div>
+              <p className="font-medium text-[#991b1b]">Delete project</p>
+              <p className="text-[0.8125rem] text-[#b91c1c]">
+                All posts, settings, and data will be permanently removed.
+              </p>
+            </div>
+            <button
+              type="button"
+              className="btn btn-sm"
+              style={{ background: "#dc2626", color: "white" }}
+            >
+              Delete
+            </button>
+          </div>
+        </section>
+
+        <div className="flex justify-end gap-2 border-t border-[var(--color-border)] pt-8">
+          <button type="button" className="btn btn-outline">
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-primary">
+            Save changes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/error.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { useEffect } from "react";
+import { Link } from "swift-rust";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="container-page py-24">
+      <div className="mx-auto max-w-xl text-center">
+        <span className="badge badge-dot" style={{ background: "#fef2f2", color: "#dc2626" }}>
+          Runtime error
+        </span>
+        <h1 className="mt-5 text-4xl font-semibold tracking-tight">Something went wrong.</h1>
+        <p className="mt-4 text-[var(--color-fg-muted)]">
+          We logged the error. You can try again, or head back to the homepage.
+        </p>
+        {error.digest ? (
+          <p className="mt-2 font-mono text-[0.75rem] text-[var(--color-fg-subtle)]">
+            digest: {error.digest}
+          </p>
+        ) : null}
+        <div className="mt-8 flex justify-center gap-2">
+          <button type="button" onClick={reset} className="btn btn-primary">
+            Try again
+          </button>
+          <Link href="/" className="btn btn-outline">
+            Home
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/default/src/app/favicon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#0a0a0a"/>
+  <g stroke="#ffffff" stroke-width="1.9" stroke-linecap="round" fill="none">
+    <circle cx="16" cy="16" r="6.4"/>
+    <path d="M16 4.4v2.6M16 25v2.6M4.4 16h2.6M25 16h2.6M7.9 7.9l1.8 1.8M22.3 22.3l1.8 1.8M7.9 24.1l1.8-1.8M22.3 9.7l1.8-1.8"/>
+  </g>
+  <path d="M17.8 9.3 L11.6 17 H15.2 L14.2 22.8 L20.4 15 H16.8 Z" fill="#fb923c"/>
+</svg>