构建全平台的SVG图标库

前言

最近在整uni-app的图标库，不仅需要能兼容全平台，还得配合修改图标名称，并且还得方便导入，这确实难到了。在经历过一系列资料查询后最终决定使用node做一套图标文件自动提取并且导出的系统，现在开始一步一步搭建吧。

实战操作

首先我们需要一个项目，我是直接使用原有的项目上进行操作，如果没有项目的话可以使用vite构建一个。

在项目完成之后，新建assets文件夹用来存放svg文件，目前版本svg文件是使用阿里巴巴矢量图标库中的symbol导出格式文件，直接放进去就可以了。
在这之后创建svgs文件夹，里面存放导出的ts/js文件（目前不用动创建即可）。
最后创建script.js文件，这就是我们的主运行文件了，在里面要写node运行的脚本。

// 最后我们会有这几个新建的文件/文件夹
assets
svgs
script.js

脚本实现

在编写script.js文件之前，先理一遍我们需要的思路

1. 获取assets文件夹里保存的数据
2. 将文件里的内容进行特定的解析生成我们需要的内容(也就是最终导出ts/js脚本内容)
3. 导出我们解析完成的内容并且生成文件

获取数据

获取数据操作在三步中算是最简单的一步了，只需要调动node自带的API即可，废话不多说直接上代码

// 导入各类的包文件
const path = require('path');
const fs = require('fs');
const iconfontDirPath = path.resolve(__dirname, './assets'); // 获取需要解析的svg图片目录
const currentPath = path.resolve(__dirname, './'); // 当前目录，即icons目录
const svgPath = path.resolve(__dirname, './svgs'); // 保存导入文件的目录
// 访问保存文件的目录并清空，在之后生成的新文件会代替
fs.readdirSync(svgPath).forEach((item) => {
   
  const fPath = path.join(svgPath, item);
  fs.unlinkSync(fPath);
});
// 保存由多个文件内容拼接的字符串
let res = '';
// 需要解析的svg文件目录
fs.readdirSync(iconfontDirPath).forEach((item) => {
   
  const fPath = path.join(iconfontDirPath, item)