traxxx/assets/components/actors/social.vue

<template>
	<div
		v-if="actor"
		class="social"
	>
		<a
			v-for="social in actor.social"
			:key="`social-${social.id}`"
			v-tooltip.bottom="social.url"
			:href="social.url"
			target="_blank"
			rel="noopener noreferrer"
			class="social-link"
		>
			<Icon
				v-if="social.platform"
				:icon="social.platform"
			/>

			<Icon
				v-else
				icon="link"
			/>
		</a>
	</div>
</template>

<script>
export default {
	props: {
		actor: {
			type: Object,
			default: null,
		},
	},
};
</script>

<style lang="scss" scoped>
@import 'theme';

.social {
    display: block;
}

.social-link {
    display: inline-block;
    padding: 0 0 0 1rem;

    .icon {
        color: var(--highlight);
        fill: var(--highlight);
        width: 1.5rem;
        height: 1.5rem;
    }

    &:hover .icon {
        fill: var(--primary);
    }
}
</style>