<script setup>
import { ref, computed } from "vue"

const props = defineProps({
  title: String,
  height: [Number, String],
  width: [Number, String],
})

// variables
const heightNumber = ref(24)
const widthNumber = ref(24)

if (!Number.isNaN(props.height) && typeof props.height !== "undefined") {
  heightNumber.value = Number.parseInt(props.height)
} else if (typeof props.height === "undefined" && (!Number.isNaN(props.width) && typeof props.width !== "undefined")) {
  heightNumber.value = Number.parseInt(props.width)
}

if (!Number.isNaN(props.width) && typeof props.width !== "undefined") {
  widthNumber.value = Number.parseInt(props.width)
} else if (typeof props.width === "undefined" && (!Number.isNaN(props.height) && typeof props.height !== "undefined")) {
  widthNumber.value = Number.parseInt(props.height)
}

// computed
const titleString = computed(() => {
  if (typeof props.title === "string" && props.title.trim().length > 0) {
    return props.title.trim()
  }
  return ""
})
</script>

<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" preserveAspectRatio="xMidYMid meet">
  <title v-if="titleString.length > 0" v-html="title"></title>
  <path d="m2 22 10-10"></path>
  <path d="m16 8-1.17 1.17"></path>
  <path d="M3.47 12.53 5 11l1.53 1.53a3.5 3.5 0 0 1 0 4.94L5 19l-1.53-1.53a3.5 3.5 0 0 1 0-4.94Z"></path>
  <path d="m8 8-.53.53a3.5 3.5 0 0 0 0 4.94L9 15l1.53-1.53c.55-.55.88-1.25.98-1.97"></path>
  <path d="M10.91 5.26c.15-.26.34-.51.56-.73L13 3l1.53 1.53a3.5 3.5 0 0 1 .28 4.62"></path>
  <path d="M20 2h2v2a4 4 0 0 1-4 4h-2V6a4 4 0 0 1 4-4Z"></path>
  <path d="M11.47 17.47 13 19l-1.53 1.53a3.5 3.5 0 0 1-4.94 0L5 19l1.53-1.53a3.5 3.5 0 0 1 4.94 0Z"></path>
  <path d="m16 16-.53.53a3.5 3.5 0 0 1-4.94 0L9 15l1.53-1.53a3.49 3.49 0 0 1 1.97-.98"></path>
  <path d="M18.74 13.09c.26-.15.51-.34.73-.56L21 11l-1.53-1.53a3.5 3.5 0 0 0-4.62-.28"></path>
  <line x1="2" y1="2" x2="22" y2="22"></line>
</svg>
</template>
