如何获取Material Icon连字名称的TypeScript枚举并保持更新？

问题描述 #

我在Angular项目中使用mat-icon组件，该组件通过元素内容中的连字名称（如warning、error、home、brightness_1等）指定图标。目前只能在Google的字体浏览器中找到完整的连字名称列表，每次查找虽可行，但我希望将所有连字名称整理为TypeScript枚举，作为字符串常量供IDE自动提示。我可以爬取该页面生成枚举并复制粘贴，但不想每次图标更新都重复操作。请问如何获取可随字体更新的完整命名连字列表？

解决方案 #

方法1：利用官方npm包元数据自动生成 #

Material Icons官方维护的npm字体包自带完整图标元数据，可通过脚本自动生成枚举：

• 安装官方字体包：npm install @material-design-icons/font --save-dev
• 在项目根目录创建generate-icon-enum.ts脚本：

  import * as fs from 'fs';
  import * as path from 'path';
  
  // 定位到官方包的元数据文件
  const metadataPath = path.join(__dirname, 'node_modules', '@material-design-icons', 'font', 'metadata.json');
  const metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'));
  
  // 提取图标名称并生成TypeScript枚举
  const enumLines = Object.keys(metadata.icons)
    .map(name => `  ${name.toUpperCase()} = '${name}',`)
    .join('\n');
  const enumContent = `export enum MaterialIcons {\n${enumLines}\n}`;
  
  // 将枚举写入项目目录
  fs.writeFileSync(path.join(__dirname, 'src', 'app', 'material-icons.enum.ts'), enumContent);
  

• 在package.json中添加生成脚本：

  "scripts": {
    "generate-icons": "ts-node generate-icon-enum.ts"
  }
  

• 每次更新字体包后，执行npm run generate-icons即可自动同步最新图标枚举，IDE会实时识别新增的图标名称。

方法2：直接使用社区维护的类型包 #

有社区同步更新的TypeScript类型包，无需手动生成：

• 安装类型包：npm install @types/material-icons --save-dev
• 直接在代码中导入使用，IDE会自动提示所有图标名称：

  import { MaterialIcons } from '@types/material-icons';
  
  // 示例：使用时自动补全图标名称
  const currentIcon: MaterialIcons = 'error';
  

• 官方图标库更新后，只需升级该类型包即可获取最新的图标名称提示。

方法3：webpack插件自动同步（适用于自定义webpack配置的项目） #

编写简单的webpack插件，在构建时自动更新枚举文件：

• 创建icon-enum-plugin.js插件文件：

  const fs = require('fs');
  const path = require('path');
  
  class IconEnumPlugin {
    apply(compiler) {
      compiler.hooks.beforeCompile.tap('IconEnumPlugin', () => {
        const metadataPath = path.join(__dirname, 'node_modules', '@material-design-icons', 'font', 'metadata.json');
        const metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf-8'));
        const enumLines = Object.keys(metadata.icons)
          .map(name => `  ${name.toUpperCase()} = '${name}',`)
          .join('\n');
        const enumContent = `export enum MaterialIcons {\n${enumLines}\n}`;
        fs.writeFileSync(path.join(__dirname, 'src', 'app', 'material-icons.enum.ts'), enumContent);
      });
    }
  }
  
  module.exports = IconEnumPlugin;
  

• 在webpack.config.js中注册插件，确保每次构建都自动同步最新图标列表。

内容的提问来源于stack exchange，提问作者Michael Hoffmann