Feature/kivex flutter

[Joseph4sure]

Kivex Flutter

Kivex Flutter is a powerful SVG-to-Flutter icon generator that transforms your SVG files into fully typed, reusable Flutter widgets. Instead of manually importing and managing SVG assets, Kivex automatically generates clean, customizable Dart widgets that integrate seamlessly into any Flutter application.

Built for speed, scalability, and developer productivity, Kivex provides a modern workflow where every SVG becomes a native Flutter widget with support for configurable size, color, and stroke width. Its intelligent code generation keeps your icon library synchronized by automatically creating, updating, exporting, and removing icon widgets whenever your SVG collection changes.

Whether you're building a small application or maintaining a large design system, Kivex simplifies icon management with a fast, automated workflow that fits naturally into your Flutter development process.

---

✨ Features

• Automatically generates Flutter widgets from SVG files.
• Produces strongly typed, reusable icon components.
• Supports customizable size, color, and stroke width.
• Generates one Dart file per icon.
• Automatically updates package exports.
• Removes obsolete generated files.
• Watch mode for automatic regeneration.
• Lightweight and easy to integrate.
• Easily customizable generation templates.
• Perfect for design systems and scalable Flutter applications.

---

📋 Requirements

• Flutter 3.x or later
• Dart 3.x or later

---

📁 Project Structure

your_flutter_project/
├── icons/
│   ├── home.svg
│   ├── heart.svg
│   └── user.svg
├── packages/
│   └── kivex_flutter/
│       ├── generator/
│       ├── lib/
│       └── pubspec.yaml
├── playground/
└── pubspec.yaml

---

📦 Installation

Add the package to your application's pubspec.yaml.

dependencies:
  kivex_flutter:
    path: packages/kivex_flutter

Install dependencies.

flutter pub get

---

🖼 Adding SVG Icons

Place your SVG files inside the icons/ folder.

icons/
├── home.svg
├── heart.svg
├── user.svg

By default, the generator scans this directory automatically.

If you want to use another directory, modify the ICONS_DIRECTORY constant in:

packages/kivex_flutter/generator/build.dart

---

💻 Command Line Setup

Open Command Prompt, PowerShell, or your preferred terminal.

Navigate to your Flutter project.

Windows

cd C:\Users\YourName\Projects\your_flutter_project

macOS / Linux

cd ~/Projects/your_flutter_project

Go to the package.

cd packages/kivex_flutter

Install dependencies.

flutter pub get

or

dart pub get

---

⚙️ Generate Icons

Generate Flutter widgets.

dart generator/build.dart

Example output:

✓ Found 32 SVG files
✓ Generated 32 Flutter widgets
✓ Updated lib/kivex_flutter.dart

Force regeneration.

dart generator/build.dart --force

Watch for changes.

dart generator/watch.dart

Whenever an SVG is added, renamed, edited, or removed, Kivex regenerates the affected widgets automatically.

---

📂 Generated Files

Running the generator creates:

lib/
├── icons/
│   ├── home_icon.dart
│   ├── heart_icon.dart
│   ├── user_icon.dart
│   └── ...
└── kivex_flutter.dart

Each SVG becomes a strongly typed Flutter widget.

---

📖 Usage

Import the package.

import 'package:kivex_flutter/kivex_flutter.dart';

If you have

home.svg

the generator creates

HomeIcon()

Basic

HomeIcon()

Custom Size

HomeIcon(
  size: 32,
)

Custom Color

HomeIcon(
  color: Colors.blue,
)

Custom Stroke Width

HomeIcon(
  strokeWidth: 3,
)

Combined

HomeIcon(
  size: 48,
  color: Colors.green,
  strokeWidth: 2,
)

---

🧪 Example

import 'package:flutter/material.dart';
import 'package:kivex_flutter/kivex_flutter.dart';
void main() {

runApp(const MyApp());

}
class MyApp extends StatelessWidget {

const MyApp({super.key});
@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text('Kivex Demo'),

),

body: const Center(

child: HomeIcon(

size: 64,

color: Colors.blue,

strokeWidth: 2,

),

),

),

);

}

}

---

🎮 Using the Playground

The repository includes a Flutter playground for testing generated icons.

Generate icons.

cd packages/kivex_flutter
dart generator/build.dart

Open the playground.

cd ../../playground

Install dependencies.

flutter pub get

Run it.

flutter run

Or target a specific platform.

flutter run -d chrome

flutter run -d windows

flutter run -d android

flutter run -d ios

For live development, keep the generator running in one terminal.

cd packages/kivex_flutter
dart generator/watch.dart

Run the playground in another terminal.

cd playground
flutter run

Now, every time you modify an SVG, the corresponding Flutter widget is regenerated automatically. Simply hot reload the playground to preview the updated icon.

---

🎨 Customization

Change the SVG directory

Edit:

const ICONS_DIRECTORY = path.join(ROOT_DIRECTORY, '..', '..', 'icons');

Example:

const ICONS_DIRECTORY = path.join(ROOT_DIRECTORY, 'assets', 'svg');

Customize generated widgets

Modify:

generator/icon_template.dart

Then regenerate.

dart generator/build.dart --force

---

🔧 Troubleshooting

Problem | Solution -- | -- No SVG files found | Verify the icons directory path. flutter_svg not found | Run flutter pub get. Widget not generated | Run with --force. Invalid SVG | Ensure the SVG is valid XML. Duplicate icons | Ensure filenames are unique.

---

🛣 Roadmap

• Filled and outlined icon variants
• Multi-color icon support
• Icon categories
• Theme-aware icons
• Custom templates
• pub.dev release
• Improved SVG compatibility