npm package: @qeschild/icon-to-font
Description: 一个将 SVG 图标转换为字体的命令行工具，支持生成多种字体格式和对应的 CSS 文件
Author: qeschild
Latest version: 1.0.2

# icon-to-font

一个将 SVG 图标转换为字体的命令行工具，支持生成多种字体格式和对应的 CSS 文件。

## 📦 安装

### 全局安装

```bash
npm install -g @qeschild/icon-to-font
# 或
pnpm add -g @qeschild/icon-to-font
# 或
yarn global add @qeschild/icon-to-font
```

### 本地安装

```bash
npm install @qeschild/icon-to-font --save-dev
# 或
pnpm add @qeschild/icon-to-font -D
# 或
yarn add @qeschild/icon-to-font --dev
```

## 🚀 使用

### 简单使用

1. **在项目根路径运行工具**

   ```bash
   # 全局安装时
   itf

   # 本地安装时
   npx itf
   ```

2. **根据项目类型在指定文件夹放 SVG 图标**

   - **uni-app 项目**：将 SVG 图标放在 `static/itf` 目录
   - **Vite Vue3 项目**：将 SVG 图标放在 `src/assets/itf` 目录
   - **Vite React 项目**：将 SVG 图标放在 `src/assets/itf` 目录

3. **工具会自动生成**

   - **uni-app 项目**：
     - 组件：`components/ItfIcon/ItfIcon.vue`
     - 字体和 CSS：`static/.itf/`
   - **Vite 项目**：
     - 组件：`src/components/ItfIcon/ItfIcon.[vue|tsx]`
     - 字体和 CSS：`src/assets/.itf/`

### 命令行选项

| 选项 | 描述 | 默认值 |
| --- | --- | --- |
| `--icons-dir` | SVG 图标目录 | 根据项目类型自动设置 |
| `--dist-dir` | 组件输出目录 | 根据项目类型自动设置 |
| `--font-name` | 字体名称 | `ItfIconFont` |
| `--out-type` | 输出组件类型 | 自动检测项目类型 |
| `--help` | 显示帮助信息 | - |
| `--version` | 显示版本信息 | - |

## 🔧 支持的框架

### 目前支持
- ✅ **uni-app vue3**
- ✅ **react vite**
- ✅ **vue3 vite**

### 未来计划支持
- 📅 Angular
- 📅 其他前端框架

## 📁 项目结构

```
icon-to-font/
├── bin/             # 命令行工具入口
├── utils/           # 工具函数
├── examples/        # 示例项目
│   ├── uniapp-vue3/ # uni-app Vue 3 示例
│   ├── vite-vue3/   # Vite Vue 3 示例
│   └── vite-react/  # Vite React 示例
├── package.json     # 项目配置
├── README.md        # 项目说明
└── tsconfig.json    # TypeScript 配置
```

## 🎯 使用示例

### uni-app 项目使用示例

1. **准备 SVG 图标**：在 `static/itf` 目录放入 SVG 图标文件
2. **运行工具**：在项目根路径执行 `npx itf`
3. **使用组件**：

```vue
<template>
  <view class="container">
    <ItfIcon name="test1" size="24" color="#333" />
    <ItfIcon name="test2" size="32" color="#ff6600" />
    <ItfIcon name="测试" size="40" color="#0099ff" />
  </view>
</template>

<script setup lang="ts">
// 组件会自动注册，无需手动导入
</script>

<style scoped>
.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}
</style>
```

### Vite Vue3 项目使用示例

1. **准备 SVG 图标**：在 `src/assets/itf` 目录放入 SVG 图标文件
2. **运行工具**：在项目根路径执行 `npx itf`
3. **使用组件**：

```vue
<template>
  <div class="container">
    <ItfIcon name="test1" size="24" color="#333" />
    <ItfIcon name="test2" size="32" color="#ff6600" />
  </div>
</template>

<script setup lang="ts">
import ItfIcon from './components/ItfIcon/ItfIcon.vue';
</script>

<style scoped>
.container {
  display: flex;
  gap: 20px;
  padding: 20px;
}
</style>
```

### Vite React 项目使用示例

1. **准备 SVG 图标**：在 `src/assets/itf` 目录放入 SVG 图标文件
2. **运行工具**：在项目根路径执行 `npx itf`
3. **使用组件**：

```tsx
import React from 'react';
import ItfIcon from './components/ItfIcon/ItfIcon';

function App() {
  return (
    <div className="container">
      <ItfIcon name="test1" size={24} color="#333" />
      <ItfIcon name="test2" size={32} color="#ff6600" />
    </div>
  );
}

export default App;
```

## 🛠️ 开发

### 克隆项目

```bash
git clone https://gitee.com/childqes/icon-to-font.git
cd icon-to-font
```

### 安装依赖

```bash
pnpm install
```

### 构建项目

```bash
pnpm run build
```

### 运行测试

```bash
pnpm run test
```

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目！

### 贡献流程

1. Fork 项目
2. 创建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'Add some amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 打开 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

- 作者：qeschild
- 邮箱：17806751969@163.com
- QQ: 2243123752
- 项目地址：[https://gitee.com/childqes/icon-to-font](https://gitee.com/childqes/icon-to-font)

## 🙏 致谢

- [@vusion/webfonts-generator](https://github.com/vusion/webfonts-generator) - 用于生成字体文件
- [commander](https://github.com/tj/commander.js) - 命令行参数解析
- [glob](https://github.com/isaacs/node-glob) - 文件路径匹配

---

**如果这个项目对你有帮助，请给它一个 ⭐ 吧！**