Icon component
Examples
Check out the Usage section for details about how to design an icon properly, and the different configuration options we provide.
Basic Example
The @jutro/icons package contains the pre-made icon components. See the List of icons for the full range of options.
import {
AccessTimeIcon,
ChevronLeftIcon,
CheckIcon,
CoveragesIcon,
} from '@jutro/icons';
<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />
Custom Example
To add a custom icon you will need to define a new component using the Icon wrapper component and use SVG children elements.
Adding from file
- Create a folder to store your custom icons. We recommend using
src/assets/icons. - Add an SVG file to the folder, for example
cust-helicopter.svg. - Define an icon component using the SVG file you uploaded:
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"
/>
- Add the path to the icons folder in your environment:
ICONS_PATH=./src/assets/icons
Drawing in place
To draw an icon in place instead of loading from a file, you can use SVG path or shape elements. For example, the code below will draw a circle:
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"
/>
Usage
Icon components render a single icon. Webpack loads the icon as a symbol at the top of the page, and the browser calculates the proper SVG in place.
You have the following options:
- Use a Guidewire icon. You can look them up here.
- Use the
Iconwrapper to define a custom icon.
Accessibility
For guidelines on providing alternative text for icons, refer to the Building accessible experiences page.
Code
Icons in jutro are a collection of components that inherit from the Icon wrapper in the @jutro/icons package.
import {
AccessTimeIcon,
ChevronLeftIcon,
CheckIcon,
CoveragesIcon,
} from '@jutro/icons';
<AccessTimeIcon />
<ChevronLeftIcon />
<CheckIcon />
<CoveragesIcon />
Import statement
All icons are imported from the @jutro/icons package.
import { [icon component name] } from '@jutro/icons';
See the List of icons for the full range of options.
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
All icon components share the following properties.
children- Type
React.ReactNodeDescriptionContents of the SVG icon as React elements, without <svg> tag.
className- Type
stringDescriptionCSS class name for this component.
size- Type
'small' | 'medium' | 'large'DescriptionDetermines the size of icon.
Default value'large'
Hooks
No hooks are available for Icon components.
Translation keys
There are no translations for Icon components.
For information on how to manage translations, see our section about Internationalization.
Escape Hatches
For more information, see our documentation about escape hatches.
Migrating from material to Guidewire icons
You can replace your material icons with Guidewire icons by replacing the the icon with the equivalent Guidewire icon component. But Guidewire icons are rendered differently, so you may need to adjust some of your code or tests.
If you use a material icon, Jutro app renders it like this:
<i class="mir mi-account-circle"></i>
However, if you use a Guidewire icon, Jutro app renders it like this:
<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>
This can influence your code or tests if:
- You use selectors in your CSS to match any of the elements rendered by the icon component.
- Your app logic depends on the HTML structure of the icon.
Icon mapping
The following is a list of Material UI icons and their Jutro equivalents. You can view the full list of icons on the List of icons page.
mi-access-time:<AccessTimeIcon/>mi-accessible:<AccessibleIcon/>mi-account-balance:<AccountBalanceIcon/>mi-account-box:gw-accounts.svgmi-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/>.svgmi-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/>
The following Jutro icons have no equivalents 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/>
Legacy information
Are you using the legacy Icon component?
- To view docs for the old component, switch to a version of the documentation older than 10.9.
- The legacy component is also available in Storybook:
Changelog
10.9.0
New icon components
A new package has been introduced: @jutro/icons. This package contains components for all Guidewire icons. See the List of icons for the full range of options.
A new environment variable to opt out of the deprecated icons approach completely has been introduced. If the JUTRO_DISABLE_LEGACY_ICONS environment variable is set to true it will remove all configuration regarding the legacy icon approach. This will prevent them from being loaded into the DOM and make the legacy Icon component unusable.
Deprecations
The Icon component was deprecated. It has been replaced with components in the new @jutro/icons package.
10.1.0
Deprecations
colorprop