Let Vite add inline SVGs to compiled stylesheets

bradshawsguide · Dec 1, 2023 · 296a323 · 296a323
1 parent e61461d
commit 296a323
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/public/assets/styles/scopes/branch.css b/public/assets/styles/scopes/branch.css
@@ -13,7 +13,7 @@
 
   /* Spur */
   &::before {
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='40'><path fill='none' stroke='%23e8e5e3' stroke-width='0.25rem' d='M2 0s0 13 10 20a23 23 0 0 1 10 20'/></svg>");
+    background-image: url("/assets/vectors/branch.svg");
     block-size: 40px;
     inline-size: 24px;
     inset-block-start: -40px;

diff --git a/public/assets/styles/scopes/distances.css b/public/assets/styles/scopes/distances.css
@@ -66,6 +66,7 @@
 
     & span {
       background-color: var(--color-neutral-lightest);
+      background-image: url("/assets/vectors/page.svg");
       padding-inline-end: var(--space-2xs);
       position: relative;
       z-index: var(--z-index-default);
@@ -79,7 +80,7 @@
       position: relative;
 
       &::after {
-        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1.5' viewBox='0 0 4 2'><circle cx='1' cy='1' r='1'/></svg>");
+        background-image: url("/assets/vectors/point.svg");
         background-position: bottom right;
         background-repeat: repeat-x;
         block-size: var(--line-size-thick);

diff --git a/public/assets/vectors/branch.svg b/public/assets/vectors/branch.svg
diff --git a/public/assets/vectors/point.svg b/public/assets/vectors/point.svg