icon-to-font 1.0.0

package/utils/component-generators/react-component-generator.ts

@@ -0,0 +1,69 @@
+/**
+ * React 组件生成器
+ */
+import { BaseComponentGenerator } from './base-component-generator.abstract';
+
+export class ReactComponentGenerator extends BaseComponentGenerator {
+  /**
+   * 生成 React 组件
+   * @param {string} fontName - 字体名称
+   * @param {string[]} iconNames - 图标名称数组
+   * @returns {string} React 组件内容
+   * @example
+   * ```typescript
+   * const generator = new ReactComponentGenerator();
+   * const reactComponent = generator.generate('MyFont', ['icon1', 'icon2']);
+   * console.log(reactComponent); // 输出 React 组件内容
+   * ```
+   */
+  generate(fontName: string, iconNames: string[]): string {
+    const iconNameUnion = this.generateIconNameUnion(iconNames);
+    
+    return `
+import React from 'react';
+import './icon-font.css';
+
+/**
+ * Icon component props
+ */
+export interface ItfIconProps {
+  /** Icon name */
+  name: ${iconNameUnion};
+  /** Size in px or any valid CSS unit */
+  size?: number | string;
+  /** Color of the icon */
+  color?: string;
+  /** Additional className */
+  className?: string;
+  /** Click event handler */
+  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+}
+
+/**
+ * Icon component
+ */
+const ItfIcon: React.FC<ItfIconProps> = ({
+  name,
+  size = 14,
+  color,
+  className = '',
+  onClick,
+  ...rest
+}) => {
+  return (
+    <span
+      className={\`itf-icon itf-icon-\${name} \${className}\`}
+      style={{
+        fontSize: typeof size === 'number' ? \`\${size}px\` : size,
+        color,
+      }}
+      onClick={onClick}
+      {...rest}
+    />
+  );
+};
+
+export default ItfIcon;
+`;
+  }
+}

package/utils/component-generators/uni-app-component-generator.ts

@@ -0,0 +1,64 @@
+/**
+ * uni-app 组件生成器
+ */
+import { BaseComponentGenerator } from "./base-component-generator.abstract";
+
+export class UniAppComponentGenerator extends BaseComponentGenerator {
+  /**
+   * 生成 uni-app 组件
+   * @param {string} fontName - 字体名称
+   * @param {string[]} iconNames - 图标名称数组
+   * @returns {string} uni-app 组件内容
+   * @example
+   * ```typescript
+   * const generator = new UniAppComponentGenerator();
+   * const uniComponent = generator.generate('MyFont', ['icon1', 'icon2']);
+   * console.log(uniComponent); // 输出 uni-app 组件内容
+   * ```
+   */
+  generate(fontName: string, iconNames: string[]): string {
+    const iconNameUnion = this.generateIconNameUnion(iconNames);
+
+    return `
+<template>
+  <text 
+    :class="['itf-icon', \`itf-icon-\${props.name}\`]" 
+    :style="{
+      fontSize: typeof props.size === 'number' ? \`\${props.size}px\` : props.size,
+      color: props.color
+    }"
+    @click="$emit('click', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+export interface ItfIconProps {
+  /** Icon name */
+  name: ${iconNameUnion};
+  /** Size in px or any valid CSS unit */
+  size?: number | string;
+  /** Color of the icon */
+  color?: string;
+}
+
+const props = withDefaults(defineProps<ItfIconProps>(), {
+  size: 30,
+});
+
+defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<style scoped lang="scss">
+@import '../../static/.itf/icon-font.css';
+
+.itf-icon {
+  vertical-align: middle;
+  cursor: inherit;
+  speak: none;
+}
+</style>
+`;
+  }
+}

package/utils/component-generators/vue-component-generator.ts

@@ -0,0 +1,65 @@
+/**
+ * Vue 组件生成器
+ */
+import { BaseComponentGenerator } from './base-component-generator.abstract';
+
+export class VueComponentGenerator extends BaseComponentGenerator {
+  /**
+   * 生成 Vue 组件
+   * @param {string} fontName - 字体名称
+   * @param {string[]} iconNames - 图标名称数组
+   * @returns {string} Vue 组件内容
+   * @example
+   * ```typescript
+   * const generator = new VueComponentGenerator();
+   * const vueComponent = generator.generate('MyFont', ['icon1', 'icon2']);
+   * console.log(vueComponent); // 输出 Vue 组件内容
+   * ```
+   */
+  generate(fontName: string, iconNames: string[]): string {
+    const iconNameUnion = this.generateIconNameUnion(iconNames);
+    
+    return `
+<template>
+  <i 
+    :class="['itf-icon', \`itf-icon-\${props.name}\`]" 
+    :style="{
+      fontSize: typeof props.size === 'number' ? \`\${props.size}px\` : props.size,
+      color: props.color
+    }" 
+    v-bind="$attrs"
+    @click="$emit('click', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import './icon-font.css';
+
+export interface ItfIconProps {
+  /** Icon name */
+  name: ${iconNameUnion};
+  /** Size in px or any valid CSS unit */
+  size?: number | string;
+  /** Color of the icon */
+  color?: string;
+}
+
+const props = withDefaults(defineProps<ItfIconProps>(), {
+  size: 14,
+});
+
+defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<style scoped>
+.itf-icon {
+  vertical-align: middle;
+  cursor: inherit;
+  speak: none;
+}
+</style>
+`;
+  }
+}

package/utils/component-generators.ts

@@ -0,0 +1,9 @@
+/**
+ * 组件生成器模块
+ * @description 用于生成各种框架的图标组件
+ */
+
+// 导出新目录中的所有内容
+export * from './component-generators';
+
+

package/utils/css-generator.ts

@@ -0,0 +1,47 @@
+/**
+ * CSS 生成器模块
+ * @description 生成字体图标所需的 CSS 内容
+ */
+
+/**
+ * 生成 CSS 文件内容
+ * @param {string} fontName - 字体名称
+ * @param {string[]} iconNames - 图标名称数组
+ * @returns {string} CSS 内容
+ * @example
+ * ```typescript
+ * const cssContent = generateCssContent('MyFont', ['icon1', 'icon2']);
+ * console.log(cssContent); // 输出 CSS 内容
+ * ```
+ */
+export function generateCssContent(fontName: string, iconNames: string[]): string {
+  return `
+@font-face {
+  font-family: '${fontName}';
+  src: url('./${fontName}.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+.itf-icon {
+  font-family: '${fontName}' !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+}
+
+${iconNames
+  .map((name, index) => {
+    const code = 0xf101 + index;
+    const codeStr = code.toString(16).padStart(4, '0');
+    return `.itf-icon-${name}::before { content: "\\${codeStr}"; }`;
+  })
+  .join("\n")}
+`.trim();
+}

package/utils/directory-structure.ts

@@ -0,0 +1,139 @@
+/**
+ * 目录结构处理模块
+ * @description 处理不同项目类型的目录结构
+ */
+
+import { resolve } from 'path';
+
+/**
+ * 目录结构接口
+ */
+export interface DirectoryStructure {
+  /** 组件目录 */
+  componentDir: string;
+  /** 资源目录（字体文件和 CSS 文件） */
+  assetsDir: string;
+}
+
+/**
+ * 项目类型枚举
+ */
+export enum ProjectType {
+  /** Vue 项目 */
+  VUE = 'vue',
+  /** React 项目 */
+  REACT = 'react',
+  /** uni-app 项目 */
+  UNIAPP = 'uniapp',
+  /** 其他项目类型 */
+  OTHER = 'other'
+}
+
+/**
+ * 获取项目类型对应的目录结构
+ * @param {ProjectType | string} projectType - 项目类型
+ * @param {string} baseDistDir - 基础输出目录
+ * @returns {DirectoryStructure} 目录结构对象
+ * @example
+ * ```typescript
+ * const structure = getDirectoryStructure('vue', './output');
+ * console.log(structure.componentDir); // 输出：./src/components
+ * console.log(structure.assetsDir); // 输出：./src/assets/.itf
+ * 
+ * const uniAppStructure = getDirectoryStructure('uniapp', './examples/uniapp-vue3');
+ * console.log(uniAppStructure.componentDir); // 输出：./examples/uniapp-vue3/components
+ * console.log(uniAppStructure.assetsDir); // 输出：./examples/uniapp-vue3/static/.itf
+ * ```
+ */
+export function getDirectoryStructure(
+  projectType: ProjectType | string,
+  baseDistDir: string
+): DirectoryStructure {
+  const type = projectType as ProjectType;
+  
+  switch (type) {
+    case ProjectType.UNIAPP:
+      // 对于 uni-app 项目，assetsDir 应该是在项目根目录下的 static/.itf
+      // 我们需要从 baseDistDir 中提取项目根目录
+      const uniAppRootDir = baseDistDir.includes('components') ? baseDistDir.replace('components', '') : baseDistDir;
+      return {
+        componentDir: resolve(process.cwd(), baseDistDir),
+        assetsDir: resolve(process.cwd(), uniAppRootDir, 'static/.itf')
+      };
+      
+    case ProjectType.VUE:
+    case ProjectType.REACT:
+      return {
+        componentDir: resolve(process.cwd(), baseDistDir),
+        assetsDir: resolve(process.cwd(), 'src/assets/.itf')
+      };
+      
+    default:
+      return {
+        componentDir: resolve(process.cwd(), baseDistDir),
+        assetsDir: resolve(process.cwd(), baseDistDir)
+      };
+  }
+}
+
+/**
+ * 获取组件文件路径
+ * @param {DirectoryStructure} structure - 目录结构
+ * @param {ProjectType | string} projectType - 项目类型
+ * @returns {string} 组件文件路径
+ * @example
+ * ```typescript
+ * const structure = getDirectoryStructure('vue', './output');
+ * const componentPath = getComponentFilePath(structure, 'vue');
+ * console.log(componentPath); // 输出：./src/components/ItfIcon/ItfIcon.vue
+ * 
+ * const reactStructure = getDirectoryStructure('react', './output');
+ * const reactComponentPath = getComponentFilePath(reactStructure, 'react');
+ * console.log(reactComponentPath); // 输出：./src/components/ItfIcon/ItfIcon.tsx
+ * 
+ * const uniAppStructure = getDirectoryStructure('uniapp', './output');
+ * const uniAppComponentPath = getComponentFilePath(uniAppStructure, 'uniapp');
+ * console.log(uniAppComponentPath); // 输出：./components/ItfIcon/ItfIcon.vue
+ * ```
+ */
+export function getComponentFilePath(
+  structure: DirectoryStructure,
+  projectType: ProjectType | string
+): string {
+  const type = projectType as ProjectType;
+  const extension = type === ProjectType.REACT ? 'tsx' : 'vue';
+  
+  // 所有项目类型都输出到 ItfIcon 子目录中
+  return resolve(structure.componentDir, 'ItfIcon', `ItfIcon.${extension}`);
+}
+
+/**
+ * 获取 CSS 文件路径
+ * @param {DirectoryStructure} structure - 目录结构
+ * @returns {string} CSS 文件路径
+ * @example
+ * ```typescript
+ * const structure = getDirectoryStructure('vue', './output');
+ * const cssPath = getCssFilePath(structure);
+ * console.log(cssPath); // 输出：./src/assets/.itf/icon-font.css
+ * ```
+ */
+export function getCssFilePath(structure: DirectoryStructure): string {
+  return resolve(structure.assetsDir, 'icon-font.css');
+}
+
+/**
+ * 获取字体文件路径
+ * @param {DirectoryStructure} structure - 目录结构
+ * @param {string} fontName - 字体名称
+ * @returns {string} 字体文件路径
+ * @example
+ * ```typescript
+ * const structure = getDirectoryStructure('vue', './output');
+ * const fontPath = getFontFilePath(structure, 'MyIconFont');
+ * console.log(fontPath); // 输出：./src/assets/.itf/MyIconFont
+ * ```
+ */
+export function getFontFilePath(structure: DirectoryStructure, fontName: string): string {
+  return resolve(structure.assetsDir, fontName);
+}

package/utils/file-system.ts

@@ -0,0 +1,83 @@
+/**
+ * 文件系统操作模块
+ * @description 封装文件系统相关操作
+ */
+
+import { existsSync, mkdirSync, writeFileSync, readdirSync } from 'fs';
+import { resolve } from 'path';
+
+/**
+ * 检查目录是否存在
+ * @param {string} directory - 目录路径
+ * @returns {boolean} 是否存在
+ * @example
+ * ```typescript
+ * const exists = checkDirectoryExists('./src');
+ * console.log(exists); // 输出：true 或 false
+ * ```
+ */
+export function checkDirectoryExists(directory: string): boolean {
+  return existsSync(directory);
+}
+
+/**
+ * 创建目录（如果不存在）
+ * @param {string} directory - 目录路径
+ * @returns {void}
+ * @example
+ * ```typescript
+ * createDirectory('./output');
+ * // 创建 output 目录（如果不存在）
+ * ```
+ */
+export function createDirectory(directory: string): void {
+  mkdirSync(directory, { recursive: true });
+}
+
+/**
+ * 写入文件
+ * @param {string} filePath - 文件路径
+ * @param {string} content - 文件内容
+ * @returns {void}
+ * @example
+ * ```typescript
+ * writeFile('./output/file.txt', 'Hello World');
+ * // 写入文件内容
+ * ```
+ */
+export function writeFile(filePath: string, content: string): void {
+  writeFileSync(filePath, content, 'utf8');
+}
+
+/**
+ * 读取目录中的文件
+ * @param {string} directory - 目录路径
+ * @param {string} extension - 文件扩展名（可选）
+ * @returns {string[]} 文件名称数组
+ * @example
+ * ```typescript
+ * const files = readDirectory('./icons', '.svg');
+ * console.log(files); // 输出：['icon1.svg', 'icon2.svg']
+ * ```
+ */
+export function readDirectory(directory: string, extension?: string): string[] {
+  const files = readdirSync(directory);
+  if (extension) {
+    return files.filter(file => file.endsWith(extension));
+  }
+  return files;
+}
+
+/**
+ * 解析绝对路径
+ * @param {string} path - 相对或绝对路径
+ * @returns {string} 绝对路径
+ * @example
+ * ```typescript
+ * const absolutePath = resolvePath('./src');
+ * console.log(absolutePath); // 输出：/full/path/to/src
+ * ```
+ */
+export function resolvePath(path: string): string {
+  return resolve(process.cwd(), path);
+}

package/utils/font-generator.ts

@@ -0,0 +1,55 @@
+/**
+ * 字体生成器模块
+ * @description 用于生成字体文件
+ */
+
+import webfontsGenerator from '@vusion/webfonts-generator';
+
+/**
+ * 生成字体文件的选项接口
+ */
+export interface GenerateFontOptions {
+  /** SVG 文件路径数组 */
+  svgFiles: string[];
+  /** 输出目录 */
+  outputDir: string;
+  /** 字体名称 */
+  fontName: string;
+}
+
+/**
+ * 生成字体文件
+ * @param {GenerateFontOptions} options - 生成选项
+ * @returns {Promise<void>} - 生成完成的 Promise
+ * @example
+ * ```typescript
+ * await generateFont({
+ *   svgFiles: ['/path/to/icon1.svg', '/path/to/icon2.svg'],
+ *   outputDir: '/path/to/output',
+ *   fontName: 'MyIconFont'
+ * });
+ * ```
+ */
+export async function generateFont(options: GenerateFontOptions): Promise<void> {
+  return new Promise((resolve, reject) => {
+    webfontsGenerator({
+      files: options.svgFiles,
+      dest: options.outputDir,
+      fontName: options.fontName,
+      types: ['woff2'],
+      css: false,
+      html: false,
+      order: ['woff2'],
+      templateOptions: {
+        baseClass: 'my-icon',
+        classPrefix: 'my-icon-'
+      }
+    }, (error) => {
+      if (error) {
+        reject(error);
+      } else {
+        resolve();
+      }
+    });
+  });
+}

package/utils/project-detector.ts

@@ -0,0 +1,145 @@
+/**
+ * 项目类型检测器模块
+ * @description 用于检测一个文件夹下的项目类型（uniapp、vue、react）
+ */
+
+import { existsSync, readFileSync } from 'fs';
+import { join } from 'path';
+
+/**
+ * 项目类型枚举
+ */
+export enum ProjectType {
+  /** uniapp 项目 */
+  UNIAPP = 'uniapp',
+  /** Vue 项目 */
+  VUE = 'vue',
+  /** React 项目 */
+  REACT = 'react',
+  /** 未知项目类型 */
+  UNKNOWN = 'unknown'
+}
+
+/**
+ * 检测项目类型
+ * @param {string} directory - 要检测的目录路径
+ * @returns {ProjectType} 项目类型
+ * @example
+ * ```typescript
+ * const projectType = detectProjectType('./my-project');
+ * console.log(projectType); // 输出：ProjectType.VUE
+ * ```
+ */
+export function detectProjectType(directory: string): ProjectType {
+  // 检查是否为 uniapp 项目
+  if (isUniappProject(directory)) {
+    return ProjectType.UNIAPP;
+  }
+
+  // 检查是否为 React 项目
+  if (isReactProject(directory)) {
+    return ProjectType.REACT;
+  }
+
+  // 检查是否为 Vue 项目
+  if (isVueProject(directory)) {
+    return ProjectType.VUE;
+  }
+
+  // 未知项目类型
+  return ProjectType.UNKNOWN;
+}
+
+/**
+ * 检查是否为 uniapp 项目
+ * @param {string} directory - 目录路径
+ * @returns {boolean} 是否为 uniapp 项目
+ */
+function isUniappProject(directory: string): boolean {
+  // uniapp 项目的特征文件
+  const uniappFiles = [
+    join(directory, 'pages.json'),
+    join(directory, 'manifest.json'),
+    join(directory, 'uni.scss')
+  ];
+
+  // 检查是否存在 uniapp 特征文件
+  return uniappFiles.some(file => existsSync(file));
+}
+
+/**
+ * 检查是否为 Vue 项目
+ * @param {string} directory - 目录路径
+ * @returns {boolean} 是否为 Vue 项目
+ */
+function isVueProject(directory: string): boolean {
+  // Vue 项目的特征文件
+  const vueConfigFiles = [
+    join(directory, 'vue.config.js'),
+    join(directory, 'vite.config.js'),
+    join(directory, 'vite.config.ts'),
+    join(directory, 'nuxt.config.js'),
+    join(directory, 'nuxt.config.ts')
+  ];
+
+  // 检查是否存在 Vue 配置文件
+  if (vueConfigFiles.some(file => existsSync(file))) {
+    return true;
+  }
+
+  // 检查 package.json 中是否有 Vue 相关依赖
+  return hasDependency(directory, ['vue', '@vue/cli-service', 'nuxt', 'vite']);
+}
+
+/**
+ * 检查是否为 React 项目
+ * @param {string} directory - 目录路径
+ * @returns {boolean} 是否为 React 项目
+ */
+function isReactProject(directory: string): boolean {
+  // React 项目的特征文件
+  const reactConfigFiles = [
+    join(directory, 'webpack.config.js'),
+    join(directory, 'craco.config.js'),
+    join(directory, 'next.config.js')
+  ];
+
+  // 检查是否存在 React 配置文件
+  if (reactConfigFiles.some(file => existsSync(file))) {
+    return true;
+  }
+
+  // 检查 package.json 中是否有 React 相关依赖
+  return hasDependency(directory, ['react', 'react-dom', 'next', 'gatsby']);
+}
+
+/**
+ * 检查 package.json 中是否有指定的依赖
+ * @param {string} directory - 目录路径
+ * @param {string[]} dependencies - 要检查的依赖名称数组
+ * @returns {boolean} 是否有指定的依赖
+ */
+function hasDependency(directory: string, dependencies: string[]): boolean {
+  const packageJsonPath = join(directory, 'package.json');
+
+  if (!existsSync(packageJsonPath)) {
+    return false;
+  }
+
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
+    
+    // 检查 dependencies、devDependencies 和 peerDependencies
+    const allDependencies = {
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies,
+      ...packageJson.peerDependencies
+    };
+
+    // 检查是否有指定的依赖
+    return dependencies.some(dep => allDependencies[dep]);
+  } catch (error) {
+    // 解析 package.json 失败
+    return false;
+  }
+}