使用 Node.js 脚本将阿里 Iconfont 图标压缩包解压到 Flutter 项目中
使用 Node.js 脚本将阿里 Iconfont 图标压缩包解压到 Flutter 项目中/n/n本文提供一个 Node.js 脚本,可以将阿里 Iconfont 图标压缩包解压到 Flutter 项目中,并生成对应 Dart 文件,方便在 Flutter 项目中使用图标。/n/n### 需求/n/n1. 将指定目录下的 'download.zip' 文件的云图标库文件解压出来。/n2. 将解压出来的 ttf 文件放到指定目录下。/n3. 根据解压文件中的 html 文件生成对应的 dart 文件。/n4. 将上面的关键变量提出来,可以在调用 js 的时候通过命令行的方式传入上面的变量。/n5. 追加 tff 资源文件路径到 'pubspec.yaml' 文件下内容。/n/n### Node.js 脚本/n/njavascript/nconst fs = require('fs');/nconst path = require('path');/nconst AdmZip = require('adm-zip');/nconst cheerio = require('cheerio');/n/n// 获取命令行参数/nconst args = process.argv.slice(2);/nconst zipPath = args[0]; // 'download.zip' 文件路径/nconst outputDir = args[1]; // 输出目录/n/n// 解压缩 zip 文件/nconst zip = new AdmZip(zipPath);/nconst zipEntries = zip.getEntries();/nzipEntries.forEach((entry) => {/n if (entry.isDirectory) {/n // 创建目录/n const dirPath = path.join(outputDir, entry.entryName);/n fs.mkdirSync(dirPath, { recursive: true });/n } else {/n // 解压文件/n const entryData = zip.readFile(entry.entryName);/n const filePath = path.join(outputDir, entry.entryName);/n fs.writeFileSync(filePath, entryData, { flag: 'w' });/n }/n});/n/n// 生成 dart 文件/nconst htmlPath = path.join(outputDir, 'demo_index.html');/nconst htmlData = fs.readFileSync(htmlPath);/nconst $ = cheerio.load(htmlData);/nconst icons = [];/n$('ul.icon-list li a').each((i, elem) => {/n const name = $(elem).children('.icon-name').text();/n const code = $(elem).children('.icon-code').text().replace('//', '////');/n icons.push({ name, code });/n});/nconst dartPath = path.join(outputDir, 'icons.dart');/nconst dartContent = icons.map((icon) => `static const IconData ${icon.name} = IconData(0x${icon.code}, fontFamily: 'iconfont');`).join('/n');/nfs.writeFileSync(dartPath, dartContent, { flag: 'w' });/n/n// 追加 tff 资源文件路径到 'pubspec.yaml' 文件下/nconst pubspecPath = path.join(outputDir, 'pubspec.yaml');/nconst pubspecData = fs.readFileSync(pubspecPath, 'utf-8');/nconst fontRegExp = /fonts:/s*/n/s*/- family:/s*iconfont/s*/n/s*fonts:/s*/n/s*- asset:/s*(.+)/s*/n/m;/nconst match = pubspecData.match(fontRegExp);/nif (match) {/n const fontAsset = match[1];/n const newFontAsset = ` - asset: ${path.join(outputDir, fontAsset)}/n`;/n const newPubspecData = pubspecData.replace(fontRegExp, `$&${newFontAsset}`);/n fs.writeFileSync(pubspecPath, newPubspecData, { flag: 'w' });/n} else {/n console.error('Failed to find fonts section in pubspec.yaml');/n}/n/n/n### 使用方式/n/n1. 安装必要的依赖:/n/n /nnpm install adm-zip cheerio/n /n/n2. 运行脚本:/n/n /nnode iconfont.js download.zip output/dir/path/n /n/n 其中,'download.zip' 是您下载的 Iconfont 压缩包文件的路径,'output/dir/path' 是解压缩后输出的目录路径。/n/n 运行脚本后,会将解压缩后的 ttf 文件放到指定目录下,并生成一个 'icons.dart' 文件,其中包含所有图标的 IconData 定义。同时,脚本还会将 tff 资源文件路径追加到项目的 'pubspec.yaml' 文件下,以便 Flutter 可以正确加载字体。/n
原文地址: https://www.cveoy.top/t/topic/ly3a 著作权归作者所有。请勿转载和采集!