支付页面

src/components/SvgIcon/index.vue

@@ -1,50 +1,50 @@
 <template>
-  <div class="c-svg">
-    <svg
-      :class="svgClass"
-      v-bind="$attrs"
-      :style="{ color: color, fontSize: size/10 + 'rem' }"
-    >
-      <use :href="iconName"></use>
-    </svg>
-  </div>
+	<div class="c-svg">
+		<svg
+			:class="svgClass"
+			v-bind="$attrs"
+			:style="{ color: color, fontSize: size / 10 + 'rem' }"
+		>
+			<use :href="iconName"></use>
+		</svg>
+	</div>
 </template>
 
 <script setup>
-import { computed } from "vue";
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  color: {
-    type: String,
-    default: "",
-  },
-  size: {
-    type: [Number, String],
-    default: 16,
-  },
-});
-const iconName = computed(() => `#icon-${props.name}`);
-const svgClass = computed(() => {
-  if (props.name) return `svg-icon icon-${props.name}`;
-  return "svg-icon";
-});
+	import { computed } from 'vue'
+	const props = defineProps({
+		name: {
+			type: String,
+			required: true
+		},
+		color: {
+			type: String,
+			default: ''
+		},
+		size: {
+			type: [Number, String],
+			default: 16
+		}
+	})
+	const iconName = computed(() => `#icon-${props.name}`)
+	const svgClass = computed(() => {
+		if (props.name) return `svg-icon icon-${props.name}`
+		return 'svg-icon'
+	})
 </script>
 
 <style scoped>
-.svg-icon {
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-	color: var(--svg-icon-color);
-}
-.c-svg {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+	.svg-icon {
+		width: var(--svg-icon-width, 1em);
+		height: var(--svg-icon-height, 1em);
+		fill: currentColor;
+		color: var(--svg-icon-color);
+	}
+	.c-svg {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 </style>