使用 Node.js 脚本将阿里巴巴 Iconfont 图标库集成到 Flutter 项目

本脚本旨在简化将阿里巴巴 Iconfont 图标库集成到 Flutter 项目的过程。它将自动完成以下步骤：

将指定目录下的 download.zip 文件（包含云图标库）解压缩。
将解压缩出来的 .ttf 文件放到指定的文件夹下。
根据解压缩文件中的 html 文件生成对应的 Dart 文件（icons.dart），包含图标类和对应的 Unicode。
将关键变量提出来，以便通过命令行方式传入。
追加 .ttf 资源文件路径到 pubspec.yaml 文件。

使用方法

首先，安装 Node.js 和 npm，然后创建一个空文件夹，进入该文件夹并打开终端。
在终端中输入以下命令，安装必要的 Node 模块：

npm install adm-zip cheerio fs-extra commander

创建一个新的 JavaScript 文件，命名为 download.js。
将以下代码复制到 download.js 文件中：

const AdmZip = require('adm-zip');
const cheerio = require('cheerio');
const fs = require('fs-extra');
const { program } = require('commander');

program
  .option('-s, --source <type>', 'zip file source path')
  .option('-d, --dest <type>', 'destination directory for ttf files')
  .option('-p, --pubspec <type>', 'path to pubspec.yaml')
  .parse(process.argv);

const source = program.source;
const dest = program.dest;
const pubspec = program.pubspec;

if (!source || !dest || !pubspec) {
  console.log('Please provide all required options');
  process.exit(1);
}

const zip = new AdmZip(source);
const entries = zip.getEntries();

const ttfFiles = [];

entries.forEach((entry) => {
  if (entry.entryName.endsWith('.ttf')) {
    const ttfPath = `${dest}/${entry.entryName.split('/').pop()}`;
    fs.ensureDirSync(dest);
    fs.writeFileSync(ttfPath, entry.getData());
    ttfFiles.push(ttfPath);
  }
});

const $ = cheerio.load(zip.readAsText('demo_index.html'));

const iconClasses = [];

$('li.icon-item').each((i, el) => {
  const className = $(el).find('.icon-fontclass').text();
  const unicode = $(el).find('.icon-unicode').text();
  iconClasses.push({ className, unicode });
});

const content = iconClasses
  .map(
    (icon) =>
      `static const IconData ${icon.className} = IconData(${icon.unicode}, fontFamily: 'iconfont');`
  )
  .join('
');

fs.writeFileSync('icons.dart', content);

const pubspecContent = fs.readFileSync(pubspec, 'utf-8');
const pubspecLines = pubspecContent.split('
');

const index = pubspecLines.findIndex((line) => line.includes('fonts:')) + 1;

ttfFiles.forEach((ttf) => {
  pubspecLines.splice(index, 0, `    - family: 'iconfont'
      fonts:
        - asset: ${ttf}`);
});

fs.writeFileSync(pubspec, pubspecLines.join('
'));

console.log('Done!');

在终端中输入以下命令，运行脚本：

node download.js --source /path/to/download.zip --dest /path/to/ttf/directory --pubspec /path/to/pubspec.yaml

将 /path/to/download.zip 替换为下载的 zip 文件的路径，将 /path/to/ttf/directory 替换为您想要放置 .ttf 文件的目录的路径，将 /path/to/pubspec.yaml 替换为您的项目中 pubspec.yaml 文件的路径。

运行脚本后，它将解压缩 zip 文件并将 .ttf 文件放到指定的目录中。然后，它将创建一个名为 icons.dart 的文件，其中包含从 html 文件中提取的图标类和对应的 Unicode。最后，它将在您的 pubspec.yaml 文件中追加 .ttf 资源文件路径。
运行 flutter pub get 以安装新的依赖项。
现在，您可以在您的 Flutter 项目中使用这些图标。要使用图标，请将其添加到您的项目中的 pubspec.yaml 文件中：

fonts:
  - family: 'iconfont'
    fonts:
      - asset: path/to/ttf/file.ttf

然后，在您的代码中，使用 Icon 组件和从 icons.dart 文件中导入的 IconData：

import 'package:flutter/material.dart';
import 'icons.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Icon(MyIcons.icon_name);
  }
}

您可以在 icons.dart 文件中查找图标名称和类名。

附加说明

该脚本使用了以下 Node.js 模块：
- adm-zip 用于解压缩 zip 文件。
- cheerio 用于解析 html 文件。
- fs-extra 用于文件操作。
- commander 用于命令行参数解析。
该脚本假设您的 download.zip 文件中包含 demo_index.html 文件，该文件包含图标类和 Unicode 信息。
如果您的项目中没有 pubspec.yaml 文件，则需要手动创建一个。
该脚本仅包含基本功能，您可以根据您的需求进行修改。

希望该脚本能帮助您轻松地将阿里巴巴 Iconfont 图标库集成到 Flutter 项目中。

注意： 由于脚本需要访问您的项目文件夹，请确保您信任该脚本来源。

使用 Node.js 脚本将阿里巴巴 Iconfont 图标库集成到 Flutter 项目