icon-to-font

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

📦 安装

全局安装

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

本地安装

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

🚀 使用

简单使用

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

   # 全局安装时
   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. 使用组件：

<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. 使用组件：

<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. 使用组件：

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;

🛠️ 开发

克隆项目

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

安装依赖

pnpm install

构建项目

pnpm run build

运行测试

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 文件了解详情

📞 联系方式

• 作者：qeschild
• 邮箱：[email protected]
• QQ: 2243123752
• 项目地址：https://gitee.com/childqes/icon-to-font

🙏 致谢

• @vusion/webfonts-generator - 用于生成字体文件
• commander - 命令行参数解析
• glob - 文件路径匹配

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