Giter VIP home page Giter VIP logo

flutter-icons's Introduction

English | 简体中文

flutter_icons

pub package

Customizable Icons for Flutter,Inspired by react-native-vector-icons

Notice

  1. v1.0.0 has major Api changes, please be careful to upgrade
  2. icon names that begin with a number are preceded by a $prefix
  3. icon named with the dart keyword have the _ suffix added

Bundled Icon Sets

Browse all.

Usage

To use this plugin, add flutter_icons as a dependency in your pubspec.yaml file.

Widget

IconToggle

Prop Description
selectedIconData Icon is displayed when value is true
unselectedIconData Icon is displayed when value is false
activeColor When value is true, the icon color is displayed
inactiveColor When value is false, the icon color is displayed
value Whether this IconToggle is selected.
onChanged Called when the value of the IconToggle should change.
duration The duration of the transition from selected Icon to unselected Icon
reverseDuration he duration of the transition from unselected Icon to selected Icon
transitionBuilder Transition animation function between the selected Icon and the unselected Icon

Example

// Import package
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter/material.dart';

// 1.0.0 version used
Icon(AntDesign.stepforward),
Icon(Ionicons.ios_search),
Icon(FontAwesome.glass),
Icon(MaterialIcons.ac_unit),
Icon(FontAwesome5.address_book),
Icon(FontAwesome5Solid.address_book),
Icon(FontAwesome5Brands.$500px)

// After 1.1.0, the FlutterIcons class is provided to access all Icons
// Icon name in the original basis added icon set abbreviation name as suffix
// Hereinafter referred to as the following
//Ant Design Icons -> ant,
//Entypo Icons -> ent,
//Evil Icons -> evi,
//Feather Icons -> fea,
//Font Awesome Icons -> faw,
//Font Awesome 5 Regular -> faw5
//Font Awesome 5 Solid -> faw5s
//Font Awesome 5 Brands -> faw5b
//Foundation Icons -> fou,
//Ionicons Icons -> ion,
//Material Community Icons -> mco,
//Material Icons -> mdi,
//Octicons Icons -> oct,
//Simple Line Icons -> sli,
//Zocial Icons -> zoc,
//Weather Icons -> wea
Icon(FlutterIcons.stepforward_ant)
Icon(FlutterIcons.html5_faw)
...

// Previous versions of 1.0.0 are used
Icon(Ionicons.getIconData("ios-search"));
Icon(AntDesign.getIconData("stepforward"));
Icon(FontAwesome.getIconData("glass"));
Icon(MaterialIcons.getIconData("ac-unit"));
Icon(FontAwesome5.getIconData("address-book"));
Icon(FontAwesome5.getIconData("address-book",weight: IconWeight.Solid));
Icon(FontAwesome5.getIconData("500px", weight: IconWeight.Brand));

How to keep only the fonts used in the project.

step 1

Execute the command

pub global activate split_icon

step2

Add the font you want to leave in the project's pubspec file

//Ant Design Icons -> ant,
//Entypo Icons -> ent,
//Evil Icons -> evi,
//Feather Icons -> fea,
//Font Awesome Icons -> faw,
//Font Awesome 5 Regular -> faw5
//Font Awesome 5 Solid -> faw5s
//Font Awesome 5 Brands -> faw5b
//Foundation Icons -> fou,
//Ionicons Icons -> ion,
//Material Community Icons -> mco,
//Material Icons -> mdi,
//Octicons Icons -> oct,
//Simple Line Icons -> sli,
//Zocial Icons -> zoc,
//Weather Icons -> wea

...

flutter_icons:
  includes:
    -ant 
    -mco
 ...

step3

Execute the command in the project directory

split_icon

flutter-icons's People

Contributors

2534290808 avatar slackboi avatar udiedrichsen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

flutter-icons's Issues

Big resource (font) files

Asset files which referenced in pubspec.yaml are too big.
I want to keep only fonts which used in the project.

flutter_icons/fonts/MaterialCommunityIcons.ttf
flutter_icons/fonts/FontAwesome.ttf
flutter_icons/fonts/FontAwesome5_Solid.ttf
flutter_icons/fonts/FontAwesome5_Brands.ttf
flutter_icons/fonts/Ionicons.ttf
flutter_icons/fonts/MaterialIcons.ttf
flutter_icons/fonts/weathericons.ttf
flutter_icons/fonts/Entypo.ttf
flutter_icons/fonts/AntDesign.ttf
flutter_icons/fonts/SimpleLineIcons.ttf
flutter_icons/fonts/Foundation.ttf
flutter_icons/fonts/Feather.ttf
flutter_icons/fonts/Zocial.ttf
flutter_icons/fonts/FontAwesome5_Regular.ttf
flutter_icons/fonts/Octicons.ttf
flutter_icons/fonts/EvilIcons.ttf

cannot find Ionicons.school_outline

Bug info

version:1.1.0
cannot find Ionicons.school_outline.
some other outlined icons are also missing, ios-school-outline、md-school-outline etc.

Dart 3 incompatible

Env info

I use Dart 3 to load the pubspec packages in Flutter, but this package is incompatible with Dart V3.

Bug info

The current Dart SDK version is 3.0.2.

Because flutter_icons 1.1.0 doesn't support null safety and no versions of flutter_icons match >1.1.0 <2.0.0, flutter_icons ^1.1.0 is forbidden.

Null safety migration

Getting errors related to null safety support
Error: Cannot run with sound null safety, because the following dependencies
don't support null safety:

  • package:flutter_icons

For solutions, see https://dart.dev/go/unsound-null-safety

Error: Cannot run with sound null safety, because the following dependencies
don't support null safety:

  • package:flutter_icons

**Please do migrate the package to null safety **

Access all icons with single API

Is it possible to access all icons with a single API? For example, I want to select the best looking calendar icon from all of the sets. But, I have to type the name of all sets one by one and add dot calendar after them. If all the icons are accessible from a single class it would be easier to select the best calendar icon.

Thank you for the great package.

Is there a way to get an icon from a string value?

Hey there,
I had been using another library before that had some nice helper functions, as seen below:

IconData getIconUsingPrefix({String name}) {
  final List<String> split = name.split('.');

  if (split.length > 1) {
    name = split[1];
    if (split[0].toLowerCase() == 'fa' || split[0].toLowerCase() == 'fontawesome') {
      return getFontAwesomeIcon(name: name);
    }
  } else {
    return getIconGuessFavorMaterial(name: name);
  }

  return getMaterialIcon(name: name);
}

// Returns an icon named in name favoring Font Awesome
IconData getIconGuessFavorFA({String name}) {
  if (FontAwesomeIconsMap[name] != null) {
    return FontAwesomeIconsMap[name];
  } else {
    return IconsMap[name];
  }
}

// Returns an icon named in name favoring Material
IconData getIconGuessFavorMaterial({String name}) {
  if (IconsMap[name] != null) {
    return IconsMap[name];
  } else {
    return FontAwesomeIconsMap[name];
  }
}

It would let me retrieve an icon based on a string, which was perfect as all of my data is built from retrieving json data from my site. I have been looking for a larger variety of icons, so this package looked great, but I am having issue trying to get them as I have been prior.

I tried to see if I could use something like this:

  CircleAvatar(
      child: (changeLog.icon != "")
          ? Icon(FlutterIcons['${changeLog.icon}'], color: Colors.orange.withOpacity(0.5))
          : Icon(backupIconList[index])),

Is there anything available that I just didn't see, or that can be added to this package similar to this?
Thanks,
-MH

Outline or solid is not quit clear

Hi, thanks for wonderful icons!

the icon preview from website, is not same with I set in flutter app:

image

As you can see, the grin icon it not solid, while website is like this:

image

I want it to be solid so that fits the style of my app. Do u know why it's not same?

Update Icons

So currently I'm using MaterialCommunityIcons and FontAwesome5 from other flutter packages and I would like to use only one dependency for both, but the Icons that i'm using are from the new versions.

I let a list about the outdated icon sets

Some updated icon sets remove some icons like Ionicons

react-native-vector-icons repo have PR(not merged) for FontAwesome and MaterialCommunityIcons v5.0.45, but they haven't released a new version in over a year

Requesting an icon which does not exist returns IconData Object not null

If I request an Icon which does not exist IconData gets returned anyway with the codePoint = null. This leads to a weird flutter assert which has nothing to do with the IconData and it is hard to track.
Could u please just return null or throw an exception

IconData data = MaterialIcons.getIconData(key);

All icons appearing as empty boxes

Is this package alive? I thought it would be really useful for my app but none of the icons is working.
example: Icon(WeatherIcons.wi_cloudy) or any other icon is not working. All i'm getting is a box kind of looking thing.

[Feature Request] Split the lib into many subpackages by family.

Hi folks.

First of all I want to thanks you. I'm currently using this package and it's great! :)

I was wondering if it makes sense split this package into several subpackages in order to optimize application size. In my case I'm just using MaterialCommunityIcons. AFAIK I have to import the whole package, including the other .ttfs & resources, increasing the total size.

Is this possible? Do I am wrong assuming that all resources are bundled into the release builds?

Regards.

Can't find some Ionicons (Ellipsis-Horizontal-circle and others)

Env info

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.2, on Linux, locale en_GB.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
   ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[✓] VS Code (version 1.53.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

Bug info

Can't Find Some icons, especially Ionicons. Some Icons I noticed to be missing are
* Ionicons.ellipsis-horizontal-circle
* Ionicons.ellipsis-horizontal-circle-outline
* Ionicons.paper-plane-outline
* Ionicons.ios-paper-plane-outline
* MaterialIcons.all-inbox

Is material_icons from https://www.google.com/design/icons/? home-outline is missing

Hi, first, thanks a lot for this project.

In the Readme, it says this project it's inspired by react-native-vector-icons.
And then I checked https://github.com/oblador/react-native-vector-icons, it says MaterialIcons is from https://www.google.com/design/icons/.
Then I checked https://www.google.com/design/icons/, it redirects to https://material.io/tools/icons/.
Then I searched for home-outline icon, I found the result at https://material.io/tools/icons/?search=home&style=outline.
BUT from the latest project code flutter-icons/lib/material_icons.dart, I can not find home-outline at all.

Thanks.

All Icons should be searchable in one list - copy and paste should work to get the names

All Icons should be searchable in one list to search all libraries - copy and paste should work to get the names to copy them. Also, the search icon has to be clicked to start a search. Search should be triggered by just typing. The Chinese string in the search field does not work with most of the world. Could you change it to English to make it more comprehensible ( I am German ) ?

I like the package - don't get me wrong.

Accurate font availability browsing?

The flutter package page has a "Browse all" link that takes you to a website listing available icons. However, not all the icons shown on that site are actually available.

For example:
FontAwesome.syringe is not an actual option using Icon(FontAwesome.syringe)
Additionally some sets are not available at all such as Fontisto

Is there some way to browse the actual sets and icons available, or (ideally) to make all the icons listed on the "Browse all" website to be available?

If I am using the icon listing page wrong or the package wrong please let me know.

Does cherry picking work with this library

I am wondering if by using this Library dart/ flutter tree shaking still works or if all Icons are loaded in memory because I can access them with an indexer (map)?

FYI
Tree shaking. In computing, tree shaking is a dead code elimination technique that is applied when optimizing code written in ECMAScript dialects like Dart, JavaScript, or TypeScript into a single bundle that is loaded by a web browser.

Could we add a more user friendly API?

It would be cool to have an easier Interface as an extension to your package which allows the extraction of the Icons like this:

///searches all libs and returns the first finding
IconData data = IconCache('altimeter')
///searches only Material Icons 
IconData data = IconCache('altimeter', IconLib.mdi)
///searches only Material Icons 
IconData data = IconCache('mdi.altimeter')
 

all methods return a default icon if no Icon is found (could be changed to null). This addresses #12

Here is the implimentation:

import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:logging/logging.dart';

final _log = new Logger('ui.icon_cache.dart');

enum IconLib {
  ///All Icons
  all,

  ///Ant Design Icons
  ant,

  ///Entypo Icons
  ent,

  ///Evil Icons
  evi,

  ///Feather Icons
  fea,

  ///Font Awesome Icons
  faw,

  ///Foundation Icons
  fou,

  ///Ionicons Icons
  ion,

  ///Material Community Icons
  mco,

  ///Material Icons
  mdi,

  ///Octicons Icons
  oct,

  ///Simple Line Icons
  sli,

  ///Zocial Icons
  zoc,

  ///Weather Icons
  wea
}

class IconCache {
  static final IconCache _singleton = new IconCache._internal();

  factory IconCache() {
    return _singleton;
  }

  IconCache._internal();

  IconData operator [](String name) {
    return _singleton.icon(name);
  }

  IconLib _fromString(String iconLibEnumPrefix) => IconLib.values.firstWhere(
      (e) => e.toString().split('.').last == iconLibEnumPrefix,
      orElse: null);

  // The format is like 'mdi.car' which loads the car
  // icon from the Material Design Icons
  //if the name contains the prefix separated with a dot and the prefix
  // is the default than the prefix is taken from the name. e.g. mdi.car
  IconData icon(String name, {IconLib prefix = IconLib.all}) {
    String iconName;
    IconLib namePrefix;

    //if the name contains the prefix separated with a dot and the prefix
    // is the default than the prefix is taken from the name. e.g. mdi.car
    if (name.contains('.') && prefix == IconLib.all) {
      namePrefix = _fromString(name.split('.').first);
      iconName = name.split('.').last;
      //defaults to all lib
      if (namePrefix == null || iconName == null) throw ArgumentError();
      return _iconInternal(namePrefix, iconName);
    } else {
      return _iconInternal(prefix, name);
    }
  }

  IconData _iconInternal(IconLib prefix, String name) {
    IconData data;
    if (prefix != IconLib.all) {
      data = _extractIconFromSpecificLib(prefix, name);
      if (data == null || data.codePoint == null) {
        _log.finest('Could not load Icon $name ');
        return MaterialIcons.getIconData('error');
      } else {
        return data;
      }
    }
    return _searchIconsInAllLibs(data, name, prefix);
  }

  _searchIconsInAllLibs(IconData data, String name, IconLib prefix) {
    try {
      //return MdiIcons()[name];
      data = _searchMaterialIcons(name);

      if (data == null) {
        data = _searchMaterialCommunityIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchMaterialCommunityIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchAntDesignIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchEntypoIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchEvilIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchFeatherIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchFontAwesomeIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchFoundationIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchIonIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchOcticonsIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchSimpleLineIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchZocialIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        data = _searchWeatherIcons(name);
      } else {
        return data;
      }
      if (data == null) {
        _log.finest('Could not load Icon $name from lib: $prefix');
        return MaterialIcons.getIconData('error');
      } else {
        _log.finest('Could not load Icon $name, from lib: $prefix}');
        return MaterialIcons.getIconData('error');
      }
    } catch (e) {
      _log.finest(
          'Could not load Icon $name, from lib: $prefix, Error: ${e.toString()}');
      return MaterialIcons.getIconData('error');
    }
  }

  IconData _extractIconFromSpecificLib(IconLib prefix, String name) {
    switch (prefix) {
      case IconLib.ant:
        return _searchAntDesignIcons(name);
        break;
      case IconLib.all:
        _log.finest('Could not load Icon $name');
        return MaterialIcons.getIconData('error');

        break;
      case IconLib.ent:
        return _searchEntypoIcons(name);
        break;
      case IconLib.evi:
        return _searchEvilIcons(name);
        break;
      case IconLib.fea:
        return _searchFeatherIcons(name);
        break;
      case IconLib.faw:
        return _searchFontAwesomeIcons(name);
        break;
      case IconLib.fou:
        return _searchFoundationIcons(name);
        break;
      case IconLib.ion:
        return _searchIonIcons(name);
        break;
      case IconLib.mco:
        return _searchMaterialCommunityIcons(name);
        break;
      case IconLib.mdi:
        return _searchMaterialIcons(name);
        break;
      case IconLib.oct:
        return _searchOcticonsIcons(name);
        break;
      case IconLib.sli:
        return _searchSimpleLineIcons(name);
        break;
      case IconLib.zoc:
        return _searchZocialIcons(name);
        break;
      case IconLib.wea:
        return _searchWeatherIcons(name);
        break;
      default:
        {
          _log.finest('Could not load Icon $name');
          return MaterialIcons.getIconData('error');
        }
    }
  }

  IconData _searchWeatherIcons(String name) {
    IconData data = WeatherIcons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchZocialIcons(String name) {
    IconData data = Zocial.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchSimpleLineIcons(String name) {
    IconData data = SimpleLineIcons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchOcticonsIcons(String name) {
    IconData data = Octicons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchIonIcons(String name) {
    IconData data = Ionicons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchFoundationIcons(String name) {
    IconData data = Foundation.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchFontAwesomeIcons(String name) {
    IconData data = FontAwesome.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchFeatherIcons(String name) {
    IconData data = Feather.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchEvilIcons(String name) {
    IconData data = EvilIcons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchEntypoIcons(String name) {
    IconData data = Entypo.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchAntDesignIcons(String name) {
    IconData data = AntDesign.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchMaterialIcons(String name) {
    IconData data = MaterialIcons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }

  IconData _searchMaterialCommunityIcons(String name) {
    IconData data = MaterialCommunityIcons.getIconData(name);
    if (data == null || data.codePoint == null) {
      return null;
    } else {
      return data;
    }
  }
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.