Get icon by original name about font_awesome_flutter HOT 19 CLOSED

Thanks for all the work everyone! I think @brianegan is right, it would be hard to make something that would fit everyone's needs, however with all the work that you guys did, customizing the mapping of icons is now a simple task.

from font_awesome_flutter.

Understood -- I might need to think about this one a bit. It will add quite a bit to the maintenance of this lib, and I'm not quite sure how common that use-case is. I'll leave it open for a little bit and see if others need this functionality as well before adding it!

from font_awesome_flutter.

Yes @brianegan , we store the full class in the DB, the function i made can be used by anyone, they will just have to customize it to there needs, and then you dont have to implement anything :)

from font_awesome_flutter.

Just dropping a comment to say that retrieving an icon by their name is also something we'd be interested in. It's the same situation for us, the icon name is retrieved from the server.

By the way, thanks @brianegan for all your effort, your libraries are really making flutter development a lot quicker and easier! They are making a significant difference by making flutter more approachable to other developers.

from font_awesome_flutter.

Changed getFontAwesomeIcon abit to show how to handle regular, solid etc, following font awesome guidline.

IconData getFontAwesomeIcon(String iconName, String fav) {
  if(iconName == '') {
    return FontAwesomeIcons.questionCircle;
  }

  // Handle fav = font awesome version

  var list = iconName.split(' ');
  if(list.length == 1) {
    iconName = list[0];
  }

  if(list.length >= 2) {
      switch(list[0]) {
          case 'far':
              // regular
            break;
          case 'fas':
              // solid
          break;
          case 'fal':
              // light
          break;
          case 'fab':
              // brands
          break;
          default:
              // whatever
      }
    iconName = list[1];
  }

  iconName = iconName.replaceAll('fa-', '');
  iconName = iconName.replaceAll('-', '');

  final filteredIcons = icons
      .where((icon) =>
      icon.title.toLowerCase().contains(iconName.toLowerCase())).toList();
  if(filteredIcons.isEmpty) {
      return FontAwesomeIcons.questionCircle;
  } else {
      return filteredIcons[0].iconData;
  }
}

from font_awesome_flutter.

Heya Mythar -- thanks for writing in. Could you explain the use case for this request? Why not just use FontAwesomeIcons.paintBrush? It's shorter, guaranteed to work, and works with autocomplete.

from font_awesome_flutter.

We store all icon names in SQL by org. names for html usage.
The icon name is pulled from a backend api.

from font_awesome_flutter.

Thx, we hope this goes in :)

from font_awesome_flutter.

@Mythar Sure thing -- and as a heads up, you could definitely write this functionality for your own app if ya need it sooner than later as well. In fact, I think that's the better short-term solution (since it's something ya need for your company, but not sure the wider community needs it / should be responsible for maintaining it).

from font_awesome_flutter.

@luccascorrea Thanks! Glad they're helpful :)

In order to consider this feature further, could you both please elaborate a bit on how you handle the different icon packs? For example, in Font Awesome 4.7.x you could simply use class="fa-paint-brush", but in 5.x you need to select the correct font-pack, e.g. class="fas fa-ambulance" or class="fab fa-accusoft".

What kind of data do you retrieve from your database or backend? The fa-ambulance portion, the fas fa-ambulance, only the ambulance?

from font_awesome_flutter.

In my case, only the ambulance portion is returned.

from font_awesome_flutter.

I think this can be solved with #12 if someone wants to take my work there and extend it further to maintain an internal mapping of the original icon names to IconData definition.

from font_awesome_flutter.

Thanks to @pplante's work, I was able to generate an additional file for this library that provides access to the icons by their original name. Please see this branch:

https://github.com/brianegan/font_awesome_flutter/tree/icon-map

You can run the example app found in the example folder to test it for yourselves to see if it looks right.

However, one problem I can spot: If an Icon exists in "Regular" and "Solid" versions, I only include the Regular version (since the icon names are exactly the same: address-book and address-book). Depending on the situation, your company may want to use the Solid version in that case.

Overall, I think using a generator to do this work might be a viable solution, but I still think it might make sense to maintain a mapping of Icon Name -> Correct Icon in your own codebases rather than in this library, because some companies might want solid icons whereas other companies want the Regular icons (or maybe only Solid Icons in some situations / Regular icons in other situations) and there's no way to support all of these cases and nuances. It's really dependent on what your team / company / designers want to go with.

You could also be relying on FontAwesome 4.7.0 names, which use address-book and address-book-o in your Database. That would not be handled by this generator since the names have changed for 5.x.

Overall, I'm still of the opinion that this should probably not belong to the core library, and should be implemented by your teams since there are so many nuances that might be different between companies.

from font_awesome_flutter.

I made this small function to work on top of ur code, using the first Gallery example.
In the getFontAwesomeIcon you could setup stuff for Regular and Solid :)

IconData getFontAwesomeIcon(String iconName) {
  if(iconName == '') {
    return FontAwesomeIcons.questionCircle;
  }

  var list = iconName.split(' ');
  if(list.length == 1) {
    iconName = list[0];
  }
  if(list.length >= 2) {
    iconName = list[1];
  }

  iconName = iconName.replaceAll('fa-', '');
  iconName = iconName.replaceAll('-', '');

  final filteredIcons = icons
      .where((icon) =>
      icon.title.toLowerCase().contains(iconName.toLowerCase())).toList();
  if(filteredIcons.isEmpty) {
      return FontAwesomeIcons.questionCircle;
  } else {
      return filteredIcons[0].iconData;
  }
}

class IconDefinition implements Comparable {
  final IconData iconData;
  final String title;

  IconDefinition(this.iconData, this.title);

  @override
  String toString() => 'IconDefinition{iconData: $iconData, title: $title}';

  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
          other is IconDefinition &&
              runtimeType == other.runtimeType &&
              iconData == other.iconData &&
              title == other.title;

  @override
  int get hashCode => iconData.hashCode ^ title.hashCode;

  @override
  int compareTo(other) => title.compareTo(other.title);
}

final icons = <IconDefinition>[
    new IconDefinition(FontAwesomeIcons.accessibleIcon, 'accessibleIcon'),
    new IconDefinition(FontAwesomeIcons.accusoft, 'accusoft'),
…...

from font_awesome_flutter.

Thanks @Mythar -- looking at your implementation, it seems like you might be storing the entire class in your DB? e.g. far address-book and fas address-book, and that's how you could split on the iconName?

Or are you using the old 4.7.0 names alone, which might not work for 5.x? Overall, talking through this a bit more, I really feel like I can't provide a good generic solution that would work for everyone. Folks could store these differently in their own DBs, or could rely on different versions (as you've shown in your second example).

I've decided that this shouldn't be supported by this lib, since I can't make the correct decisions that would work for everyone, and I really think this needs to be implemented in-house, where you have full control over your database naming schemas, the version of Font Awesome your company supports, and the individual icons you want to use (solid vs regular in 5.x, perhaps even using solid for some cases and regular in others).

Using the scripts located in the tool directory of this library, you could easily create your own version of that map / function that would work for your company and its needs.

from font_awesome_flutter.

@Mythar another alternative for anyone else that needs to store the FontAwesome icon in a DB as part of a string is something like this-

class FontAwesomeStringBuilder extends StatelessWidget {

  final String text;
  final String textFontFamily;
  final String fontAwesomeFontFamily;

  const FontAwesomeStringBuilder({
    Key key,
    @required this.text = "\uf535 some text here", // use \u for FontAwesome icons
    @required this.textFontFamily,
    this.fontAwesomeFontFamily = 'FontAwesome5Pro-Regular',

  }) : assert (text != null),
       super(key: key);

  @override
  Widget build(BuildContext context) {
    return RichText(text: _buildText(text));
  }

  TextSpan _buildText(String text) {
    final children = <TextSpan>[];
    final runes = text.runes;

    for(int i = 0; i < runes.length; /* blank */ ) {
      int current = runes.elementAt(i);

      final bool isUnicode = current > 255;
      final shouldBreak = isUnicode
        ? (x) => x <= 255
        : (x) => x > 255;

      final chunk = <int>[];
      while(!shouldBreak(current)) {
        chunk.add(current);
        if (++i >= runes.length) break;
        current = runes.elementAt(i);
      }

      children.add(TextSpan(
        text: String.fromCharCodes(chunk),
        style: TextStyle(
          fontSize: 20,
          fontFamily: isUnicode ? fontAwesomeFontFamily : textFontFamily,
        )
      ));
    }
    return TextSpan(children: children);
  }

}

from font_awesome_flutter.

We had this problem, so we wrote a quick library/package to deal with it http://github.com/VoltaireApp/icons_helper (https://pub.dev/packages/icons_helper). It also consolidates Font Awesome icons and Material Icons into a "try FA first but if not resolved, get Material" single namespace (we had a requirement where a push notification would have an icon string that may or may not really exist, it was uncontrolled data from outside systems and we'd just like to have a fighting change to get an icon to resolve to it even if it wasn't perfect from the major icon libs, so we did this).

It's not even close to perfect, tons of enhancements possible, but it gets the job done and still keeps efficiencies related to the core reason this isn't actually possible in Flutter (there's all kinds of weirdness with tree shaking, etc that this would represent that impacts how reflection, etc is done in Flutter from my understanding, but who knows, I am a total hack so maybe not...although I am pretty sure this method defeats tree shaking for any icons not used, but that is kind of the point at some level using strings, since those are unlimited at runtime...).

But it gets the job done and stays outta the way. This has now been updated for current versions of Flutter (we wrote it last year and were breaking changes to current revs, this is now fixed).

from font_awesome_flutter.

yes so good if u could add this useful option.

from font_awesome_flutter.

Any update on this ?

from font_awesome_flutter.