<template>
    <inline-svg :class="svgColor" :src="svgIcon" :width="svgSize" :height="svgSize" :title="tips" :aria-label="tips"></inline-svg>
</template>

<script lang="ts">
import { computed } from 'vue'
import InlineSvg from 'vue-inline-svg';
export default {
  props: {
    /**
     * @description 大小，单位为PX
     */
    size: Number,

    /**
     * @description 图标名称，默认路径为“asset/svg”
     */
    icon: String,

    /**
     * @description 图标颜色
     */
    color: String,

    /**
     * @description 悬浮提示
     */
    tips: String
  },
  components: {
    InlineSvg
  },
  setup(props) {
    const svgSize = computed(() => {
      return props.size
    })

    const svgColor = computed(() => {
      let tempColor = props.color ?? 'primary'
      return `svg-icon-${tempColor}`
    })

    const svgIcon = computed(() => {
      return new URL(`../../assets/svg/${props.icon}`,import.meta.url).href
    })
    return { svgSize, svgColor,svgIcon }
  }
}
</script>

<style>
svg g [fill]{
  fill: #3699FF !important;
}
/* .svg-icon g path[fill] {
  fill: inherit !important;
} */
.svg-icon-primary g [fill] {
  transition: fill 0.3s ease;
  fill: #3699FF !important;
}
.svg-red g [fill]{
  transition: fill 0.3s ease;
  fill: red !important;
}
.svg-icon-success g [fill] {
  transition: fill 0.3s ease;
  fill: #50cd89 !important;
}
.svg-icon-dark g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-dark) !important;
}
.svg-icon-72B7FF g [fill] {
  transition: fill 0.3s ease;
  fill: #72B7FF !important;
}
.hover:hover .svg-icon-dark g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-primary) !important;
}
.svg-icon-nav g [fill] {
  transition: fill 0.3s ease;
  fill: #9d9da6 !important;
}

.svg-icon.svg-icon-secondary g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-secondary) !important;
}
.svg-icon.svg-icon-grey g [fill] {
  transition: fill 0.3s ease;
  fill: #ccc !important;
}
.svg-icon-warning g [fill] {
  transition: fill 0.3s ease;
  fill: orange !important;
}
.svg-icon.svg-icon-negative g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-negative) !important;
}
.svg-icon.svg-icon-accent g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-accent) !important;
}
.svg-icon.svg-icon-dark g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-dark) !important;
}
.svg-icon.svg-icon-orange g [fill] {
  transition: fill 0.3s ease;
  fill: rgb(255, 152, 0) !important;
}
.svg-icon.svg-icon-positive g [fill] {
  transition: fill 0.3s ease;
  fill: "#C9F7F5" !important;
}
.svg-icon.svg-icon-white g [fill] {
  transition: fill 0.3s ease;
  fill: white !important;
}
.svg-icon.svg-icon-g-p g [fill] {
  transition: fill 0.3s ease;
  fill: grey !important;
}
.svg-icon.svg-icon-g-p {
  cursor: pointer;
}
.svg-icon.svg-icon-g-p:hover g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}
.svg-icon.svg-icon-b-p g [fill] {
  transition: fill 0.3s ease;
  fill: #000 !important;
}
.svg-icon.svg-icon-b-p {
  cursor: pointer;
}
.svg-icon.svg-icon-b-p:hover g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}
.hover-primary:hover .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: white !important;
}
.hover-primary:hover .q-avatar {
  background-color: var(--q-color-primary) !important;
}
.hover-primary:hover {
  color: var(--q-color-primary) !important;
}
.hover-d-p {
  cursor: pointer;
  color: var(--q-color-dark) !important;
}
.hover-d-p .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-dark) !important;
}
.hover-d-p:hover {
  color: var(--q-color-primary) !important;
}
.hover-d-p:hover .svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-color-primary) !important;
}
.hover-g-p {
  cursor: pointer;
  color: #666 !important;
}
.hover-g-p.svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: #666 !important;
}
.hover-g-p:hover {
  color: var(--q-primary) !important;
}
.hover-g-p:hover.svg-icon g [fill] {
  transition: fill 0.3s ease;
  fill: var(--q-primary) !important;
}
</style>
