Flutter Inline SVG Icons

2022-04-10T22:00:03.000Z

Coming from the web (Vue 3) it’s possible to paste an icon’s SVG directly into your code, as the browser will render it automatically. With Flutter it’s not that easy but with flutter_svg it almost is.

SVGis one of the most popular icon formats, many icons sites provide them as a download because it offers several advantages when it comes to retaining image quality. Using SVG icons allows access to a much wider library of icons than limiting your app to the the inbuilt material icons.

How easy is it? For example you can paste in the SVG with a call to SvgPicture

            SvgPicture.string(
              '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="80" y="16" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="208" y="16" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="336" y="16" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="80" y="144" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="208" y="144" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="336" y="144" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="80" y="272" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="208" y="272" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="208" y="400" rx="8" ry="8"></rect><rect xmlns="http://www.w3.org/2000/svg" width="96" height="96" x="336" y="272" rx="8" ry="8"></rect></svg>',
              width: 50,
            )

or if you want to break it out into it’s own widget this code will do that.

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

class IconBoat extends StatefulWidget {
  const IconBoat({Key? key}) : super(key: key);

  @override
  State<IconBoat> createState() => _IconBoatState();
}

class _IconBoatState extends State<IconBoat> {
  final String rawSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="100%" height="100%"><path xmlns="http://www.w3.org/2000/svg" d="M477.77 246.42c-2.13-6-7.23-9.55-12.56-11.95L432 221.38V92a20 20 0 0 0-20-20h-76V40a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v32h-76a20 20 0 0 0-20 20v129.46l-33.08 13.06c-5.33 2.4-10.58 6-12.72 12s-3.16 11.81-1 19L84.25 415.7h1.06c34.12 0 64-17.41 85.31-43.82 21.32 26.41 51.18 42.12 85.3 42.12s64-15.76 85.31-42.17c21.32 26.41 51.18 43.87 85.3 43.87h1.06l51.25-150.17c2.16-6 1.07-13.1-1.07-19.11zM256 152l-144 56.83V108a4 4 0 0 1 4-4h280a4 4 0 0 1 4 4v100.76z"></path><path xmlns="http://www.w3.org/2000/svg" d="M345.22 407c-52.25 36.26-126.35 36.25-178.6 0 0 0-45.64 63-94.64 63l13.33 1c29.86 0 58.65-11.73 85.31-25.59a185.33 185.33 0 0 0 170.6 0c26.66 13.87 55.45 25.6 85.31 25.6l13.33-1C392.21 470 345.22 407 345.22 407z"></path></svg>''';
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SvgPicture.string(rawSvg, width: 50,);
  }
}

Now I know you could use an asset but that’s more management. You’ll need an asset file, you need a reference in pubspec.yaml as well as some dart code. What’s above keeps in all in once file and one place. You can then manage the widgets in one folder and reuse them throughout your application.

Github Sample.

Projects

Archives