Symbolkomponente

Symbolkomponente in Storybook

Verwendung

Icon-Komponenten stellen ein einzelnes Symbol dar. Webpack lädt das Symbol als Symbol am Seitenanfang, und der Browser berechnet die richtige SVG an Ort und Stelle. Dabei haben Sie die folgenden Optionen:

• Verwenden Sie ein Guidewire-Symbol. Sie können diese hier nachschlagen.
• Verwenden Sie den Wrapper Icon, um ein benutzerdefiniertes Symbol zu definieren.

Barrierefreiheit

Richtlinien zum Bereitstellen von Alternativtext für Symbole finden Sie auf der Seite zum Erstellen barrierefreier Erfahrungen.

Code

Symbole in Jutro sind eine Sammlung von Komponenten, die vom Wrapper Icon im Paket @jutro/icons ergänzt werden.

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

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

Importanweisung

Alle Symbole werden aus dem Paket @jutro/icons importiert.

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

In der Liste der Symbole finden Sie die gesamte Palette der Optionen.

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

Alle Symbolkomponenten haben die folgenden Eigenschaften gemeinsam.

children

Typ

React.ReactNode

Beschreibung

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

className

Typ

string

Beschreibung

CSS class name for this component.

size

Typ

'small' | 'medium' | 'large'

Beschreibung

Determines the size of icon.

Standardwert

'large'

Hooks

Für Icon-Komponenten sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für Icon-Komponenten.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Migration von Material- zu Guidewire-Symbolen

Sie können Ihre Materialsymbole durch Guidewire-Symbole ersetzen, indem Sie das Symbol durch die entsprechende Guidewire-Symbolkomponente ersetzen. Guidewire-Symbole werden jedoch anders dargestellt, sodass Sie möglicherweise Code- oder Testfunktionen anpassen müssen.

Wenn Sie ein Materialsymbol verwenden, wird dieses von Jutro wie folgt dargestellt:

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

Wenn Sie jedoch ein Guidewire-Symbol verwenden, wird es von der Jutro-App wie folgt dargestellt:

<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>

Dies kann einen Einfluss auf Ihren Code oder Tests haben, wenn:

• Sie Selektoren in Ihrem CSS verwenden, um jedes der von der Symbolkomponente gerenderten Elemente anzupassen.
• Die Logik Ihrer Anwendung hängt von der HTML-Struktur des Symbols ab.

Symbolzuordnung

Im Folgenden finden Sie eine Liste der materiellen UI-Symbole und ihrer Jutro-Entsprechungen. Sie können die vollständige Liste der Symbole auf der Seite Liste der Symbole einsehen.

• 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/>

Die folgenden Jutro-Symbole haben keine Entsprechung in Material UI.

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

Information zu älteren Komponenten

Verwenden Sie die ältere Icon-Komponente?

• Um die entsprechende Dokumentation für die alten Komponenten anzuzeigen, wechseln Sie zu einer Version der Dokumentation, die älter als 10.9 ist.
• Die ältere Komponente ist auch in Storybook verfügbar:
  • Symbol

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Symbols und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Beispiel für ein einfaches Symbol

Das Paket @jutro/icons enthält die vorgefertigten Symbolkomponenten. In der Liste der Symbole finden Sie die gesamte Palette der Optionen.

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

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

Benutzerdefiniertes Beispiel

Um ein benutzerdefiniertes Symbol hinzuzufügen, müssen Sie mithilfe der Wrapper-Komponente Icon eine neue Komponente definieren und untergeordnete SVG-Elemente verwenden.

Hinzufügen aus Datei

1. Erstellen Sie einen Ordner für Ihre benutzerdefinierten Symbole. Es wird empfohlen, src/assets/icons zu verwenden.
2. Fügen Sie dem Ordner eine SVG-Datei hinzu, z. B. cust-helicopter.svg.
3. Definieren Sie eine Symbolkomponente mit der hochgeladenen SVG-Datei:

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. Fügen Sie den Pfad zum Symbol-Ordner in Ihrer Umgebung hinzu:

ICONS_PATH=./src/assets/icons

Zeichnung an Ort und Stelle

Wenn Sie ein Symbol an Ort und Stelle zeichnen möchten, anstatt es aus einer Datei zu laden, können Sie SVG-Pfad- oder -Formelemente verwenden. Mit dem folgenden Code wird beispielsweise ein Kreis gezeichnet:

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"
/>

Beispiele

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design eines Symbols und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel

Das Paket @jutro/icons enthält die vorgefertigten Symbolkomponenten. In der Liste der Symbole finden Sie die gesamte Palette der Optionen.

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

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

Benutzerdefiniertes Beispiel

Um ein benutzerdefiniertes Symbol hinzuzufügen, müssen Sie mithilfe der Wrapper-Komponente Icon eine neue Komponente definieren und untergeordnete SVG-Elemente verwenden.

Hinzufügen aus Datei

1. Erstellen Sie einen Ordner für Ihre benutzerdefinierten Symbole. Es wird empfohlen, src/assets/icons zu verwenden.
2. Fügen Sie dem Ordner eine SVG-Datei hinzu, z. B. cust-helicopter.svg.
3. Definieren Sie eine Symbolkomponente mit der hochgeladenen SVG-Datei:

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. Fügen Sie den Pfad zum Symbol-Ordner in Ihrer Umgebung hinzu:

ICONS_PATH=./src/assets/icons

Zeichnung an Ort und Stelle

Wenn Sie ein Symbol an Ort und Stelle zeichnen möchten, anstatt es aus einer Datei zu laden, können Sie SVG-Pfad- oder -Formelemente verwenden. Mit dem folgenden Code wird beispielsweise ein Kreis gezeichnet:

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"
/>

Änderungsprotokoll

10.9.0

Neue Symbolkomponenten

Es wurde ein neues Paket eingeführt: @jutro/icons. Dieses Paket enthält Komponenten für alle Guidewire-Symbole. In der Liste der Symbole finden Sie die gesamte Palette der Optionen.

Es wurde eine neue Umgebungsvariable eingeführt, mit der der veraltete Symbolansatz vollständig deaktiviert werden kann. Wenn die Umgebungsvariable JUTRO_DISABLE_LEGACY_ICONS auf true gesetzt ist, werden sämtliche Konfigurationen bezüglich des Legacy-Symbolansatzes entfernt. Dadurch wird verhindert, dass sie in das DOM geladen werden, und die Legacykomponente Icon wird unbrauchbar.

Abkündigungen

Die Komponente Icon ist veraltet. Sie wurde durch Komponenten im neuen @jutro/icons-Paket ersetzt.

10.1.0

Abkündigungen

• color-Eigenschaft