font-size 无效

[珍藏的小板凳]

svg设置font-size无效

[Allen Huang]

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" />

仅供参考。

[Changsheng Zhu]

组件结尾部分加上这段：

<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>

完美的解决办法