Vue中使用icon的几种方法

目录

1. 使用第三方 UI 库

2. 使用矢量图标库

3. 自定义 icon 组件

4. 使用 CDN

5. 使用 CSS 图标库

---

在Vue中使用icon可以有多种方法，以下是其中的一些：

1. 使用第三方 UI 库

使用第三方 UI 库，如 ElementUI、Vuetify等，它们提供了一系列的组件和 icons 组件。

2. 使用矢量图标库

使用矢量图标库，如 Font Awesome、Material Design Icons等。你可以通过安装对应的库，然后在 Vue 组件中引入对应的图标。

3. 自定义 icon 组件

自定义 icon 组件：如果你想要更好的控制 icon 的样式和行为，可以自定义一个 icon 组件。比如可以使用 SVG 或字体文件等方式来实现。

以下是一个使用 Font Awesome 的例子：

1. 安装 Font Awesome

npm install --save @fortawesome/fontawesome-free

1. 在 main.js 中引入图标库

import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

1. 在组件中使用

<template>
  <div>
    <font-awesome-icon :icon="['fas', 'coffee']" />
  </div>
</template>

当然，还有更多使用 icon 的方法，我再介绍两个：

4. 使用 CDN

如果你只需要使用一部分 icon，可以直接通过 CDN 引入对应的图标库，比如 Font Awesome、Ionicons等。在 Vue 中使用方式和普通 HTML 中引入一样。

<!-- 在 index.html 中引入 fontawesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

<!-- 在组件中使用 -->
<template>
  <div>
    <i class="fas fa-coffee"></i>
  </div>
</template>

5. 使用 CSS 图标库

除了矢量图标库外，还有一些纯 CSS 实现的图标库，比如 IcoMoon、Feather Icons等。你可以选择一个喜欢的图标库，然后将对应的 CSS 文件引入到项目中，在组件中添加对应的 class 名称即可。

<!-- 在 index.html 中引入 icomoon 的 css 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/icomoon@3.0.0/icomoon.min.css" />

<!-- 在组件中使用 -->
<template>
  <div>
    <i class="icon-heart"></i>
  </div>
</template>

<script>
export default {
  mounted() {
    // 添加 icon-heart 这个 class 名称到 i 标签上
    const heartIcon = document.querySelector('.icon-heart')
    heartIcon.classList.add('icon', 'icon-heart')
  }
}
</script>