@tricrobotics/icons

SF Symbol SVG icons as Lucide-compatible React components for Tric Robotics applications.

Installation

npm install @tricrobotics/icons

Usage

Import icons by name and use them like any React component:

import { Bot, Camera, Settings } from '@tricrobotics/icons';

function MyComponent() {
  return (
    <div>
      <Bot size={24} className="text-blue-500" />
      <Camera size={32} />
      <Settings size={20} strokeWidth={2} />
    </div>
  );
}

Props

All icons accept standard SVG props plus a size prop for convenience:

interface IconProps extends SVGProps<SVGSVGElement> {
  size?: number | string;  // Sets both width and height (default: 24)
}

Common props:

• size - Icon dimensions (e.g., 24, "2rem")
• className - CSS classes
• strokeWidth - Stroke width
• color / fill - Icon color (defaults to currentColor)

Available Icons

The package exports 59+ icon components mapped to Lucide-compatible names:

Navigation & Interface

• Activity, AlertTriangle, ArrowLeft, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp
• LayoutDashboard, LayoutGrid, List, Map, MapPin, MapPinned
• Maximize2, PanelLeft, PanelLeftClose, Plus, X, XCircle

Media & Communication

• Calendar, CalendarDays, Clock, Flag, MessageSquare, Play
• Camera, CopyPlus, StickyNote

Objects & Tools

• BarChart3, Bot, DollarSign, Download, Edit3, FlaskConical, Fuel
• Gearshape (Settings), Layers, Link2, Loader2, Package, Pencil
• Route, Satellite, SlidersHorizontal, SquareStack, Trash2, Wrench

Nature & Environment

• Moon, Sun, Wind, Zap

User & Account

• LogOut, User

See full list in src/icons.tsx.

Creating Custom Icon Components

Use the createLucideCompatibleIcon helper to wrap your own SVG imports:

import { createLucideCompatibleIcon } from '@tricrobotics/icons';
import CustomSvg from './custom-icon.svg?react';

export const CustomIcon = createLucideCompatibleIcon(CustomSvg);

Development

Build

npm install
npm run build

Publish

Package is published automatically via GitHub Actions when a version tag is pushed:

git tag v1.0.1
git push origin v1.0.1

Or manually:

npm version patch
npm publish --access public

Source

All icons are derived from Apple's SF Symbols, optimized for web use with:

• focusable="false" for accessibility
• currentColor for easy theming
• Minimal file sizes

License

Proprietary - Tric Robotics internal use only.

Repository

github.com/tricrobotics/tric-icons