<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><g clip-path="url(#media_thumb-up_20__a)"><path d="M10.384 2.483a2.362 2.362 0 0 1 3.848 2.693l-.874 1.573h2.08a2.417 2.417 0 0 1 2.364 2.923l-.819 3.818q-.002.013-.006.026c-.098.392-.184.762-.276 1.065-.094.31-.214.622-.413.902-.427.599-1.08.862-1.94 1.077a.8.8 0 0 1-.181.023h-5a.8.8 0 0 1-.237-.039l-1.543-.514a.75.75 0 0 1-.72.552H3.75a.75.75 0 0 1-.742-.638L1.758 7.61a.75.75 0 0 1 .742-.862h4.184zm-5.988 12.6h1.52V8.248H3.372l1.025 6.833ZM12.777 3.42a.86.86 0 0 0-1.26.045l-4.1 4.73v6.264l1.87.623h4.782c.734-.19.906-.342.997-.47.061-.085.124-.217.2-.466.076-.252.145-.549.25-.97l.819-3.818a.917.917 0 0 0-.897-1.109h-3.354a.75.75 0 0 1-.654-1.112h-.002l1.493-2.69a.86.86 0 0 0-.144-1.027"/></g><defs><clipPath id="media_thumb-up_20__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg></template>
<script setup lang="ts">
/**
 * ThumbUp20 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>
