Documentation

Type-safe Component Usage

import type { ComponentProps } from 'react';
import { AqHome01 } from '@airqo/icons-react';

// Type for icon props
type IconProps = ComponentProps<typeof AqHome01>;

// Type-safe custom component
interface ButtonWithIconProps {
  icon: React.ComponentType<ComponentProps<'svg'>>; // Accept any icon component
  children: React.ReactNode;
}

function ButtonWithIcon({ icon: Icon, children }: ButtonWithIconProps) {
  return (
    <button className="flex items-center space-x-2 p-2 hover:bg-gray-100 rounded">
      <Icon size={20} />
      <span>{children}</span>
    </button>
  );
}

// Usage
<ButtonWithIcon icon={AqHome01}>Home</ButtonWithIcon>

Interface Definition

interface IconProps extends React.SVGProps<SVGSVGElement> {
  size?: number | string; // Icon size (default: 24)
  className?: string;     // CSS classes
  color?: string;         // Icon color (default: currentColor)
  // ... all standard SVG props (onClick, onMouseOver, etc.)
}

Dynamic Icon Selection with Types

import { AqHome01, AqUser01, AqSettings01 } from '@airqo/icons-react';
import type { ComponentProps } from 'react';

type IconName = 'home' | 'user' | 'settings';
const iconMap: Record<IconName, React.ComponentType<ComponentProps<'svg'>>> = {
  home: AqHome01,
  user: AqUser01,
  settings: AqSettings01,
};

interface DynamicIconProps extends ComponentProps<'svg'> {
  name: IconName;
}

function DynamicIcon({ name, ...props }: DynamicIconProps) {
  const IconComponent = iconMap[name];
  if (!IconComponent) {
    console.warn(`Icon '${name}' not found`);
    return null; // Or a fallback icon
  }
  return <IconComponent {...props} />;
}

// Usage
<DynamicIcon name="home" size={24} />
<DynamicIcon name="user" size={20} className="text-blue-500" />

Installation

Add to pubspec.yaml:

dependencies:
  airqo_icons_flutter: ^1.0.1

Install dependencies:

flutter pub get

Basic Usage

import 'package:airqo_icons_flutter/airqo_icons_flutter.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        AqUganda(size: 32, color: Colors.green),
        AqHome01(size: 24, color: Colors.blue),
        AqBarChart01(size: 28, color: Colors.purple),
      ],
    );
  }
}

API Reference

All icons accept these parameters:

Widget AqIconWidget({
  Key? key,                    // Widget key
  double size = 24.0,         // Icon size (default: 24.0)
  Color? color,               // Icon color (uses SVG default if null)
  String? semanticLabel,      // Accessibility label
})

Advanced Examples

Material Design Integration

// In App Bar
AppBar(
  leading: AqMenu01(color: Colors.white),
  title: Text('AirQo Dashboard'),
  actions: [
    IconButton(
      icon: AqNotificationSquare(color: Colors.white),
      onPressed: () => _showNotifications(),
    ),
  ],
)

// In Bottom Navigation
BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: AqHome01(),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: AqBarChart01(),
      label: 'Analytics',
    ),
    BottomNavigationBarItem(
      icon: AqUser01(),
      label: 'Profile',
    ),
  ],
)

Responsive Icons

class ResponsiveIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final iconSize = screenWidth > 600 ? 32.0 : 24.0;

    return AqHome01(
      size: iconSize,
      color: Theme.of(context).primaryColor,
    );
  }
}

Accessibility Support

// Provide semantic labels for screen readers
AqHome01(
  semanticLabel: 'Navigate to home screen',
)

// Use in semantic widgets
Semantics(
  button: true,
  hint: 'Tap to open settings',
  child: GestureDetector(
    onTap: _openSettings,
    child: AqSettings01(),
  ),
)

Installation

npm install @airqo/icons-vue
# or
yarn add @airqo/icons-vue

Basic Usage

<template>
  <div class="icon-wrapper">
    <AqHome01 />
    <!-- With custom props -->
    <AqCloud01 :size="32" color="#1652DA" />
  </div>
</template>

<script setup>
import { AqHome01, AqCloud01 } from '@airqo/icons-vue';
</script>

Props Reference

React Hooks

The react package exports specific hooks for easier integration.

import { useIconSize } from '@airqo/icons-react';

function MyComponent() {
  const { size, isSmall, isLarge } = useIconSize('md');
  // ...
}

SVG Optimization

All icons are pre-optimized using SVGO to ensure minimal bundle size impact. The build process includes:

• Removal of unnecessary metadata
• Path optimization and simplification
• Consistent viewBox standardization (24x24)
• Color attribute normalization (currentColor)

Contributing

To contribute new icons or fix existing ones: