Composant Icône

Composant Icône dans Storybook

Utilisation

Les composants Icon affichent une seule icône. Webpack charge l'icône sous la forme d'un symbole en haut de la page et le navigateur calcule l'élément SVG approprié sur place. Vous disposez des options suivantes :

• Utilisez une icône Guidewire. Vous pouvez les consulter ici.
• Utilisez le wrapper Icon pour définir une icône personnalisée.

Accessibilité

Pour obtenir des instructions sur la mise à disposition d'un texte alternatif pour les icônes, reportez-vous à la page Créer des expériences accessibles.

Code

Les icônes dans Jutro sont un ensemble de composants qui héritent du wrapper Icon dans le package @jutro/icons.

import {
    AccessTimeIcon,
    ChevronLeftIcon,
    CheckIcon,
    CoveragesIcon,
} from '@jutro/icons';

<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />

Instruction d'importation

Toutes les icônes sont importées à partir du package @jutro/icons.

import { [icon component name] } from '@jutro/icons';

Reportez-vous à la liste des icônes pour obtenir la gamme complète des options.

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

Tous les composants d'icône partagent les propriétés suivantes.

children

Type

React.ReactNode

Description

Contents of the SVG icon as React elements, without <svg> tag.

className

Type

string

Description

CSS class name for this component.

size

Type

'small' | 'medium' | 'large'

Description

Determines the size of icon.

Valeur par défaut

'large'

Crochets

Aucun crochet n'est disponible pour les composants Icon.

Clés de traduction

Il n'existe aucune traduction pour les composants Icon.

Pour en savoir plus sur la gestion des traductions, reportez-vous à notre section sur l'internationalisation.

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Migration des icônes de matériel vers des icônes Guidewire

Vous pouvez remplacer vos icônes de matériel par des icônes Guidewire en remplaçant l'icône par le composant d'icône Guidewire équivalent. Comme les icônes Guidewire s'affichent différemment, vous devrez peut-être procéder à quelques ajustements au niveau de vos codes ou de vos tests.

Si vous utilisez une icône de matériel, l'application Jutro l'affiche de cette façon :

<i class="mir mi-account-circle"></i>

Toutefois, si vous utilisez une icône Guidewire, l'application Jutro l'affiche de la façon suivante :

<svg
  class="jut__Icon__svgIcon gw gw-account-circle"
  viewBox="0 0 1024 1024"
  role="img"
  aria-label="account-circle icon">
  <use href="#gw-account-circle"></use>
</svg>

Cela peut avoir une influence sur votre code ou sur vos tests si :

• Vous utilisez des sélecteurs dans votre fichier CSS de façon à ce qu'ils correspondent à l'un des éléments affichés par le composant icône.
• La logique de votre application dépend de la structure HTML de l'icône.

Mappage d'icône

Vous trouverez ci-dessous la liste des icônes d'interface utilisateur de matériel et de leurs équivalents Jutro. Vous pouvez afficher la liste complète des icônes sur la page Liste des icônes.

• mi-access-time : <AccessTimeIcon/>
• mi-accessible : <AccessibleIcon/>
• mi-account-balance : <AccountBalanceIcon/>
• mi-account-box : gw-accounts.svg
• mi-account-circle : <AccountCircleIcon/>
• mi-account-tree : <AccountTreeIcon/>
• mi-add : <AddIcon/>
• mi-add-circle : <AddCircleIcon/>
• mi-add-circle-outline : <AddCircleOutlineIcon/>
• mi-add-a-photo : <AddAPhoneIcon/>
• mi-alarm : <AlarmIcon/>
• mi-apps : <AppsIcon/>
• mi-archive : <ArchiveIcon/>
• mi-arrow-forward : <ArrowForwardIcon/>
• mi-assignment : <AssignmentIcon/>
• mi-assignment-turned-in : <SubmissionIcon/>
• mi-attach-file : <AttachFileIcon/>
• mi-autorenew : <RenewalsIcon/>
• mi-bathtub : <BathtubIcon/>
• mi-block : <BlockIcon/>
• mi-bookmark : <BookmarkIcon/>
• mi-bookmark-border : <BookmarkBorderIcon/>
• mi-boundary : <BoundaryIcon/>
• mi-brightness1 : <Brightness1Icon/>
• mi-business : <BusinessIcon/>
• mi-business-center : <BusinessCenterIcon/>
• mi-build : <BuildIcon/>
• mi-call-split : <CallSplitIcon/>
• mi-calendar-today : <CalendarTodayIcon/>
• mi-cancel : <CancelIcon/>
• mi-change-history : <EditionIcon/>
• mi-chat : <ChatIcon/>
• mi-check : <CheckIcon/>
• mi-check-box-outline-blank : <CheckBoxOutlineBlankIcon/>
• mi-check-circle : <CheckCircleIcon/>
• mi-check-circle-outline : <CheckCircleOutlineIcon/>
• mi-chevron-left : <ChevronLeftIcon/>
• mi-chevron-right : <ChevronRightIcon/>
• mi-clear : <ClearIcon/>
• mi-close : <CloseIcon/>
• mi-cloud-done : <CloudDoneIcon/>
• mi-cloud-queue : <CloudQueueIcon/>
• mi-cloud-download : <CloudDownloadIcon/>
• mi-cloud-upload : <CloudUploadIcon/>
• mi-code : <CodeIcon/>
• mi-comment : <ReviewIcon/>
• mi-credit-card : <CreditCardIcon/>
• mi-dashboard : <DashboardIcon/>
• mi-delete : <DeleteIcon/>
• mi-delete-outline : <DeleteOutlineIcon/>
• mi-details : <DetailsIcon/>
• mi-description : <DescriptionIcon/>
• mi-details : <DetailsIcon/>
• mi-directions-boat : <DirectionsBoatIcon/>
• mi-directions-car : <DirectionsCarIcon/>
• mi-done : <CheckIcon/>
• mi-done-all : <DoneAllIcon/>
• mi-drag-handle : <DragHandleIcon/>
• mi-drag-indicator : <DragIndicatorIcon/>
• mi-edit : <EditIcon/>
• mi-email : <EmailIcon/>
• mi-error : <ErrorIcon/>
• mi-error-outline : <ErrorOutlineIcon/>
• mi-expand-less : <ExpandLessIcon/>
• mi-expand-more : <ExpandMoreIcon/>
• mi-file-copy : <FileCopyIcon/>
• mi-file-download : <FileDownloadIcon/>
• mi-file-upload : <FileUploadIcon/>
• mi-filter-list : <FilterListIcon/>
• mi-find-in-page : <FindInPageIcon/>
• mi-flag : <FlagIcon/>
• mi-flight-takeoff : <FlightTakeoffIcon/>
• mi-format-align-center : <FormatAlignCenterIcon/>
• mi-format-align-left : <FormatAlignLeftIcon/>
• mi-format-align-right : <FormatAlignRightIcon/>
• mi-folder : <FolderIcon/>
• mi-gavel : <GavelIcon/>
• mi-grid-on : <GridOnIcon/>
• mi-grid-off : <GridOffIcon/>
• mi-help : <HelpIcon/>
• mi-help-outline : <HelpOutlineIcon/>
• mi-home : <HomeIcon/>
• mi-home-work : <HomeWorkIcon/>
• mi-info : <InfoIcon/>
• mi-insert-drive-file : <InsertDriveFileIcon/>
• mi-insert-link : <InsertLinkIcon/>
• mi-keyboard-arrow-down : <KeyboardArrowDownIcon/>
• mi-keyboard-arrow-up : <KeyboardArrowUpIcon/>
• mi-keyboard-arrow-left : <KeyboardArrowLeftIcon/>
• mi-keyboard-arrow-right : <KeyboardArrowRightIcon/>
• mi-keyboard-back : <KeyboardBackspaceIcon/>
• mi-keyboard-backspace : <KeyboardBackspaceIcon/>
• mi-label : <QuoteIcon/>
• mi-link : <LinkIcon/>
• mi-link-off : <LinkOffIcon/>
• mi-list : <ListIcon/>
• mi-list-alt : <CoveragesIcon/>
• mi-local-shipping : <LocalShippingIcon/>
• mi-lock : <LockIcon/>
• mi-lock-open : <LockOpenIcon/>
• mi-mail : <MailIcon/>
• mi-mail-outline : <MailOutlineIcon/>
• mi-menu : <MenuIcon/>
• mi-message : <MessageIcon/>
• mi-more-horiz : <MoreHorizontalIcon/>
• mi-more-vertical : <MoreVerticalIcon/>
• mi-movie : <MovieIcon/>
• mi-notes : <NoteIcon/>
• mi-not-interested : <NotInterestedIcon/>
• mi-notifications : <NotificationsIcon/>
• mi-notifications-active : <NotificationsActiveIcon/>
• mi-notifications-none : <NotificationsNoneIcon/>
• mi-open-in-new : <OpenInNewIcon/>
• mi-outlined-flag : <OutlinedFlagIcon/>
• mi-person : <PersonIcon/>
• mi-person-add : <PersonAddIcon/>
• mi-people : <PeopleIcon/>
• mi-pageview : <PageviewIcon/>
• mi-perm-contact-calendar : <PermContactCalendarIcon/>
• mi-phone : <PhoneIcon/>
• mi-photo : <PhotoIcon/>
• mi-photo-camera : <PhotoCameraIcon/>
• mi-print : <PrintIcon/>
• mi-publish : <PublishIcon/>
• mi-receipt : <ReceiptIcon/>
• mi-redo : <RedoIcon/>
• mi-refresh : <RefreshIcon/>
• mi-reorder : <ReorderIcon/>
• mi-remove : <RemoveIcon/>
• mi-remove-from-queue : <RevertedIcon/>
• mi-search : <SearchIcon/>
• mi-settings : <SettingsIcon/>
• mi-share : <ShareIcon/>
• mi-star : <StarIcon/>
• mi-star-border : <StarBorderIcon/>
• mi-store : <StoreIcon/>
• mi-summarize : <SummaryIcon/>
• mi-sync : <SyncIcon/>.svg
• mi-sync-alt : <PolicyTransactionsIcon/>
• mi-translate : <TranslateIcon/>
• mi-thumb-up : <ValidationIcon/>
• mi-timeline : <TimelineIcon/>
• mi-tonality : <TonalityIcon/>
• mi-tune : <TuneIcon/>
• mi-unarchive : <UnarchiveIcon/>
• mi-unfold-less : <UnfoldLessIcon/>
• mi-unfold-more : <UnfoldMoreIcon/>
• mi-unpublish : <UnpublishIcon/>
• mi-view-module : <ViewModuleIcon/>
• mi-view-list : <ViewListIcon/>
• mi-visibility : <VisibilityIcon/>
• mi-visibility-off : <VisibilityOffIcon/>
• mi-arrow-drop-up : <ExpandLessIcon/>
• mi-arrow-drop-down : <ExpandMoreIcon/>
• mi-view-column : <ViewColumnIcon/>
• mi-warning : <WarningIcon/>
• mi-more-vert : <MoreVerticalIcon/>
• mi-create : <EditIcon/>

Les icônes Jutro suivantes n'ont pas d'équivalents dans l'interface utilisateur des matériaux.

• <AdditionalInterestsIcon/>
• <ArrowDownCircleIcon/>
• <CcDiscoverIcon/>
• <CcMastercardIcon/>
• <CcVisaIcon/>
• <CcAmexIcon/>
• <CodeBranchIcon/>
• <CoverageIcon/>
• <CustomerServiceIcon/>
• <DriverLicenseIcon/>
• <InfoOutlineIcon/>
• <PolicyIcon/>
• <RelationshipIcon/>
• <SpinnerIcon/>
• <SubtopicIcon/>
• <TopicIcon/>
• <SyncSuccessIcon/>
• <UndoIcon/>
• <UserInfoIcon/>
• <FacebookIcon/>
• <InstagramIcon/>
• <TwitterIcon/>
• <YoutubeIcon/>

Informations existantes

Utilisez-vous un composant Icon existant ?

• Pour consulter la documentation des anciens composants, passez à une version de la documentation antérieure à 10.9.
• Ce composant existant est également disponible dans Storybook :
  • Icône

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une icône et connaître les différentes options de configuration que nous proposons.

Exemple d’icône de base

Le package @jutro/icons contient les composants d'icône prédéfinis. Reportez-vous à la liste des icônes pour obtenir la gamme complète des options.

import {
    AccessTimeIcon,
    ChevronLeftIcon,
    CheckIcon,
    CoveragesIcon,
} from '@jutro/icons';

<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />

Exemple personnalisé

Pour ajouter une icône personnalisée, vous devez définir un nouveau composant à l'aide du composant wrapper Icon et utiliser des éléments enfants SVG.

Ajout à partir d'un fichier

1. Créez un dossier pour stocker vos icônes personnalisées. Nous vous recommandons d'utiliser src/assets/icons.
2. Ajoutez un fichier SVG au dossier, par exemple cust-helicopter.svg.
3. Définissez un composant d'icône à l'aide du fichier SVG que vous avez téléchargé :

export const CustomIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <image href="/icons/cust-helicopter.svg" height={'100%'}/>
    </Icon>
)

...

import { CustomIcon } from ...;

<CustomIcon
    className="customClass"
    size="small"
/>

4. Ajoutez le chemin d'accès du dossier des icônes dans votre environnement :

ICONS_PATH=./src/assets/icons

Dessin sur place

Pour dessiner une icône sur place au lieu de la charger à partir d'un fichier, vous pouvez utiliser un chemin SVG ou des éléments de forme. Par exemple, le code ci-dessous dessine un cercle :

import { Icon } from "@jutro/icons";

export const CustomCircleIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <circle cx="50" cy="50" r="50" />
    </Icon>
);

...

import { CustomCircleIcon } from ...;

<CustomCircleIcon
    className="customClass"
    size="small"
/>

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une icône et connaître les différentes options de configuration que nous proposons.

Exemple de base

Le package @jutro/icons contient les composants d'icône prédéfinis. Reportez-vous à la liste des icônes pour obtenir la gamme complète des options.

import {
    AccessTimeIcon,
    ChevronLeftIcon,
    CheckIcon,
    CoveragesIcon,
} from '@jutro/icons';

<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />

Exemple personnalisé

Pour ajouter une icône personnalisée, vous devez définir un nouveau composant à l'aide du composant wrapper Icon et utiliser des éléments enfants SVG.

Ajout à partir d'un fichier

1. Créez un dossier pour stocker vos icônes personnalisées. Nous vous recommandons d'utiliser src/assets/icons.
2. Ajoutez un fichier SVG au dossier, par exemple cust-helicopter.svg.
3. Définissez un composant d'icône à l'aide du fichier SVG que vous avez téléchargé :

import { Icon, IconProps } from '@jutro/icons';

export const CustomIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <image href="/icons/cust-helicopter.svg" height={'100%'}/>
    </Icon>
)

...

import { CustomIcon } from ...;

<CustomIcon
    className="customClass"
    size="small"
/>

4. Ajoutez le chemin d'accès du dossier des icônes dans votre environnement :

ICONS_PATH=./src/assets/icons

Dessin sur place

Pour dessiner une icône sur place au lieu de la charger à partir d'un fichier, vous pouvez utiliser un chemin SVG ou des éléments de forme. Par exemple, le code ci-dessous dessine un cercle :

import { Icon } from "@jutro/icons";

export const CustomCircleIcon: React.FC<IconProps> = props => (
    <Icon {...props}>
         <circle cx="50" cy="50" r="50" />
    </Icon>
);

...

import { CustomCircleIcon } from ...;

<CustomCircleIcon
    className="customClass"
    size="small"
/>

Journal des modifications

10.9.0

Nouveaux composants d'icône

Un nouveau package a été introduit : @jutro/icons. Ce package contient les composants de toutes les icônes Guidewire. Reportez-vous à la liste des icônes pour obtenir la gamme complète des options.

Une nouvelle variable d'environnement permettant de désactiver complètement l'approche des icônes obsolètes a été introduite. Si la variable d'environnement JUTRO_DISABLE_LEGACY_ICONS est définie sur true, toute configuration relative à l'approche de l'icône héritée sera supprimée. Cela empêchera leur chargement dans le DOM et rendra le composant Icon hérité inutilisable.

Obsolescences

Le composant Icon est obsolète. Il a été remplacé par des composants dans le nouveau package @jutro/icons.

10.1.0

Obsolescences

• Propriété color