Vue 3 使用 class 属性直接引入 Icon 图标

在 Vue 3 中，可以使用 Vue 的 provide/inject API 将 icon 图标作为一个全局变量注入到应用程序中，并在需要使用图标的组件中直接引用。

首先，创建一个 Icon 组件，用于渲染图标：

// Icon.vue
<template>
  <i :class='`icon-${name}`'></i>
</template>

<script>
export default {
  props: ['name']
}
</script>

<style>
/* 根据名称引入对应的图标 */
.icon-home {
  background-image: url('/path/to/home-icon.png');
}

.icon-user {
  background-image: url('/path/to/user-icon.png');
}

/* 更多图标样式... */
</style>

在应用程序的根组件中，将 Icon 组件作为一个全局组件注册，并将所有需要使用的图标名称（例如 home、user）作为一个全局变量提供给应用程序：

// App.vue
<template>
  <div id='app'>
    <router-view />
  </div>
</template>

<script>
import Icon from '@/components/Icon.vue'

export default {
  components: {
    Icon
  },
  provide: {
    icons: {
      home: 'home',
      user: 'user'
    }
  }
}
</script>

在需要使用图标的任何组件中，使用 inject API 将全局变量注入到组件中，并通过 Icon 组件渲染图标：

// MyComponent.vue
<template>
  <div>
    <Icon :name='icons.home' />
    <Icon :name='icons.user' />
  </div>
</template>

<script>
import { inject } from 'vue'
import Icon from '@/components/Icon.vue'

export default {
  components: {
    Icon
  },
  setup() {
    const icons = inject('icons')
    return {
      icons
    }
  }
}
</script>

这样，就可以通过 class 属性直接引用图标了，例如：

<i class='icon-home'></i>
<i class='icon-user'></i>