Componente ícono

Componente ícono en Storybook

Uso

Los componentes Icon renderizan un solo ícono. Webpack carga el ícono como símbolo en la parte superior de la página y el explorador calcula el SVG adecuado. Tiene las siguientes opciones:

• Utilice un ícono de Guidewire. Puede buscarlos aquí.
• Utilice el encapsulador Icon para definir un ícono personalizado.

Accesibilidad

Para obtener pautas sobre cómo proporcionar texto alternativo para los íconos, consulte la página Creación de experiencias accesibles.

Código

Los íconos en Jutro son una colección de componentes que se heredan del encapsulador Icon en el paquete @jutro/icons.

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

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

Instrucción de importación

Todos los íconos se importan desde el paquete @jutro/icons.

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

Consulte la lista de íconos para ver la gama completa de opciones.

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

Todos los componentes ícono comparten las siguientes propiedades.

children

Tipo

React.ReactNode

Descripción

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

className

Tipo

string

Descripción

CSS class name for this component.

size

Tipo

'small' | 'medium' | 'large'

Descripción

Determines the size of icon.

Valor predeterminado

'large'

Ganchos

No hay ganchos para los componentes Icon.

Claves de traducción

No hay traducciones para los componentes Icon.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Migración desde íconos de Material a los de Guidewire

Puede reemplazar sus íconos de Material por íconos de Guidewire mediante la sustitución del ícono por el componente ícono equivalente de Guidewire. Sin embargo, los íconos de Guidewire se renderizan de manera diferente, por eso, es posible que deba ajustar algunos de sus códigos o pruebas.

Si usa un ícono de Material, la aplicación Jutro lo renderiza así:

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

Sin embargo, si usa un ícono de Guidewire, la aplicación Jutro lo renderiza así:

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

Esto puede influir en su código o sus pruebas si:

• Utiliza selectores en su CSS para hacer coincidir cualquiera de los elementos renderizados por el componente de ícono.
• La lógica de su aplicación depende de la estructura HTML del ícono.

Asignación de íconos

La siguiente lista contiene íconos de Material UI y sus equivalentes de Jutro. Puede ver la lista completa de íconos en la página de la lista de íconos.

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

Los siguientes íconos de Jutro no tienen equivalentes en 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/>

Información heredada

¿Está utilizando el componente heredado Icon?

• Para ver los documentos del componente antiguo, consulte una versión de la documentación anterior a la 10.9.
• El componente heredado también está disponible en Storybook:
  • Ícono

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un ícono correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de ícono básico

El paquete @jutro/icons contiene los componentes ícono prediseñados. Consulte la lista de íconos para ver la gama completa de opciones.

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

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

Ejemplo personalizado

Para agregar un ícono personalizado, deberá definir un nuevo componente con el componente encapsulador Icon y usar elementos secundarios SVG.

Cómo agregar desde archivo

1. Cree una carpeta para almacenar sus íconos personalizados. Recomendamos usar src/assets/icons.
2. Agregue un archivo SVG a la carpeta, por ejemplo cust-helicopter.svg.
3. Defina un componente ícono mediante el archivo SVG que cargó:

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. Agregue la ruta a la carpeta de íconos en su entorno:

ICONS_PATH=./src/assets/icons

Dibujo en el sitio

Para dibujar un ícono en su ubicación, en lugar de cargarlo desde un archivo, puede usar la ruta SVG o elementos de forma. Por ejemplo, mediante el siguiente código se dibujará un círculo:

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

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un ícono correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo básico

El paquete @jutro/icons contiene los componentes ícono prediseñados. Consulte la lista de íconos para ver la gama completa de opciones.

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

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

Ejemplo personalizado

Para agregar un ícono personalizado, deberá definir un nuevo componente con el componente encapsulador Icon y usar elementos secundarios SVG.

Cómo agregar desde archivo

1. Cree una carpeta para almacenar sus íconos personalizados. Recomendamos usar src/assets/icons.
2. Agregue un archivo SVG a la carpeta, por ejemplo cust-helicopter.svg.
3. Defina un componente ícono mediante el archivo SVG que cargó:

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. Agregue la ruta a la carpeta de íconos en su entorno:

ICONS_PATH=./src/assets/icons

Dibujo en el sitio

Para dibujar un ícono en su ubicación, en lugar de cargarlo desde un archivo, puede usar la ruta SVG o elementos de forma. Por ejemplo, mediante el siguiente código se dibujará un círculo:

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

Registro de cambios

10.9.0

Nuevos componentes ícono

Se introdujo un nuevo paquete: @jutro/icons. Este paquete contiene componentes para todos los íconos de Guidewire. Consulte la lista de íconos para ver la gama completa de opciones.

Se introdujo una nueva variable de entorno para excluirse por completo del método de íconos obsoletos. Si la variable de entorno JUTRO_DISABLE_LEGACY_ICONS se establece en true, eliminará toda la configuración relacionada con el método de íconos heredados. Esto evitará que se carguen en el DOM y hará que el componente heredado Icon sea inutilizable.

Elementos obsoletos

El componente Icon quedó obsoleto. Se ha reemplazado por componentes en el nuevo paquete @jutro/icons.

10.1.0

Elementos obsoletos

• Propiedad color