Refactor social media icon handling in components

Author: bryantgillespie

components/Nav/Footer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Query } from '@directus/sdk';
 import type { Navigation, Schema } from '~/types/schema';
-import { dynamicAsset } from '~/utils/dynamicAsset';
+import { getSocialIcon } from '~/utils/social';
 
 const { $directus, $readItem, $readSingleton } = useNuxtApp();
 
@@ -89,7 +89,7 @@ const socials = {
 				<ul class="socials">
 					<li v-for="[service, link] in Object.entries(socials)" :key="service">
 						<NuxtLink :href="link">
-							<img :src="dynamicAsset(`/svg/social/${service}.svg`)" :alt="service" loading="lazy" />
+							<Icon :name="getSocialIcon(service)" class="icon" />
 						</NuxtLink>
 					</li>
 				</ul>
@@ -261,14 +261,15 @@ const socials = {
 			align-items: center;
 			justify-content: space-between;
 
-			img {
-				width: var(--space-5);
-				height: auto;
+			.icon {
+				width: var(--space-6);
+				height: var(--space-6);
 				filter: brightness(1);
 				transition: filter var(--duration-150) var(--ease-out);
 
 				@media (width > 35rem) {
-					width: var(--space-6);
+					width: var(--space-8);
+					height: var(--space-8);
 				}
 
 				&:hover {

components/Tv/TVByline.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { dynamicAsset } from '~/utils/dynamicAsset';
+import { getSocialIcon } from '~/utils/social';
 
 interface BaseBylineProps {
 	name?: string;
@@ -34,7 +34,7 @@ defineProps<BaseBylineProps>();
 			<div v-if="links" class="share-icons">
 				<template v-for="{ service, url } in links" :key="service">
 					<NuxtLink :href="url" target="_blank">
-						<img :src="dynamicAsset(`/svg/social/${service}.svg`)" :alt="service" />
+						<Icon :name="getSocialIcon(service)" class="icon" />
 					</NuxtLink>
 				</template>
 			</div>
@@ -83,10 +83,10 @@ defineProps<BaseBylineProps>();
 		align-items: center;
 		gap: var(--space-5);
 
-		img {
+		.icon {
 			margin-block-start: var(--space-1);
 			width: var(--space-6);
-			height: auto;
+			height: var(--space-6);
 			filter: brightness(1);
 			transition: filter var(--duration-150) var(--ease-out);
 

pages/creators/[slug].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Creator } from '~/types/schema';
-import { dynamicAsset } from '~/utils/dynamicAsset';
 import { userName } from '~/utils/userName';
+import { getSocialIcon } from '~/utils/social';
 
 const { params } = useRoute();
 
@@ -118,7 +118,7 @@ definePageMeta({
 								<div class="share-icons">
 									<template v-for="{ services, url } in creator?.links" :key="services">
 										<NuxtLink :href="url" target="_blank">
-											<img :src="dynamicAsset(`/svg/social/${services}.svg`)" :alt="services" />
+											<Icon :name="getSocialIcon(services)" class="icon" />
 										</NuxtLink>
 									</template>
 								</div>
@@ -226,9 +226,9 @@ definePageMeta({
 
 	margin-block-start: var(--space-4);
 
-	img {
+	.icon {
 		width: var(--space-7);
-		height: auto;
+		height: var(--space-7);
 		filter: brightness(1);
 		transition: filter var(--duration-150) var(--ease-out);
 

pages/team/[slug].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { dynamicAsset } from '~/utils/dynamicAsset';
+import { getSocialIcon } from '~/utils/social';
 
 const { params } = useRoute();
 
@@ -147,7 +147,7 @@ definePageMeta({
 						<div class="share-icons">
 							<template v-for="{ services, url } in person?.links" :key="services">
 								<NuxtLink :href="url" target="_blank">
-									<img :src="dynamicAsset(`/svg/social/${services}.svg`)" :alt="services" />
+									<Icon :name="getSocialIcon(services)" class="icon" />
 								</NuxtLink>
 							</template>
 						</div>
@@ -265,9 +265,9 @@ definePageMeta({
 				align-items: center;
 				gap: var(--space-5);
 
-				img {
+				.icon {
 					width: var(--space-7);
-					height: auto;
+					height: var(--space-7);
 					filter: brightness(1);
 					transition: filter var(--duration-150) var(--ease-out);