Blame view

HHECS.Web/src/components/SvgIcon/index.vue 1.31 KB
胡菁 authored
1
<template>
胡菁 authored
2
3
4
5
6
7
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    v-on="$listeners"
  />
胡菁 authored
8
9
10
11
12
13
14
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
胡菁 authored
15
import { isExternal } from "@/utils/validate";
胡菁 authored
16
17

export default {
胡菁 authored
18
  name: "SvgIcon",
胡菁 authored
19
20
21
  props: {
    iconClass: {
      type: String,
胡菁 authored
22
      required: true,
胡菁 authored
23
24
25
    },
    className: {
      type: String,
胡菁 authored
26
27
      default: "",
    },
胡菁 authored
28
29
30
  },
  computed: {
    isExternal() {
胡菁 authored
31
      return isExternal(this.iconClass);
胡菁 authored
32
33
    },
    iconName() {
胡菁 authored
34
      return `#icon-${this.iconClass}`;
胡菁 authored
35
36
37
    },
    svgClass() {
      if (this.className) {
胡菁 authored
38
        return "svg-icon " + this.className;
胡菁 authored
39
      } else {
胡菁 authored
40
        return "svg-icon";
胡菁 authored
41
42
43
44
45
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
胡菁 authored
46
47
48
49
50
        "-webkit-mask": `url(${this.iconClass}) no-repeat 50% 50%`,
      };
    },
  },
};
胡菁 authored
51
52
53
54
55
56
57
58
59
60
61
62
63
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
胡菁 authored
64
  mask-size: cover !important;
胡菁 authored
65
66
67
  display: inline-block;
}
</style>