Feather Icons : des icônes légères et élégantes

Introduction et présentation

Feather Icons est une collection d'icônes SVG minimalistes et élégantes. Conçue pour être légère, cohérente et facile à customiser.

Avantages :

• Très léger (~40 KB)
• Design minimaliste et cohérent
• Format SVG (scalable parfait)
• Facile à customiser (stroke, couleur)
• Open source et gratuit

Installation et setup

CDN :

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script>
  feather.replace()
</script>

NPM :

npm install feather-icons

// React
import * as Icon from 'react-feather'

<Icon.Heart />

SVG inline :

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>

Utilisation basique

Avec CDN et data-attributes :

<!-- Remplace automatiquement avec feather.replace() -->
<i data-feather="heart"></i>
<i data-feather="star"></i>
<i data-feather="download"></i>

React (react-feather) :

import { Heart, Star, Download } from 'react-feather'

function MyComponent() {
  return (
    <>
      <Heart />
      <Star size={32} />
      <Download color="red" />
    </>
  )
}

Vue :

import { Heart } from 'vue-feather-icons'

export default {
  components: { Heart }
}

Customisation

Taille avec CSS :

.icon-small { width: 16px; height: 16px; }
.icon-large { width: 48px; height: 48px; }

<!-- SVG inline -->
<svg class="icon-large" ... > ... </svg>

Couleur :

/* Web font style */
svg {
    stroke: currentColor;  /* Utilise la couleur du texte */
    stroke-width: 2;
    fill: none;
    width: 24px;
    height: 24px;
}

svg.text-primary {
    stroke: #1976d2;
}

svg.text-danger {
    stroke: #dc3545;
}

Animations :

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

.icon-bounce {
    animation: bounce 0.6s ease-in-out infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

Intégration avec frameworks

Angular :

// app.module.ts
import { CommonModule } from '@angular/common'

// template.html
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>

React avec react-feather :

import { Heart, Menu, X } from 'react-feather'

export function Header() {
  const [menuOpen, setMenuOpen] = useState(false)

  return (
    <header>
      <button onClick={() => setMenuOpen(!menuOpen)}>
        {menuOpen ? <X size={24} /> : <Menu size={24} />}
      </button>
    </header>
  )
}

Vue (vue-feather-icons) :

<template>
  <div>
    <feather-icon icon="heart" class="text-danger"></feather-icon>
    <feather-icon icon="star" size="32"></feather-icon>
  </div>
</template>

Cas d'usage et exemples

Boutons avec icônes :

<button class="btn">
  <svg ... data-feather="download"></svg>
  Télécharger
</button>

.btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn svg {
    width: 20px;
    height: 20px;
}

Liste d'actions :

<ul class="action-list">
  <li>
    <svg data-feather="edit-2"></svg>
    Modifier
  </li>
  <li>
    <svg data-feather="trash-2"></svg>
    Supprimer
  </li>
  <li>
    <svg data-feather="share-2"></svg>
    Partager
  </li>
</ul>

Comparaison et bonnes pratiques

Feather vs Font Awesome vs Bootstrap Icons :

Quand utiliser Feather :

• Designs minimalistes et épurés
• Performance critique
• Customisation SVG nécessaire
• Petit nombre d'icônes