Create FlutterFlow Icon

This BuildShip workflow converts SVG icons to TTF font files and generates Dart code for FlutterFlow. Optimize icons, create custom fonts, and easily integrate them into your FlutterFlow projects.

Report this template

Select the reason for reporting

Describe the issue in detail

Share template

Link to template

https://templates.buildship.com/template/j-IP5yZTCdFp/

By FlutterFlow

Select an example

Inputs

svg

iconName

adobe

fontName

MyIcon

This is a static example using sample inputs. Remix the template to run it with your own values.

Output

Read me

📖 SVG to FlutterFlow Custom Icon Converter

Overview

Demonstration Video

https://www.loom.com/share/752016e8a8e04d7a80d73bb515d03996?sid=23e0cf93-ae10-4f44-a60c-c728f243d482

This workflow provides a seamless way to convert SVG icons into TTF font files with corresponding Dart class generation for Flutter applications, especially within FlutterFlow projects. The tool is particularly useful for Flutter developers who want to create custom icon fonts from SVG files.

Key Features:

Converts SVG icons to TTF font format.
Generates a corresponding Dart class for Flutter integration.
Optimizes SVG content automatically.
Provides immediate access to both the font file and Dart code.
Integrates directly with FlutterFlow via the 'BuildShip Workflow' library.

Prerequisites:

SVG file(s) ready for conversion.
Basic understanding of Flutter development.
Access to the BuildShip platform.
No additional API keys required.

✍️ How to Use

Step 1: Prepare Your SVG

Ensure your SVG file is properly formatted and contains the desired icon content. The workflow accepts standard SVG markup.

Step 2: Set up the BuildShip Workflow

Access the Workflow: Use the provided BuildShip workflow (the JSON structure you gave).
Trigger: Select the "FlutterFlow Trigger" in BuildShip. This allows direct communication with your FlutterFlow project.
Inputs: The workflow requires these inputs:
- svg: Your SVG markup.
- fontName: Desired name for your font family (e.g., "CustomIcons").
- iconName: Name for the icon (will be used in the Dart class).
Connect: Click "Connect" in BuildShip to activate the workflow and make it ready to receive requests from FlutterFlow.

Step 3: Configure the 'BuildShip Workflow' Library in FlutterFlow

Add the Library: If you haven't already, add the 'BuildShip Workflow' library to your FlutterFlow project from the FlutterFlow Marketplace.
Library Values:
- BuildShip Configuration JSON: Copy the provided JSON configuration from BuildShip and paste it into the BuildShipConfiguration value field in FlutterFlow.
- Authentication: Set to "none" since this workflow doesn't require authentication.

Step 4: Use the Generated Files in Your FlutterFlow Project

Trigger the Workflow: Use the 'Trigger BuildShip Workflow' action in your FlutterFlow project to send the svgContent, fontName, and iconName to the BuildShip workflow.
Access Results: The workflow will return:
1. A TTF font file URL (ttf)
2. A Dart class file URL (dart)
Utilize in FlutterFlow: Use these URLs to incorporate the icon font and Dart class into your FlutterFlow project. You'll likely need to use FlutterFlow's custom code actions or widgets to achieve this.

🔗 Resources

BuildShip Documentation:https://docs.buildship.com/
FlutterFlow Marketplace:http://marketplace.flutterflow.io
FlutterFlow Documentation:https://docs.flutterflow.io/

Tips for Best Results

Ensure your SVG is optimized (the workflow includes automatic optimization).
Use meaningful icon names that follow Dart naming conventions.
Keep SVG content simple and avoid complex gradients or effects.

Limitations

The SVG should be properly formatted and valid.
Complex SVG features like gradients may not be fully supported.
The font name should be a valid Dart identifier.

Troubleshooting

If you encounter issues:

Verify your SVG is valid and properly formatted.
Check that icon names follow Dart naming conventions.
Ensure the SVG viewBox attribute is properly set.