Flutter SVG转换到图标字体插件svg_fetch_to_icon_font的使用

Flutter SVG转换到图标字体插件svg_fetch_to_icon_font的使用

svg_fetch_to_icon_font 是一个强大的命令行工具，可以从Figma获取SVG图标并将其转换为图标字体，同时处理Figma变量以生成Flutter主题文件。

特性

  • 🔄 通过Figma API直接从Figma获取SVG图标
  • 🎨 将SVG转换为图标字体，并生成对应的Flutter类
  • 🎯 从Figma变量生成Flutter主题文件
  • 📥 支持PDF和SVG图标下载
  • 📝 详细的操作日志记录

图标下载类型

该工具支持两种从Figma下载图标的模式：

  1. 直接SVG下载（推荐）

    • 更快的处理速度
    • 更高的质量
    • 使用 --direct-svg 标志
    • 需要Figma专业计划
    # macOS
brew install pdf2svg

# Linux
sudo apt-get install pdf2svg

# Windows
# 下载地址: http://www.cityinthesky.co.uk/opensource/pdf2svg/

  2. PDF下载（默认）

    • 适用于所有Figma计划
    • 自动将PDF转换为SVG
    • 稍微慢一些的处理速度
    • 需要安装 pdf2svg
    # macOS
brew install pdf2svg

# Linux
sudo apt-get install pdf2svg

# Windows
# 下载地址: http://www.cityinthesky.co.uk/opensource/pdf2svg/

安装

dart pub global activate svg_fetch_to_icon_font

分步指南

1. 获取你的Figma访问令牌
  1. 登录到你的Figma账户
  2. 转到设置 > 账户设置
  3. 在个人访问令牌部分，点击“创建新令牌”
  4. 复制你的访问令牌用于命令中
2. 查找你的Figma文件和节点ID
  1. 打开包含图标的Figma文件
  2. 文件ID在URL中：https://www.figma.com/file/XXXXXX/... （XXXXXX是你的文件ID）
  3. 右键点击包含图标的框架
  4. 选择“复制/粘贴为” → “复制链接”
  5. 节点ID是复制链接中 node-id= 后面的部分
3. 设置你的项目
  1. 创建一个目录作为你的图标字体项目
  2. 如果需要，初始化一个新的Flutter/Dart项目
  3. 创建一个输出目录以存放生成的文件

使用示例

图标字体生成与不同下载类型
# 使用PDF下载生成图标字体（默认）
svg_fetch_to_icon_font icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons

# 使用直接SVG下载生成图标字体
svg_fetch_to_icon_font icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons \
  --direct-svg
主题生成自变量
# 从Figma变量生成主题文件
svg_fetch_to_icon_font variables \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --output ./lib/theme

# 清理输出
svg_fetch_to_icon_font variables \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --output ./lib/theme \
  --clean

输出文件结构

运行命令后，你将得到以下文件结构：

your_project/
├── lib/
│   ├── icons/
│   │   ├── icons.ttf              # 生成的图标字体文件
│   │   ├── icons.dart             # Flutter图标类定义
│   │   ├── pdf/                   # （如果使用默认PDF下载）
│   │   │   ├── icon1.pdf
│   │   │   └── icon2.pdf
│   │   └── svg/                   # （最终SVG文件，无论哪种方法）
│   │       ├── icon1.svg
│   │       ├── icon2.svg
│   │       └── ...
│   └── theme/                     # （如果使用变量命令）
│       ├── colors.dart            # 颜色定义
│       ├── typography.dart        # 文本样式定义
│       └── theme.dart             # 主题配置

使用生成的图标在Flutter中

import 'package:your_project/icons/icons.dart';

// 在小部件中使用图标
Icon(MyIcons.menu)
Icon(MyIcons.search, size: 24.0, color: Colors.blue)

使用生成的主题

import 'package:your_project/theme/theme.dart';

// 在MaterialApp中使用
MaterialApp(
  theme: AppTheme.light(),
  darkTheme: AppTheme.dark(),
  // ...
)

要求

  • Dart SDK >=2.19.0 <4.0.0
  • Flutter（用于主题生成）
  • icon_font_generator（自动安装）

开发

要为这个包贡献代码：

  1. 克隆仓库
  2. 安装依赖：
    dart pub get
  3. 运行测试：
    dart test

更多关于Flutter SVG转换到图标字体插件svg_fetch_to_icon_font的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter SVG转换到图标字体插件svg_fetch_to_icon_font的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


svg_fetch_to_icon_font 是一个用于将 SVG 图标转换为图标字体的 Flutter 插件。这个插件可以帮助开发者将 SVG 文件打包成字体文件，并在 Flutter 应用中使用这些字体作为图标。

以下是使用 svg_fetch_to_icon_font 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 svg_fetch_to_icon_font 插件的依赖：

dev_dependencies:
  svg_fetch_to_icon_font: ^0.0.1

然后运行 flutter pub get 来获取依赖。

2. 配置插件

在项目的根目录下创建一个 icon_font_config.yaml 文件，用于配置 SVG 图标的来源和输出的字体文件路径。

# icon_font_config.yaml
svg_paths:
  - assets/svg/icons/ # SVG 图标所在的目录
output_font_path: lib/fonts/icon_font.ttf # 输出的字体文件路径
output_icon_metadata: lib/fonts/icon_font.dart # 输出的图标元数据文件路径

3. 运行插件

在终端中运行以下命令来生成图标字体文件和元数据文件：

flutter pub run svg_fetch_to_icon_font

这个命令会根据 icon_font_config.yaml 中的配置，将指定的 SVG 图标转换为字体文件，并生成一个包含图标映射的 Dart 文件。

4. 在 Flutter 应用中使用生成的图标字体

生成的 icon_font.dart 文件会包含一个 IconFont 类，其中包含了所有图标的映射。你可以在你的 Flutter 应用中使用这些图标。

import 'package:flutter/material.dart';
import 'fonts/icon_font.dart'; // 导入生成的图标字体文件

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SVG to Icon Font Example'),
        ),
        body: Center(
          child: Icon(
            IconFont.icon_name, // 使用生成的图标
            size: 48.0,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

5. 更新字体文件

如果你在 assets/svg/icons/ 目录中添加或删除了 SVG 文件，只需再次运行 flutter pub run svg_fetch_to_icon_font 命令来更新字体文件和元数据文件。

注意事项

  • 确保你的 SVG 文件是有效的，并且不包含不支持的特性。
  • 生成的字体文件需要添加到 pubspec.yaml 中的 fonts 部分：
flutter:
  fonts:
    - family: IconFont
      fonts:
        - asset: lib/fonts/icon_font.ttf
回到顶部