Feather Icons SVG for Flutter | Display Icons as SVG Images

Feather Icons SVG for Flutter

Feather Icons port to Flutter. This package renders the icons as SVG pictures. This makes it possible to customize icon properties in runtime (stroke width etc.).

Usage

class MyExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FeatherIcon(
      FeatherIcons.calendar,
      color: Colors.red,
      size: 30,
      strokeWidth: 1.5,
    );
  }
}

Install

Add feather_icons_svg package into your pubspec.yaml.

flutter pub add flutter_icons_svg

Development

To fetch SVG icons from original Feather Icons repository, run tool/fetch-icons.sh.

The SVG contains unsupported content. To fix all fetched icons, run tool/fix_svg.dart. This replaces invalid SVG attributes for every file and saves it.

Finally, to run source code generation to create flutter_icons_svg.dart file with named constructor for every icon, run tool/generator.dart.

 

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add feather_icons_svg

This will add a line like this to your package's pubspec.yaml (and run an implicit dart pub get):

dependencies:
  feather_icons_svg: ^0.1.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:feather_icons_svg/feather_icons_svg.dart';

example/lib/main.dart

import 'package:feather_icons_svg/feather_icons_svg.dart';
import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        iconTheme: IconThemeData(
          color: Colors.red,
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: IconTheme(
          data: IconThemeData(color: Colors.black),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              FeatherIcon(FeatherIcons.arrowLeft),
              FeatherIcon(FeatherIcons.arrowRight),
              FeatherIcon(
                FeatherIcons.calendar,
                color: Colors.blue,
              ),
              FeatherIcon(FeatherIcons.arrowLeft),
              FeatherIcon(FeatherIcons.arrowRight),
              FeatherIcon(FeatherIcons.activity),
              FeatherIcon(
                FeatherIcons.bell,
                strokeWidth: 1.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Download Details:

Author: vaetas

Source Code: https://github.com/vaetas/feather_icons_svg