init

layouts/VabRemixIcon/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div
+    v-if="isExternal"
+    :style="styleExternalIcon"
+    class="svg-external-icon image-icon"
+    v-on="$listeners"
+  />
+  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
+    <use :xlink:href="iconName" />
+  </svg>
+</template>
+
+<script>
+  import { isExternal } from '@/utils/validate'
+  export default {
+    name: 'VabRemixIcon',
+    props: {
+      iconClass: {
+        type: String,
+        required: true,
+      },
+      className: {
+        type: String,
+        default: '',
+      },
+    },
+    computed: {
+      isExternal() {
+        return isExternal(this.iconClass)
+      },
+      iconName() {
+        return `#remix-icon-${this.iconClass}`
+      },
+      svgClass() {
+        if (this.className) {
+          return 'svg-icon ' + this.className
+        } else {
+          return 'svg-icon'
+        }
+      },
+      styleExternalIcon() {
+        return {
+          backgroundImage: `url(${this.iconClass})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          width: '50px', // 控制大小
+          height: '50px',
+          borderRadius: '50%', // 变成圆形
+          overflow: 'hidden',
+          display: 'inline-block',
+        }
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    width: 1.125em;
+    height: 1.125em;
+    overflow: hidden;
+    fill: currentColor;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  .image-icon {
+    display: inline-block;
+    background-size: cover !important;
+    background-position: center !important;
+  }
+
+  .svg-external-icon {
+    display: inline-block;
+    background-color: currentColor;
+    mask-size: cover !important;
+  }
+</style>