Icon Generation

Overview

The icon generation feature allows you to:

• Fetch SVG icons directly from your Figma designs
• Convert them into an optimized icon font
• Generate a type-safe Flutter class for easy usage

Command Structure

figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file YOUR_FILE_ID \
  --node YOUR_NODE_ID \
  --output ./lib/icons \
  [--direct-svg] \
  [--clean] \
  [--verbose]

Required Parameters

• --token, -t: Your Figma access token
• --file, -f: The Figma file ID (found in the file URL)
• --node, -n: The node ID containing your icons
• --output, -o: Output directory for generated files

Optional Flags

• --direct-svg: Export directly as SVG instead of PDF (requires Figma Professional)
• --clean: Clean output directories before processing
• --verbose, -v: Enable detailed logging

Download Methods

1. PDF Download (Recommended)

figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons

Benefits:

• Higher quality output
• Better vector preservation
• Handles special effects and gradients
• Works with all Figma plans
• More reliable for complex icons

2. Direct SVG Download

figma_flutter_generator icons \
  --token YOUR_FIGMA_TOKEN \
  --file abc123xyz \
  --node 456:789 \
  --output ./lib/icons \
  --direct-svg

Benefits:

• Faster processing
• Simpler workflow
• Best for basic icons

Output Structure

lib/
├── icons/
│   ├── icons.ttf           # Generated icon font file
│   ├── icons.dart          # Flutter icon class definitions
│   ├── pdf/                # (If using PDF download)
│   │   ├── icon1.pdf
│   │   └── icon2.pdf
│   └── svg/                # Final SVG files
│       ├── icon1.svg
│       └── icon2.svg

Using Generated Icons

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

// Use in your widgets
Icon(MyIcons.menu)
Icon(MyIcons.search, size: 24.0, color: Colors.blue)

Best Practices

1. Icon Organization

   • Group icons in a dedicated frame in Figma
   • Use consistent naming conventions
   • Maintain a consistent grid size

2. Icon Design

   • Use simple paths when possible
   • Avoid complex effects that might not convert well
   • Keep icons monochrome for best results

3. File Management

   • Use the --clean flag when regenerating icons
   • Keep icons in a separate Figma file/page
   • Version control your icon font files

Troubleshooting

If you encounter issues:

1. Icons not appearing

   • Ensure icons are properly exported from Figma
   • Check if SVG files are generated correctly
   • Verify the font file is included in your Flutter assets

2. Conversion errors

   • Try using PDF download instead of direct SVG
   • Simplify complex icons
   • Check for unsupported SVG features

3. Quality issues

   • Use the PDF download method for better quality
   • Ensure icons are properly aligned to the grid
   • Check original icon designs for issues

For more help, see the Troubleshooting guide.