element-plus/docs/.vitepress/vitepress/components/vp-sponsor-small.vue

<script setup lang="ts">
import { isDark } from '../composables/dark'
import { sponsors } from '../../config/sponsors'
const sponsorList = sponsors.filter((_) => !_.type)
</script>

<template>
  <div class="container">
    <div
      v-for="item in sponsorList"
      :key="item.name"
      :class="['sponsor-item', item.isDark && isDark ? 'filter invert' : '']"
    >
      <a
        :href="item.url"
        :title="`${item.name_cn || item.name} - ${
          item.slogan_cn || item.slogan
        }`"
        target="_blank"
      >
        <img :src="item.img" :alt="item.name" />
      </a>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  align-items: center;
  .sponsor-item {
    margin-right: 4px;

    a {
      display: inline-flex;
      align-items: center;

      img {
        width: 36px;
        height: 36px;
      }
    }
  }
}
</style>