Tabler Icons : icônes pour dashboards et apps

Introduction et présentation

Tabler Icons est une collection d'icônes modernes conçue spécifiquement pour les dashboards et applications web. Basée sur le template Tabler, elle offre des icônes professionnelles et cohérentes.

Avantages :

• 4500+ icônes SVG haute qualité
• Conçu pour les dashboards et apps
• Plusieurs variantes (stroke, outline, filled)
• Format SVG ultra-flexible
• Excellente documentation

Installation et setup

CDN :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/tabler-icons.css">

NPM :

npm install @tabler/icons

// React
import { IconHeart } from '@tabler/icons-react'

SVG assets :

// Depuis le node_modules
node_modules/@tabler/icons/svg/heart.svg

Utilisation basique

Web Font :

<i class="ti ti-heart"></i>              <!-- Filled -->
<i class="ti ti-heart-handshake"></i>   <!-- Custom name -->
<i class="ti ti-star"></i>               <!-- Star -->

SVG inline :

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M12 21l-7.19-3.907A4 4 0 012 12.523V5a3 3 0 013-3h14a3 3 0 013 3v7.523a4 4 0 01-2.81 3.85L12 21z"/>
</svg>

React (tabler-icons-react) :

import { IconHeart, IconStar, IconDownload } from '@tabler/icons-react'

function Dashboard() {
  return (
    <>
      <IconHeart />
      <IconStar size={32} stroke={1.5} />
      <IconDownload color="blue" />
    </>
  )
}

Customisation

Stroke et taille :

// React
<IconHeart size={24} stroke={2} />      <!-- Stroke épais -->
<IconHeart size={32} stroke={1} />      <!-- Stroke fin -->

// CSS
.icon {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

Couleur :

.icon-text-primary {
    color: #1565c0;  /* Bleu primaire */
}

.icon-text-success {
    color: #2e7d32;  /* Vert succès */
}

.icon-text-danger {
    color: #d32f2f;  /* Rouge danger */
}

Animation pour dashboards :

.icon-spin {
    animation: spin 2s linear infinite;
}

.icon-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

Intégration avec frameworks

React :

import { IconUser, IconSettings, IconLogout } from '@tabler/icons-react'

function UserMenu() {
  return (
    <nav>
      <a href="/profile">
        <IconUser /> Profile
      </a>
      <a href="/settings">
        <IconSettings /> Paramètres
      </a>
      <a href="/logout">
        <IconLogout /> Se déconnecter
      </a>
    </nav>
  )
}

Vue :

<template>
  <div class="menu">
    <tabler-icon name="home" /> Accueil
    <tabler-icon name="chart-bar" /> Analytics
    <tabler-icon name="settings" /> Configuration
  </div>
</template>

Angular :

// app.module.ts
import { TablerIconsModule } from 'angular-tabler-icons'

@NgModule({
  imports: [TablerIconsModule]
})
export class AppModule { }

// template.html
<i tablerIcon='home'></i>
<i tablerIcon='chart-bar'></i>

Cas d'usage et exemples

Dashboard avec métriques :

<div class="metric">
  <i class="ti ti-trending-up text-success"></i>
  <h3>Revenue</h3>
  <p>$12,500</p>
</div>

<div class="metric">
  <i class="ti ti-users text-info"></i>
  <h3>Utilisateurs</h3>
  <p>1,234</p>
</div>

Navigation du dashboard :

<aside class="sidebar">
  <nav>
    <a href="/dashboard">
      <i class="ti ti-dashboard"></i>
      <span>Dashboard</span>
    </a>
    <a href="/analytics">
      <i class="ti ti-chart-bar"></i>
      <span>Analytics</span>
    </a>
    <a href="/users">
      <i class="ti ti-users"></i>
      <span>Utilisateurs</span>
    </a>
  </nav>
</aside>

Comparaison et bonnes pratiques

Tabler Icons vs autres :

Cas d'usage parfaits :

• ✅ Admin dashboards
• ✅ Analytics panels
• ✅ Applications SaaS
• ✅ Business tools
• ✅ Nombreuses icônes nécessaires

Performance :

• Utilisez les SVG inline pour une meilleure performance
• Cache les composants d'icônes si possible
• Lazy load les icônes non visibles
• Utilisez stroke optimisé pour dashboards