Skip to main content

Using Icon Symbols in Flutter

How to use Icon Symbols in a project with type-safe Enum, first download flutter format

Icon symbols download format

1. configuration​

1.1. Then install the component Lib in your project​

# must be > 0.22.0
flutter pub add flutter_svg

1.2. Create a placement data structure​

.
├── src
│   ├── components/icon-symbol
│   │   ├── svg_symbols.dart
│   │   └── icon.dart

1.2. icon.dart​

Please download the Flutter format in Acrool

1.3. svg_symbols.dart​

import 'package:collection/collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/svg.dart';
import 'package:native_kit/config/svg_symbols.dart';


class IconSvg extends StatelessWidget {
  final EIconCode code;
  final double? size;
  final Color? color;

  IconSvg({
    Key? key,
    required this.code,
    this.size = 24,
    this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final iconInfo = data.firstWhereOrNull((row) => row.code == code);

    return SvgPicture.string(
      '''
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="${iconInfo?.viewBox}">
    		${iconInfo?.path}
      </svg>
      ''',
      width: size == null ? 24 : size,
      color: color,
    );
  }
}

2. How to use?​

import 'package:native_kit/components/icon-symbol/icon-symbol.dart';

class AppBuilder extends StatelessWidget {
  final Widget? child;
  AppBuilder({Key? key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return GestureDetector(
      child: Icon(code: EIconCode.lock_alt, size: 15, color: Colors.white)
    );
  }
}