Gen icon fonts
- Access: https://icomoon.io/app/#/select
- Select tab “Selection”, select/upload svg fonts
When you import your icons which exported from figma, may you face this error
=> To solve this, install sketch -> New file -> drag & drop svg file -> Expand icon (left panel) -> Select all path => Select Layer menu -> Convert to Outlines
Then select icon (left panel) -> Select “Make exportable” (right panel) -> Select “svg” -> Export
- Select tab “Generate Font F”
- Download font, extract and copy .ttf font file to project
put font file to project
- Define font in flutter project pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/base/icons/
- assets/base/fonts/
- assets/app/icons/
- assets/app/fonts/fonts:
- family: icomoon
fonts:
- asset: assets/app/fonts/icomoon/icomoon.ttf
- Use
Text('hello \ue901', style: normalTextStyle(13, color: Colors.white, fontFamily: 'icomoon'),),# or with IconDatastatic const IconData home = IconData(0xe901, fontFamily: 'icomoon', color: Colors.white);
Note: e901 is the code of icon
Flutter custom chat emotion text
https://gist.github.com/nhancv/589832913f61f92479a1483a234cad1c#file-flutter_emotion_text-dart
Custom TextEditingController to style multi color icon font
Flutter Insert text to TextField
https://gist.github.com/nhancv/7181eb1706df726f184e043d6d9f5a31#file-flutter_insert_text-dart
@nhancv