vue3 icon 图标 使用方法

在Vue 3中使用图标，通常有几种流行的库和框架可以使用，例如Font Awesome、Material Icons、SVG等。以下是几种不同图标库在Vue 3项目中的使用方法。

1. 使用SVG图标

SVG图标可以直接作为组件使用，或者在模板中直接使用。

步骤 1: 创建SVG图标组件。

首先，创建一个SVG图标组件。例如，创建一个名为IconArrowRight.vue的文件：

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
    <line x1="5" y1="12" x2="19" y2="12"></line>
    <polyline points="12 5 19 12 12 19"></polyline>
  </svg>
</template>
 
<script>
export default {
  name: 'IconArrowRight'
}
</script>

步骤 2: 在Vue组件中使用图标。

<template>
  <IconArrowRight />
</template>
 
<script>
import IconArrowRight from './components/IconArrowRight.vue';
 
export default {
  components: {
    IconArrowRight
  }
}
</script>

2. 使用Font Awesome图标

Font Awesome提供了Vue组件库，可以很方便地集成到Vue项目中。

步骤 1: 安装Font Awesome Vue库。

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome

步骤 2: 在你的Vue项目中引入Font Awesome。

// main.js 或 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
library.add(faCoffee)
 
createApp(App).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

步骤 3: 在Vue组件中使用图标。

<template>
  <font-awesome-icon icon="fa-solid fa-coffee" />
</template>

3. 使用Material Icons图标

Material Icons也可以作为Vue组件使用。

步骤 1: 安装Material Icons库。

npm install @mdi/js @mdi/vue @mdi/font @mdi/font/css # 或者其他你需要的图标包，例如@mdi/font/css仅包含CSS文件。

步骤 2: 在你的Vue项目中引入Material Icons。

// main.js 或 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { mdiAccount } from '@mdi/js' // 引入你需要的图标ID。也可以使用import * as mdi from '@mdi/js'; 来引入所有图标。
import { mdiIcons } from '@mdi/vue' // 或者使用其他你选择的导入方式。例如，如果你只使用CSS，则不需要这一步。
import 'material-design-icons-iconfont/dist/material-design-icons.css' // CSS文件路径可能需要根据安装的包进行调整。
 
createApp(App).component('Icon', mdiIcons).mount('#app') // 使用mdiIcons作为组件名，根据你的项目需求调整。如果只使用CSS，则不需要这一步。

或者如果你只使用CSS：

import 'material-design-icons-iconfont/dist/material-design-icons.css' // 根据实际路径调整。确保在你的入口文件或全局样式文件中引入。