<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><path d="M8.5 4.377a1.75 1.75 0 0 1 3 0l5.735 9.556c.7 1.167-.141 2.65-1.501 2.65H4.267c-1.36 0-2.2-1.483-1.501-2.65zm1.714.772a.25.25 0 0 0-.428 0l-5.734 9.556a.25.25 0 0 0 .215.379h11.467a.25.25 0 0 0 .215-.38L10.214 5.15Zm-.13 7.435a.75.75 0 0 1 0 1.5h-.168a.75.75 0 0 1 0-1.5zm-.085-5a.75.75 0 0 1 .75.75v2.917a.75.75 0 0 1-1.5 0V8.334a.75.75 0 0 1 .75-.75"/></svg></template>
<script setup lang="ts">
/**
 * WarningTriangle20 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>
