Vue中使用icon的幾種常用方法

更新時間：2023年07月20日 12:00:37 作者：桑稚遠(yuǎn)方~

這篇文章主要給大家介紹了關(guān)于Vue中使用icon的幾種常用方法,icon圖標(biāo)的使用 Vue是現(xiàn)在前端最流行的框架之一,作為前端開發(fā)人員應(yīng)該要熟練的掌握它,需要的朋友可以參考下

1. 使用第三方 UI 庫

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

2. 使用矢量圖標(biāo)庫

使用矢量圖標(biāo)庫，如 Font Awesome、Material Design Icons等。你可以通過安裝對應(yīng)的庫，然后在 Vue 組件中引入對應(yīng)的圖標(biāo)。

3. 自定義 icon 組件

自定義 icon 組件：如果你想要更好的控制 icon 的樣式和行為，可以自定義一個 icon 組件。比如可以使用 SVG 或字體文件等方式來實現(xiàn)。

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

安裝 Font Awesome

npm install --save @fortawesome/fontawesome-free

在 main.js 中引入圖標(biāo)庫

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)

在組件中使用

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

當(dāng)然，還有更多使用 icon 的方法，我再介紹兩個：

4. 使用 CDN

如果你只需要使用一部分 icon，可以直接通過 CDN 引入對應(yīng)的圖標(biāo)庫，比如 Font Awesome、Ionicons等。在 Vue 中使用方式和普通 HTML 中引入一樣。

<!-- 在 index.html 中引入 fontawesome cdn -->
<link rel="stylesheet"  />
<!-- 在組件中使用 -->
<template>
  <div>
    <i class="fas fa-coffee"></i>
  </div>
</template>

5. 使用 CSS 圖標(biāo)庫

除了矢量圖標(biāo)庫外，還有一些純 CSS 實現(xiàn)的圖標(biāo)庫，比如 IcoMoon、Feather Icons等。你可以選擇一個喜歡的圖標(biāo)庫，然后將對應(yīng)的 CSS 文件引入到項目中，在組件中添加對應(yīng)的 class 名稱即可。

<!-- 在 index.html 中引入 icomoon 的 css 文件 -->
<link rel="stylesheet"  />
<!-- 在組件中使用 -->
<template>
  <div>
    <i class="icon-heart"></i>
  </div>
</template>
<script>
export default {
  mounted() {
    // 添加 icon-heart 這個 class 名稱到 i 標(biāo)簽上
    const heartIcon = document.querySelector('.icon-heart')
    heartIcon.classList.add('icon', 'icon-heart')
  }
}
</script>