vue底部图标选中时变实心

<template>
  <div>
      <van-tabbar v-model="active" active-color="#ff5f3c" inactive-color="#888" class="footer">
          <van-tabbar-item>
              <span>首页</span>
              <template #icon="props">
                  <i :class="props.active ? icon.active : icon.inactive"></i>
              </template>
          </van-tabbar-item>
          <van-tabbar-item>
              <span>个人中心</span>
              <template #icon="props">
                  <i :class="props.active ? icon2.active : icon2.inactive"></i>
              </template>
          </van-tabbar-item>
      </van-tabbar>

  </div>
</template>

<scrip