path_gen 1.4.2

All in one generator for your asset paths with support to transform .svg to .vec(opt-in).

example/lib/main.dart

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

// This file is generated by running: dart run path_gen
import 'assets/app_asset.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SVG Bin Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SVG Bin Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Icons from different naming conventions:',
              style: Theme.of(context).textTheme.titleMedium,
            ),
            const SizedBox(height: 16),

            // Icons from st-icons category (kebab-case folder)
            _buildIconSection(
              context,
              title: 'st-icons (kebab-case folder)',
              icons: [
                _IconItem(
                  label: 'home-icon',
                  path: AppAsset.icons.stIcons.homeIcon,
                ),
                _IconItem(
                  label: 'settings_icon',
                  path: AppAsset.icons.stIcons.settingsIcon,
                ),
              ],
            ),

            const SizedBox(height: 24),

            // Icons from nav_icons category (snake_case folder)
            _buildIconSection(
              context,
              title: 'nav_icons (snake_case folder)',
              icons: [
                _IconItem(
                  label: 'arrow-left',
                  path: AppAsset.icons.navIcons.arrowLeft,
                ),
                _IconItem(
                  label: 'arrow_right',
                  path: AppAsset.icons.navIcons.arrowRight,
                ),
              ],
            ),

            const SizedBox(height: 24),

            // Root level icon
            _buildIconSection(
              context,
              title: 'Root level icons',
              icons: [
                _IconItem(
                  label: 'star',
                  path: AppAsset.icons.star,
                ),
              ],
            ),

            const SizedBox(height: 24),

            // With color filter
            Text(
              'With color filter:',
              style: Theme.of(context).textTheme.titleMedium,
            ),
            const SizedBox(height: 8),
            Row(
              children: [
                SvgPicture.asset(
                  AppAsset.icons.star,
                  width: 32,
                  height: 32,
                  colorFilter: const ColorFilter.mode(
                    Colors.amber,
                    BlendMode.srcIn,
                  ),
                ),
                const SizedBox(width: 8),
                SvgPicture.asset(
                  AppAsset.icons.star,
                  width: 32,
                  height: 32,
                  colorFilter: const ColorFilter.mode(
                    Colors.red,
                    BlendMode.srcIn,
                  ),
                ),
                const SizedBox(width: 8),
                SvgPicture.asset(
                  AppAsset.icons.star,
                  width: 32,
                  height: 32,
                  colorFilter: const ColorFilter.mode(
                    Colors.blue,
                    BlendMode.srcIn,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildIconSection(
    BuildContext context, {
    required String title,
    required List<_IconItem> icons,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(title, style: Theme.of(context).textTheme.labelLarge),
        const SizedBox(height: 8),
        Wrap(
          spacing: 16,
          runSpacing: 8,
          children: icons
              .map((item) => Column(
                    children: [
                      SvgPicture.asset(item.path, width: 32, height: 32),
                      const SizedBox(height: 4),
                      Text(item.label,
                          style: Theme.of(context).textTheme.bodySmall),
                    ],
                  ))
              .toList(),
        ),
      ],
    );
  }
}

class _IconItem {
  final String label;
  final String path;

  _IconItem({required this.label, required this.path});
}