<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><path d="M24 4C12.955 4 4 12.954 4 24s8.955 19.999 20 19.999c11.047 0 20-8.954 20-20 0-11.044-8.953-19.998-20-19.998zm9.172 28.845a1.246 1.246 0 0 1-1.715.413C26.76 30.39 20.85 29.74 13.888 31.331a1.247 1.247 0 0 1-.555-2.431c7.619-1.741 14.154-.991 19.426 2.23.587.361.773 1.128.413 1.715M35.62 27.4a1.56 1.56 0 0 1-2.145.514c-5.376-3.305-13.57-4.262-19.93-2.331a1.56 1.56 0 0 1-1.945-1.04 1.56 1.56 0 0 1 1.04-1.944c7.263-2.204 16.293-1.136 22.466 2.657.733.452.965 1.412.514 2.144m.21-5.67c-6.446-3.83-17.08-4.181-23.235-2.314a1.87 1.87 0 1 1-1.086-3.58c7.064-2.144 18.809-1.73 26.23 2.676a1.87 1.87 0 0 1 .654 2.563 1.87 1.87 0 0 1-2.562.654z"/></svg></template>
<script setup lang="ts">
/**
 * SocialSpotify48 is an SVG icon wrapped in a Vue component to make it easier to use.
 */
withDefaults(
  defineProps<{
    /**
     * Define the color of the icon.
     */
    color?: string;
  }>(),
  {
    color: 'currentColor',
  },
);
</script>
