Infotravel Icons

A modern icon library for Infotravel projects with React component support, tree-shaking, and CSS fallback. Converts SVG files into optimized, customizable components and CSS.

Features

• React Components: Tree-shakable React components with TypeScript support
• Customizable Props: Control size and color with ease
• Tree-Shaking: Import only the icons you use
• SVG Optimization: SVGO-powered compression (30-50% size reduction)
• CSS Fallback: Traditional CSS classes still supported for backward compatibility
• Multicolor Support: Icons with multicolor- prefix preserve their original colors (flags, logos, etc.)
• TypeScript: Full type definitions included
• Zero Runtime Cost: All optimization happens at build time

Installation

npm install infotravel-icons react
# or
pnpm add infotravel-icons react
# or
yarn add infotravel-icons react

Note: React is an optional peer dependency. If you only use CSS, React is not required.

Usage

React Components (Recommended)

Import and use icons as React components with full customization:

import { Bell16px, MulticolorFlagBrazil, Language24px } from "infotravel-icons";

function App() {
  return (
    <div>
      {/* Basic usage */}
      <Bell16px />

      {/* Custom size */}
      <Bell16px size={32} />
      <Bell16px size="2rem" />

      {/* Custom color */}
      <Bell16px color="#FF6B6B" />
      <Bell16px color="currentColor" />

      {/* With className for additional styling */}
      <Language24px className="my-icon" />

      {/* Multicolor icons maintain their original colors */}
      <MulticolorFlagBrazil size={48} />

      {/* Accessibility */}
      <Bell16px aria-label="Notifications" />

      {/* All SVG props are supported */}
      <Bell16px
        onClick={() => alert("Clicked!")}
        style={{ cursor: "pointer" }}
      />
    </div>
  );
}

CSS Classes (Legacy)

For backward compatibility, CSS classes are still available:

<!-- Include the CSS file -->
<link
  rel="stylesheet"
  href="node_modules/infotravel-icons/dist/infotravel-icons.css"
/>

<!-- Use with class names -->
<i class="icone-bell-16px" style="color: blue;"></i>
<i class="icone-multicolor-flag-brazil"></i>

API Reference

IconProps

All icon components accept these props:

| Prop | Type | Default | Description | | ---------- | ---------------- | -------------- | ------------------------------------------- | | size | number | string | 24 | Icon size (px if number, or any CSS unit) | | color | string | 'currentColor' | Stroke and fill color (standard icons only) | | className | string | '' | Additional CSS classes | | aria-label | string | undefined | Accessibility label | | ...props | SVGAttributes | - | Any other SVG element attributes |

Ref Forwarding

All components support ref forwarding:

const iconRef = useRef<SVGSVGElement>(null);
<Bell16px ref={iconRef} />;

Available Icons

Over 240 icons are currently available, categorized as:

• Baggage & Counters: Full set of baggage icons with numeric indicators (0-4)
• Flags: MulticolorFlagBrazil, MulticolorFlagSpain, MulticolorFlagUnitedStates
• Accommodations: Hotel, apartment, houses, etc.
• Transportation: Airplane, Bus, Car, Cruise, Train, Shuttle, etc.
• Payments: Credit Card, Pix, PayPal, etc.
• UI & Navigation: Arrows, Menu, Search, Close, Trash, Edit, Settings, etc.

Preview all icons by opening dist/infotravel-icons.html (CSS version) or by running the interactive React gallery:

pnpm preview

The React gallery allows you to search icons, customize colors/sizes, and copy component code directly.

Tree-Shaking

This library is fully tree-shakable. Import only the icons you need:

// ✅ Good: Only Bell16px is included in bundle
import { Bell16px } from "infotravel-icons";

// ❌ Avoid: Imports everything
import * as Icons from "infotravel-icons";

Bundle Stats:

• Total Icons: 243
• Icon size: ~1.5KB per icon (tree-shaken)
• CSS Bundle: ~880KB (all icons included)

Development

Prerequisites

• Node.js (v18+)
• pnpm

Setup

pnpm install

Building

To generate both CSS and React components:

pnpm build

This runs:

1. pnpm build:css - Generates CSS file and HTML preview
2. pnpm build:react - Generates React components and bundles with tsup

Output files in dist/:

• index.js, index.mjs - React component bundles (CJS and ESM)
• index.d.ts - TypeScript type definitions
• infotravel-icons.css - CSS file with all icons
• infotravel-icons.html - Preview page

Adding New Icons

1. Place your .svg files in the public/icons directory
2. Use the multicolor- prefix for icons that should preserve their original colors (like flags or logos)
3. Run pnpm build
4. Import and use the new component:

import { NewIcon } from "infotravel-icons";
<NewIcon size={24} color="blue" />;

Icon Naming Convention

• Filenames are automatically converted to PascalCase component names
• bell-16px.svg → Bell16px
• multicolor-flag-brazil.svg → MulticolorFlagBrazil
• Accents are removed, special characters become hyphens
• Files starting with multicolor- are treated as multi-color icons and will ignore the color prop

Project Structure

infotravel-icons/
├── public/icons/              # Source SVG files
├── src/
│   ├── Icon.tsx              # Base icon component
│   ├── index.ts              # Barrel export (generated)
│   └── icons/                # Individual components (generated)
├── scripts/
│   ├── generate-icons.ts     # CSS generation
│   └── generate-react-icons.ts # React generation
├── dist/                     # Build output
├── svgo.config.mjs          # SVG optimization config
├── tsup.config.ts           # Bundler configuration
└── package.json

If you're using CSS:

<link rel="stylesheet" href="path/to/infotravel-icons.css" />
<i class="icone-bell-16px"></i>

To use React components:

// 1. Ensure React is installed
npm install react

// 2. Import and use components
import { Bell16px } from 'infotravel-icons';
<Bell16px size={24} color="blue" />

TypeScript

Full TypeScript support is included. All components are typed with IconProps:

import { Bell16px, IconProps } from "infotravel-icons";

const MyIcon = (props: IconProps) => <Bell16px {...props} />;

License

ISC

Contributing

1. Add SVG files to public/icons/
2. Run pnpm build
3. Test the generated components in the preview gallery
4. Submit a pull request