Icônes ​

Deux librairies coexistent dans le DS b.connect. Elles ont des usages distincts.

LibrairieUsageDisponibilité
Bootstrap IconsProps de composants DS (icon="bi-xxx")Globale — aucun import
Phosphor IconsPages VitePress / templates VueImport par composant

Bootstrap Icons ​

→ icons.getbootstrap.com

Intégrées dans les composants DS. Aucun import nécessaire — passer le nom de l'icône en prop.

Usage dans les composants ​

html
<!-- BcButton -->
<bc-button variant="primary" icon="bi-plus">Ajouter</bc-button>
<bc-button variant="ghost" icon="bi-download" icon-only />

<!-- BcDropdownMenu (menu contextuel data-driven) -->
<BcDropdownMenu :items="[
  { id: 'view', label: 'Voir le détail' },
  { id: 'delete', label: 'Supprimer' },
]" @select="onAction" />

<!-- BcAlert -->
<BcAlert variant="warning" icon="bi-exclamation-triangle">
  Vérification requise
</BcAlert>

<!-- Inline dans les templates (hors props) -->
<i class="bi bi-three-dots-vertical" />

Règle : Dans les props de composant, passer uniquement le nom ("bi-xxx"). Les balises <i class="bi bi-xxx"> sont valides dans les contenus de slot et templates libres.

Icônes les plus utilisées ​

IcôneNomLabelContexte d'usage
bi-eyeVoir / consulterLigne de tableau, détail dossier
bi-pencilModifierAction édition
bi-trashSupprimerAction danger — toujours après séparateur
bi-plusAjouter / créerBcButton primary, CommandBar
bi-downloadExporter / téléchargerCommandBar, actions bulk
bi-uploadImporter / uploaderBcFileUpload, CommandBar
bi-checkConfirmer / validerÉtat succès, confirmation
bi-xFermer / annulerModale, toast, tags
bi-three-dots-verticalActions contextuellesBcDropdownMenu dans les tables
bi-arrow-clockwiseRelancer / rafraîchirRetry, reload
bi-info-circleInformationBcTooltip trigger, aide contextuelle
bi-exclamation-triangleAvertissementBcAlert warning, validation
bi-shield-checkKYB / sécurité validéeStatut KYB, conformité
bi-shield-lockPermission / scope OIDCErreurs auth, scopes
bi-buildingEntreprise / entitéNavigation, dossiers
bi-peopleUtilisateurs / équipeAdmin, gestion utilisateurs
bi-gearParamètres / configurationAdmin, settings
bi-clock-historyHistoriqueAudit log, timeline
bi-searchRechercheBcSearchInput
bi-question-circleAideBcField#help, BcTooltip

Phosphor Icons ​

→ phosphoricons.com

6 poids disponibles : thin · light · regular · bold · fill · duotone. Installé et bundlé via @phosphor-icons/vue — import par nom de composant.

Import et usage ​

vue
<script setup>
import {
  PhArrowRight,
  PhCheckCircle,
  PhWarning,
  PhShieldCheck,
  PhKey,
} from '@phosphor-icons/vue'
</script>

<!-- Taille par défaut (24px) -->
<PhArrowRight />

<!-- Taille + couleur + poids -->
<PhCheckCircle :size="24" color="#22c55e" weight="fill" />
<PhWarning :size="20" weight="duotone" />
<PhShieldCheck :size="32" color="var(--bc-pink)" weight="duotone" />

Démo live :

Props ​

PropTypeDéfautDescription
sizeNumber | String24Taille en px
colorStringcurrentColorCouleur CSS (hex, var, etc.)
weight'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone''regular'Poids de l'icône
mirroredBooleanfalseMiroir horizontal

Icônes les plus utilisées ​

IcôneComposantPoids conseilléUsage dans le DS
PhArrowRightregularNavigation, liens
PhCheckCirclefillSuccès, validation
PhWarningduotoneAlerte, avertissement
PhXboldFermer, supprimer
PhMagnifyingGlassregularRecherche
PhPlusboldCréer, ajouter
PhDownloadSimpleregularExport, téléchargement
PhUploadSimpleregularImport, upload
PhPencilSimpleregularÉdition
PhTrashregularSuppression
PhShieldCheckduotoneSécurité, KYB validé
PhIdentificationCardduotoneKYC, identité
PhLockfillPermission, accès restreint
PhKeyregularAPI key, credentials
PhChartBarduotoneAnalytics, KPIs

Exemple — Dashboard KPIs ​

vue
<script setup>
import { PhChartBar, PhShieldCheck, PhKey, PhUsers } from '@phosphor-icons/vue'
</script>

<template>
  <BcStatGrid>
    <BcStat label="KYB validés" value="113">
      <template #icon>
        <PhShieldCheck :size="20" color="#22c55e" weight="fill" />
      </template>
    </BcStat>
    <BcStat label="Clés API actives" value="28">
      <template #icon>
        <PhKey :size="20" color="var(--bc-orange)" weight="duotone" />
      </template>
    </BcStat>
  </BcStatGrid>
</template>

BcIcon — Wrapper Phosphor type-safe ​

BcIcon est un composant wrapper qui expose les icônes du registre interne du DS (~70 icônes) via une prop name fortement typée (IconName). À utiliser à la place des imports Phosphor directs dans les composants Vue du DS.

Démo ​

vue
<BcIcon name="check-circle" size="lg" weight="duotone" />
<BcIcon name="warning" size="lg" weight="fill" />
<BcIcon name="trash" size="lg" />
<BcIcon name="arrow-right" size="sm" />
<BcIcon name="funnel" color="var(--bc-accent)" />

Tailles ​

ValeurPixels
xs12px
sm16px
md20px (défaut)
lg24px

Props ​

PropTypeDefaultDescription
nameIconName— (requis)Identifiant dans le registre DS
size"xs" | "sm" | "md" | "lg""md"Taille
weight"thin" | "light" | "regular" | "bold" | "fill" | "duotone""regular"Style Phosphor
colorstring"currentColor"Couleur CSS
ariaLabelstring—Label lecteur d'écran (si ariaHidden=false)
ariaHiddenbooleantrueMasque l'icône aux technologies d'assistance

Le type IconName est exporté depuis le DS : import type { IconName } from '@bc'

Règles de choix ​

SituationRecommandation
Prop icon d'un composant DSBootstrap Icons ("bi-xxx")
Élément inline dans un slot<i class="bi bi-xxx">
Page VitePress / template Vue personnaliséPhosphor Icons (import named)
Icône avec état duotone ou fill styliséPhosphor Icons — meilleure expressivité
Cohérence avec le reste du DSBootstrap Icons — stock existant