Flutter IconFont Preview

Preview IconFont icons directly in Dart/Flutter code.

在 Dart/Flutter 代码中直接预览 IconFont 图标。

Features / 功能

• 🎨 Inline Icon Preview - Display icon previews directly at IconData definitions

  内联图标预览 - 在 IconData 定义处直接显示图标预览

• ⚙️ Multi-Font Support - Configure multiple TTF font files and FontFamily mappings

  多字体支持 - 配置多个 TTF 字体文件和 FontFamily 映射

• 🔍 Variable Reference Support - Support variable references (e.g., fontFamily: _fontFamily)

  变量引用支持 - 支持变量引用（如 fontFamily: _fontFamily）

• 📦 Auto Import - Automatically discover font configurations from pubspec.yaml

  自动导入 - 从 pubspec.yaml 自动发现字体配置

• 🔄 Hot Reload - Automatically refresh when TTF files change

  热重载 - TTF 文件变化时自动刷新

• 🌓 Theme Adaptive - Different icon colors for light/dark mode

  主题适配 - 浅色/深色模式下使用不同图标颜色

Installation / 安装

1. Open VS Code
2. Press Ctrl+P / Cmd+P
3. Type ext install jochen.iconfont-preview

或者从 VSIX 文件安装：

code --install-extension iconfont-preview-1.0.0.vsix

Usage / 使用

Configuration / 配置

1. Open VS Code Settings (Ctrl+, / Cmd+,)
2. Search for "IconFont Preview"
3. Add your font configurations:

{
  "iconfontPreview.fonts": [
    {
      "fontFamily": "iconfont",
      "ttfPath": "assets/fonts/iconfont.ttf"
    },
    {
      "fontFamily": "MaterialIcons",
      "ttfPath": "path/to/MaterialIcons.ttf"
    }
  ]
}

Auto Import / 自动导入

Use the command palette (Ctrl+Shift+P / Cmd+Shift+P) and run:

IconFont Preview: Import Fonts from Project

This will scan your pubspec.yaml and automatically import font configurations.

Example / 示例

// Icon preview will be displayed here / 这里会显示图标预览
static const IconData settings = IconData(0xe57f, fontFamily: 'MaterialIcons');

// Also supports variable references / 同样支持变量引用
static const String _fontFamily = 'iconfont';
static const IconData home = IconData(0xe846, fontFamily: _fontFamily);

Settings / 配置项

Commands / 命令

Development / 开发

# Install dependencies
npm install

# Compile
npm run compile

# Watch mode
npm run watch

# Package
npm run package

License

MIT

Author

Jochen (jochen0kim@gmail.com)