使用 nodeJs 脚本实现以组件形式导入 svg

本来想研究如何在 webpack 工程里以动态 import 的形式导入 svg 组件，简单了解无果后，遂改为统一导入的形式

考虑到资源文件数量庞大，一个一个敲很蠢，所以叫 deepseek 写一个 nodejs 脚本，只需要 cv 操作便可实现一键导入

const fs = require('fs');
const path = require('path');

// 获取脚本所在目录路径
const scriptDir = __dirname;

// 读取目录下的所有文件
const files = fs.readdirSync(scriptDir);

// 遍历处理每个文件
files.forEach(file => {
  // 获取文件信息以判断是否为文件
  const filePath = path.join(scriptDir, file);
  const isFile = fs.statSync(filePath).isFile();

  // 仅处理 .svg 文件
  if (isFile && path.extname(file) === '.svg') {
    // 去除扩展名获取文件名
    const fileName = path.basename(file, '.svg');
    
    // 生成并打印 import 语句
    console.log(
      `import { ReactComponent as ${fileName} } from '@/assets/svgIcons/pages/${fileName}.svg';`
    );
  }
});

import React from 'react'
import { ReactComponent as bianji } from '@/assets/svgIcons/pages/bianji.svg';
import { ReactComponent as buzhoupeizhi } from '@/assets/svgIcons/pages/buzhoupeizhi.svg';
import { ReactComponent as chongshi } from '@/assets/svgIcons/pages/chongshi.svg';
import { ReactComponent as daochu } from '@/assets/svgIcons/pages/daochu.svg';
import { ReactComponent as del } from '@/assets/svgIcons/pages/delete.svg';
import { ReactComponent as keyongbanben } from '@/assets/svgIcons/pages/keyongbanben.svg';
import { ReactComponent as lishibanben } from '@/assets/svgIcons/pages/lishibanben.svg';
import { ReactComponent as renwurizhi } from '@/assets/svgIcons/pages/renwurizhi.svg';
import { ReactComponent as back } from '@/assets/svgIcons/pages/return.svg';
import { ReactComponent as shunxulianxiafa } from '@/assets/svgIcons/pages/shunxulianxiafa.svg';
import { ReactComponent as stop } from '@/assets/svgIcons/pages/stop.svg';
import { ReactComponent as view } from '@/assets/svgIcons/pages/view.svg';
import { ReactComponent as xiafarizhi } from '@/assets/svgIcons/pages/xiafarizhi.svg';
import { ReactComponent as xiangqing } from '@/assets/svgIcons/pages/xiangqing.svg';
import { ReactComponent as yingshepeizhi } from '@/assets/svgIcons/pages/yingshepeizhi.svg';
import { ReactComponent as zhixing } from '@/assets/svgIcons/pages/zhixing.svg';


const Icons: Record<string, any> = {
  bianji,buzhoupeizhi,chongshi,daochu,del,keyongbanben,lishibanben,renwurizhi,back,shunxulianxiafa,stop,view,
  xiafarizhi,xiangqing,yingshepeizhi,zhixing
}

interface SvgIconProps extends React.SVGAttributes<SVGAElement> {
  /** icon名称 */
  name: string,
}

export default function SvgIcon(props: SvgIconProps) {
  const {name, ...rest} = props

  const Icon = Icons[name]

  return Icon ? <Icon /> : null
}