别搞虚的宏大叙事,聊聊我给团队手写前端 CLI 工具踩过的坑

package main

import (
	"bytes"
	"fmt"
	"os"
	"path/filepath"
	"regexp"
	"strings"
	"sync"
	"text/template"
)

// 组件模板
const componentTpl = `import React from 'react';

export const {{.Name}} = (props: React.SVGProps<SVGSVGElement>) => (
  {{.Content}}
);
`

type IconData struct {
	Name    string
	Content string
}

func sanitizeSVG(raw []byte) string {
	svg := string(raw)
	// 干掉 xml 声明和不必要的无用属性
	regXml := regexp.MustCompile(`<\?xml.*?\?>`)
	svg = regXml.ReplaceAllString(svg, "")

	// 强制把 fill 替换为 currentColor，方便 CSS 控制
	regFill := regexp.MustCompile(`fill="[^"]*"`)
	svg = regFill.ReplaceAllString(svg, `fill="currentColor"`)

	// 简单粗暴替换为 JSX 属性 (真实场景建议用更严谨的词法解析)
	svg = strings.ReplaceAll(svg, "class=", "className=")
	return strings.TrimSpace(svg)
}

func processFile(srcPath, outDir string, tpl *template.Template) error {
	baseName := filepath.Base(srcPath)
	ext := filepath.Ext(baseName)
	componentName := "Icon" + strings.Title(strings.TrimSuffix(baseName, ext))

	raw, err := os.ReadFile(srcPath)
	if err != nil {
		return err
	}

	cleanContent := sanitizeSVG(raw)
	var buf bytes.Buffer
	if err := tpl.Execute(&buf, IconData{Name: componentName, Content: cleanContent}); err != nil {
		return err
	}

	targetPath := filepath.Join(outDir, componentName+".tsx")
	return os.WriteFile(targetPath, buf.Bytes(), 0644)
}

func main() {
	srcDir := "./svgs"
	outDir := "./src/components/icons"
	os.MkdirAll(outDir, 0755)

	tpl := template.Must(template.New("icon").Parse(componentTpl))
	files, _ := filepath.Glob(filepath.Join(srcDir, "*.svg"))

	var wg sync.WaitGroup
	// 避免句柄耗尽，可以加个 channel 控制并发度，这里演示简化处理
	for _, f := range files {
		wg.Add(1)
		go func(path string) {
			defer wg.Done()
			if err := processFile(path, outDir, tpl); err != nil {
				fmt.Printf("处理失败 %s: %v\n", path, err)
			}
		}(f)
	}

	wg.Wait()
	fmt.Printf("处理完毕，共生成 %d 个组件。\n", len(files))
}