vue3的侧边导航栏图标icon

Vue3中的侧边导航栏图标通常使用SVG（Scalable Vector Graphics）或者Font Awesome等图标库来表示。SVG图标可以直接通过HTML `<svg>`标签引入，保持矢量图形的清晰度和缩放性能良好。例如：

<template>
  <div class="sidebar">
    <router-link :to="{ name: 'dashboard' }" class="nav-item">
      <svg width="24" height="24" viewBox="0 0 24 24">
        <path d="M18 6v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2z"/>
      </svg> Dashboard
    </router-link>
  </div>
</template>

<style scoped>
.nav-item {
  display: flex;
  align-items: center;
}
</style>

对于Font Awesome这样的字体图标库，你可以通过组件库提供的`fa-icon`或自定义组件引用图标，比如：

<template>
  <div class="sidebar">
    <router-link :to="{ name: 'dashboard' }">
      <font-awesome-icon :icon="['fas', 'home']" class="sidebar-icon"></font-awesome-icon>
      Dashboard
    </router-link>
  </div>
</template>

<script>
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
export default {
  components: {
    FontAwesomeIcon,
  },
};
</script>