Colecciones seleccionadas para NutriTrack
Lucide
1,544
Outline, clean, moderno
Principal
Heroicons
292
Solid + outline, Tailwind
Fallback
MDI
7,447
Material Design Icons
Complemento
Total
200+
Vía api.iconify.design
100k+ iconos
Navegación Principal
6 iconos · lucide
home
lucide
users
lucide
calendar
lucide
bar-chart
lucide
settings
lucide
bell
lucide
Nutrición & Salud
4 iconos · lucide
apple
lucide
droplets
lucide
heart
lucide
dumbbell
lucide
Acciones CRUD
5 iconos · lucide
plus
lucide
pencil
lucide
trash-2
lucide
save
lucide
search
lucide
Estados del Sistema
4 iconos · lucide
check-circle
lucide
alert-triangle
lucide
x-circle
lucide
info
lucide
Output — Componente React generado por MCP (sync_icon)
nutritrack-icons.tsx
// Auto-generado por better-icons MCP · sync_icon tool
// Colección: lucide · NutriTrack Dashboard v1.0
import React from 'react'
interface IconProps {
className?: string
size?: number
color?: string
}
// lucide:home → HomeIcon
export const HomeIcon = ({ className, size=24, color='currentColor' }: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" className={className}>
<g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4..." />
</g>
</svg>
)
// lucide:apple → AppleIcon · lucide:heart → HeartIcon · ...
export const AppleIcon, HeartIcon, DropletsIcon, DumbbellIcon ...
// Barrel export
export { HomeIcon, UsersIcon, CalendarIcon, BarChart2Icon,
SettingsIcon, BellIcon, AppleIcon, DropletsIcon,
HeartIcon, DumbbellIcon, PlusIcon, PencilIcon,
Trash2Icon, SaveIcon, SearchIcon, CheckCircleIcon,
AlertTriangleIcon, XCircleIcon, InfoIcon }
// Colección: lucide · NutriTrack Dashboard v1.0
import React from 'react'
interface IconProps {
className?: string
size?: number
color?: string
}
// lucide:home → HomeIcon
export const HomeIcon = ({ className, size=24, color='currentColor' }: IconProps) => (
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" className={className}>
<g fill="none" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2">
<path d="M15 21v-8a1 1 0 0 0-1-1h-4..." />
</g>
</svg>
)
// lucide:apple → AppleIcon · lucide:heart → HeartIcon · ...
export const AppleIcon, HeartIcon, DropletsIcon, DumbbellIcon ...
// Barrel export
export { HomeIcon, UsersIcon, CalendarIcon, BarChart2Icon,
SettingsIcon, BellIcon, AppleIcon, DropletsIcon,
HeartIcon, DumbbellIcon, PlusIcon, PencilIcon,
Trash2Icon, SaveIcon, SearchIcon, CheckCircleIcon,
AlertTriangleIcon, XCircleIcon, InfoIcon }
Herramientas MCP disponibles para Claude Code
8 tools · better-icons server
| Tool | Descripción | Usado en NutriTrack |
|---|---|---|
| search_icons | Busca iconos en 200+ colecciones por query + filtro de prefijo | Sí |
| get_icon | Obtiene SVG de un icono por ID (prefix:name), con color y tamaño | Sí |
| get_icons | Obtiene hasta 20 iconos en batch (array de IDs) | Sí |
| list_collections | Lista todas las colecciones disponibles en Iconify | Sí |
| recommend_icons | Recomienda iconos por caso de uso (ej. "navigation menu") | Sí |
| find_similar_icons | Encuentra variaciones del mismo icono en distintas colecciones | No |
| sync_icon | Añade un icono como componente a un archivo del proyecto (React/Vue/etc.) | Sí |
| scan_project_icons | Escanea el proyecto para listar los iconos ya integrados | No |