RC-105 | Add an rc-svg component for ease of SVG-loading, and add the hero silhouette to the sheet

templates/Apps/HeroSummaryCardV1/content.hbs

@@ -23,6 +23,14 @@
 			{{ rc-i18n "RipCrypt.common.armour" }}
 		</div>
 		<div class="person">
+			<rc-svg
+				var:fill="var(--section-header-background)"
+				var:stroke="var(--base-background)"
+				var:stroke-width="2"
+				var:stroke-linejoin="rounded"
+				class="silhouette"
+				name="hero-silhouette"
+			></rc-svg>
 			<div class="head">
 				<div class="compass small">0</div>
 				<span class="label">{{ rc-i18n "RipCrypt.common.anatomy.head" }}</span>

templates/Apps/HeroSummaryCardV1/style.css

@@ -145,6 +145,7 @@
 		border-radius: 50%;
 		font-size: 1.5rem;
 		position: relative;
+		background: var(--base-background);
 
 		> .value {
 			background: none;
@@ -162,8 +163,8 @@
 		}
 
 		&.small {
-			--size: 30px;
-			font-size: 1.15rem;
+			--size: 35px;
+			font-size: 1.1rem;
 		}
 
 		&.dual {
@@ -216,12 +217,21 @@
 			grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
 			justify-items: center;
 			align-items: center;
+			position: relative;
 
 			> div {
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				align-items: center;
+				z-index: 1;
+			}
+
+			> rc-svg {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 58%;
 			}
 		}
 

templates/css/components/svg-loader.css

@@ -0,0 +1,22 @@
+:host {
+	display: inline-block;
+}
+
+div {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+svg {
+	fill: var(--fill);
+	stroke: var(--stroke);
+}
+
+path {
+	stroke: var(--stroke);
+	stroke-width: var(--stroke-width);
+	stroke-linejoin: var(--stroke-linejoin);
+}