<template>
  <div>
    <svg
      :width="props.buttonStyle.iconWidth"
      :height="props.buttonStyle.iconHeight"
      :viewBox="`0 0 ${props.buttonStyle.iconWidth} ${props.buttonStyle.iconHeight}`"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g id="监测平台" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g
          id="林业防火-智感-重复报警弹窗-切图版"
          transform="translate(-532, -220)"
          :fill="props.buttonStyle.iconColor"
        >
          <g id="弹窗----" transform="translate(175.2674, 165.0542)">
            <g id="文字" transform="translate(64.7326, 10.2458)">
              <g id="预警信息-" transform="translate(0, 36.7)">
                <g id="小图标" transform="translate(292, 8.3)">
                  <g id="编组-55" transform="translate(0, 0)">
                    <polygon
                      id="HeadMoreButton-1"
                      transform="translate(3.3801, 7) scale(-1, 1) rotate(90) translate(-3.3801, -7)"
                      points="6.76849945 3.61994109 3.40277312 6.88441736 0.00771109727 3.61994109 -3.61994109 3.61994109 3.41031659 10.3800589 10.3800589 3.61994109"
                    ></polygon>
                    <polygon
                      id="HeadMoreButton-1"
                      opacity="0.596255"
                      transform="translate(8.3801, 7.0343) scale(-1, 1) rotate(90) translate(-8.3801, -7.0343)"
                      points="10.8003736 4.61994109 8.39628335 6.95170985 5.97123904 4.61994109 3.38005891 4.61994109 8.40167154 9.44859668 13.3800589 4.61994109"
                    ></polygon>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </g>
    </svg>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps(['buttonStyle']);
</script>
