oh-vue-icons 使用教程

1. 项目目录结构及介绍

oh-vue-icons 是一个用于方便地在 Vue 项目中引入内联 SVG 图标的组件。以下是项目的目录结构及其各部分的简要介绍：

oh-vue-icons/
├── .husky/                       # Husky 配置目录，用于 Git hooks
├── docs/                         # 文档目录
├── iconpacks/                    # 不同图标包的目录
├── package/                      # 包管理相关文件
├── scripts/                      # 脚本文件目录
├── .editorconfig                  # 编辑器配置文件
├── .eslintignore                 # ESLint 忽略文件
├── .eslintrc.js                  # ESLint 配置文件
├── .gitignore                    # Git 忽略文件
├── .nvmrc                        # Node.js 版本管理文件
├── .prettierrc.js                # Prettier 配置文件
├── CHANGELOG.md                  # 更新日志
├── CONTRIBUTING.md               # 贡献指南
├── LICENSE                       # 许可证文件
├── README-CN.md                  # 中文 README 文件
├── README.md                     # 英文 README 文件
├── package.json                  # 包管理配置文件
└── yarn.lock                     # Yarn 锁文件

2. 项目的启动文件介绍

项目的启动文件根据 Vue 版本的不同而有所区别，以下分别介绍：

Vue 3

对于 Vue 3 项目，启动文件通常是 main.js。以下是一个示例：

// 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');

Vue 2

对于 Vue 2 项目，启动文件同样是 main.js，但略有不同：

// main.js
import Vue 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);

Vue.component('v-icon', OhVueIcon);
new Vue({
  render: h => h(App)
}).$mount('#app');

在这些文件中，我们导入了 OhVueIcon 组件，并使用 addIcons 方法添加所需的图标。

3. 项目的配置文件介绍

项目的配置文件包括但不限于以下几种：

• .editorconfig：用于统一不同开发者的编辑器设置，例如缩进风格和字符编码。
• .eslintrc.js：ESLint 的配置文件，用于定义代码质量和风格的标准。
• .gitignore：Git 忽略文件，用于指定不需要提交到版本控制系统的文件和目录。
• .prettierrc.js：Prettier 的配置文件，用于代码格式化。

这些配置文件有助于维护项目代码的一致性和可读性。