oh-vue-icons 安装与配置指南

1. 项目基础介绍

oh-vue-icons 是一个基于 Vue 的组件，用于轻松地引入不同流行图标包中的内联 SVG 图标。这个项目支持 Vue 2 和 Vue 3，并且可以树摇（tree-shaking），只导入你需要的图标，从而减小打包体积。目前支持超过 20 个流行图标包，共 30000 多个图标。

主要编程语言：JavaScript、TypeScript

2. 关键技术和框架

• Vue.js：项目基于 Vue.js 框架开发，支持 Vue 2 和 Vue 3。
• SVG 图标：使用 SVG 格式的图标，提供高清晰度的显示效果。
• 图标包：整合了多个流行的图标包，如 Font Awesome、Heroicons、Material Design icons 等。

3. 安装和配置

准备工作

在开始安装之前，请确保你的开发环境中已经安装了 Node.js 和 npm。你可以通过以下命令来检查它们是否已经安装：

node -v
npm -v

如果尚未安装，请访问 Node.js 官网 下载并安装。

安装步骤

安装 oh-vue-icons

使用 npm 或 yarn 安装 oh-vue-icons：

npm install oh-vue-icons
# 或者
yarn add oh-vue-icons

对于 Vue 2 用户，还需要安装 @vue/composition-api：

npm install @vue/composition-api -D
# 或者
yarn add @vue/composition-api -D

如果你使用的是 Nuxt 2，则应该安装 @nuxtjs/composition-api 并在 nuxt.config.js 中配置：

npm install @nuxtjs/composition-api -D
# 或者
yarn add @nuxtjs/composition-api -D

然后，在你的 nuxt.config.js 文件中添加如下配置：

export default {
  // ...
  buildModules: [
    // ...
    '@nuxtjs/composition-api/module'
  ]
}

引入 oh-vue-icons

在你的 Vue 应用中全局引入 oh-vue-icons 组件：

// main.js 或类似文件
import { createApp } from 'vue'
import App from './App.vue'
import { OhVueIcon, addIcons } from 'oh-vue-icons'
import { FaFlag, RiZhihuFill } from 'oh-vue-icons/icons'

addIcons(FaFlag, RiZhihuFill)

const app = createApp(App)
app.component('v-icon', OhVueIcon)
app.mount('#app')

如果你想要局部引入图标，可以在组件内部这样做：

import OhVueIcon from 'oh-vue-icons'

export default {
  components: {
    'v-icon': OhVueIcon
  }
}

使用图标

在你的 Vue 模板中，使用 <v-icon> 标签来显示图标：

<template>
  <div>
    <v-icon name="fa-flag"></v-icon>
    <v-icon name="ri-zhihu-fill"></v-icon>
  </div>
</template>

请注意，图标名称应使用短横线命名法（kebab-case）。

以上步骤即为 oh-vue-icons 的安装和配置指南，遵循上述步骤，你就可以在你的 Vue 项目中使用丰富的图标了。