在 vab-icon 组件中怎么设置图标的大小？

以下是几种常见的方法来调整 vab-icon 图标的大小。

方法 1: 使用内置的 size 属性

许多组件库（包括 Vant 和其他 Vue 组件库）允许通过 size 属性来设置图标大小。请查看文档确认 vab-icon 是否支持这个属性。如果支持，你可以像这样使用：

<template>
  <div>
    <vab-icon name="home" size="24"></vab-icon>
    <vab-icon name="setting" size="32"></vab-icon>
  </div>
</template>

方法 2: 使用 CSS 样式

你也可以通过 CSS 来控制字体大小，这样也能同时影响到图标的大小。使用 class 或 style 属性，你可以轻松调整图标的大小：

<template>
  <div>
    <vab-icon name="home" class="icon-small"></vab-icon>
    <vab-icon name="setting" class="icon-large"></vab-icon>
  </div>
</template>

<style>
.icon-small {
  font-size: 16px; /* 调整为你需要的大小 */
}

.icon-large {
  font-size: 32px; /* 调整为你需要的大小 */
}
</style>

方法 3: 使用 inline 样式

通过 style 属性直接在 vab-icon 上设置大小，通常使用 font-size：

<template>
  <div>
    <vab-icon name="home" style="font-size: 24px;"></vab-icon>
    <vab-icon name="setting" style="font-size: 40px;"></vab-icon>
  </div>
</template>

注意事项

• 确保图标库中选择的图标支持相应的大小属性。
• 当使用 CSS class 或 inline styles 时，确保样式不会被其他样式覆盖。
• 某些图标可能会有默认大小，检查相关文档以确保自定义样式正常应用。

标签：
来源：