font-size 无效
geng130127 opened this issue · comments
svg设置font-size无效
svg设置font-size无效
svg 是通过直接设置宽高控制大小
我的做法:
<!-- SvgIcon.vue -->
<template>
<svg class="icon" aria-hidden="true" :width="size" :height="size">
<use :xlink:href="`#i-${icon}`" :fill="color ? color : '#333'" />
</svg>
</template>
<script setup>
defineProps({
icon: {
type: String,
required: true
},
color: {
type: String,
default: ''
},
size: {
type: Number,
default: 32
}
})
</script>
<!-- 调用 -->
<svg-icon :icon="iconName" :color="iconColor" :size="iconSize" />
仅供参考。
组件结尾部分加上这段:
<style scoped>
svg {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
组件结尾部分加上这段:
<style scoped> svg { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
完美的解决办法