Enable use of own Icon sets in StyledIcon

[jonathanfristedt]

Use case

I'd like to use my own SVG icons with StyledIcon.

Icon code example:

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

class IconLockPrivate extends StatelessWidget {
  final double size;
  final Color color;

  const IconLockPrivate({
    super.key,
    required this.size,
    required this.color,
  });

  @override
  Widget build(BuildContext context) {
    // Convert the Color object to a CSS-compatible hexadecimal representation
    String colorHex = '#${color.value.toRadixString(16).substring(2, 8)}';

    String svgData = '''
    <svg
    width="$size"
    height="$size"
    viewBox="0 0 20 20" fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path d="M14.0417 8.125V6.04167C14.0417 4.08566 12.456 2.5 10.5 2.5C8.54403 2.5 6.95837 4.08566 6.95837 6.04167V8.125M10.5 11.6667V14.1667M5.29171 17.7083H15.7084C16.1686 17.7083 16.5417 17.3352 16.5417 16.875V8.95833C16.5417 8.4981 16.1686 8.125 15.7084 8.125H5.29171C4.83147 8.125 4.45837 8.4981 4.45837 8.95833V16.875C4.45837 17.3352 4.83147 17.7083 5.29171 17.7083Z"
    stroke="$colorHex"
    stroke-width="1.5"
    stroke-linecap="round"
    stroke-linejoin="round"/>
    </svg>
    ''';

    return SvgPicture.string(
      svgData,
      fit: BoxFit.contain,
      width: size,
      height: size,
    );
  }
}

Proposal

Ideally the solution is flexible enough to enable seamless use of existing icons in Mix. Making it easier to transition more and more UI into mix without having to setup an additional icon set that works with mix.

[tilucasoli]

When we're talking about mix we are talking about a base framework to build UI, so it should be accessible for every project and Ideia. If we start to support SVG by default on Mix, we will need to choose a library and use a specific version that can conflict with the version of the same library in your project. Instead of being afraid about this, we created a highly scalable API that enables you to create your own Styled Widget.

If you have any questions about this, feel free to send us. 😁

[tilucasoli]

To create your own Styled Widget, I suggest you this doc Supporting new Widgets

[jonathanfristedt]

Ah I understand! I think (and hope) a lot of people will be attracted to Mix because they see an opportunity to build their own UI and product experience instead of a material or shoddy looking cupertino one. That's at least what I see! It could be worth to consider adding a doc with a best practice for how to handle custom icons with Mix, not urgently, but soon enough.

[tilucasoli]

I suggest you try to create your own StyledWidget with this tutorial. Most of our documentation is in validation, so we need some feedback about the content and the way we're explaining the concepts. If you can't support your own Icon Widget with this tutorial let me know it will be a pleasure to hear your feedback and questions.