Logo: Ubie Vitals

Icon

視覚的な「手がかり」を提供

Example#

Props#

NameTypeDefaultDescription
icon
required
"AccountIcon" | "AccountSettingIcon" | "AddressIcon" | "AlertIcon" | "AmbulanceIcon" | "ArrowADownIcon" | "ArrowALeftIcon" | "ArrowARightIcon" | "ArrowAUpIcon" | "ArrowBDownIcon" | "ArrowBLeftIcon" | "ArrowBRightIcon" | "ArrowBUpIcon" | "ArrowCDownFillIcon" | "ArrowCDownIcon" | "ArrowCLeftFillIcon" | "ArrowCLeftIcon" | "ArrowCRightFillIcon" | "ArrowCRightIcon" | "ArrowCUpFillIcon" | "ArrowCUpIcon" | "ArrowDDownIcon" | "ArrowDLeftIcon" | "ArrowDRightIcon" | "ArrowDUpIcon" | "ArrowEDownIcon" | "ArrowELeftIcon" | "ArrowERightIcon" | "ArrowEUpIcon" | "BeginnerIcon" | "BikeIcon" | "BirthdayIcon" | "BlankLinkIcon" | "BookmarkFillIcon" | "BookmarkOutlineIcon" | "BoyIcon" | "CalendarIcon" | "CameraIcon" | "CancelIcon" | "CapsuleIcon" | "CapsuleTabletIcon" | "CarIcon" | "CheckAIcon" | "CheckBFillIcon" | "CheckBIcon" | "CheckboxOffOutlineIcon" | "CheckboxOnOutlineIcon" | "CircleFillIcon" | "CircleOutlineIcon" | "CloseAIcon" | "CloseBIcon" | "CommentBubbleIcon" | "CommentFillIcon" | "CommentOutlineIcon" | "CommentWritingFillIcon" | "CommentWritingOutlineIcon" | "ConditionBad1Icon" | "ConditionBad2Icon" | "ConditionBad3Icon" | "ConditionGood1Icon" | "ConditionGood2Icon" | "ConditionGood3Icon" | "ConditionNormalIcon" | "CopyIcon" | "CreditCardIcon" | "CropIcon" | "DevicesIcon" | "DisplayIcon" | "DoctorBagIcon" | "DoctorIcon" | "DoublecircleIcon" | "DownloadIcon" | "DrawerIcon" | "EcgHeartFillIcon" | "EcgOutlineIcon" | "EditIcon" | "ExpansionIcon" | "FavoliteAddIcon" | "FavoliteOutlineIcon" | "FavoriteAddIcon" | "FavoriteFillIcon" | "FavoriteOutlineIcon" | "FavoriteRemoveIcon" | "FemaleHumanIcon" | "FemaleSymbolIcon" | "FileIcon" | "FilterIcon" | "FingerDownIcon" | "FingerLeftIcon" | "FingerRightIcon" | "FingerUpIcon" | "FirstAidBoxIcon" | "FlagIcon" | "FolderIcon" | "GenderHumanIcon" | "GenderSymbolIcon" | "GirlIcon" | "HelpIcon" | "HideFillIcon" | "HideOutlineIcon" | "HistoryIcon" | "HomeOutlineIcon" | "HospitalIcon" | "ImageIcon" | "InformationIcon" | "InjectionIcon" | "InsuranceCardIcon" | "LaptopIcon" | "LeaderHorizontalIcon" | "LeaderVerticalIcon" | "LightIcon" | "LightOnIcon" | "LockIcon" | "LoginIcon" | "LogoutIcon" | "MailOutlineIcon" | "MaleHumanIcon" | "MaleSymbolIcon" | "ManIcon" | "MapIcon" | "MaskIcon" | "MedicalIdIcon" | "MedicalIdOffIcon" | "MedicalFormIcon" | "MedicalHeartIcon" | "MedicalSymbolFillIcon" | "MedicalSymbolOutlineIcon" | "MemoIcon" | "MenuIcon" | "MicIcon" | "MicMuteIcon" | "MinusAIcon" | "MinusBIcon" | "MoveIcon" | "MuteIcon" | "MynumberCardIcon" | "NotificationIcon" | "NurseIcon" | "OldManIcon" | "OldWomanIcon" | "PenIcon" | "PersonAddIcon" | "PersonRemoveIcon" | "PhoneIcon" | "PinIcon" | "PlusAIcon" | "PlusBIcon" | "PostIcon" | "PostalCodeIcon" | "PrinterIcon" | "QrCodeReaderIcon" | "RangeSelectionIcon" | "ReceptionIcon" | "RedoIcon" | "ReloadIcon" | "ReturnIcon" | "RotateIcon" | "SearchIcon" | "SecurityIcon" | "SendIcon" | "SettingIcon" | "SetupIcon" | "ShareIcon" | "ShareBIcon" | "ShowFillIcon" | "ShowOutlineIcon" | "ShrinkIcon" | "SickIcon" | "SmartphoneIcon" | "SortAtozIcon" | "SortIcon" | "SquareIcon" | "StarFillIcon" | "StarHalfIcon" | "StarOutlineIcon" | "StethoscopeIcon" | "TabletIcon" | "ThumbDownFillIcon" | "ThumbDownOutlineIcon" | "ThumbUpFillIcon" | "ThumbUpOutlineIcon" | "TrainIcon" | "TrashEmptyIcon" | "TrashIcon" | "TriangleDownIcon" | "TriangleUpIcon" | "UbieIcon" | "UnfoldMoreIcon" | "UnlockIcon" | "UploadIcon" | "VirusIcon" | "VolumeIcon" | "WalkIcon" | "WeightScaleIcon" | "WheelchairIcon" | "WomanIcon" | "WorkflowIcon"-アイコンの種類
color
optional
"main" | "sub" | "link" | "linkSub" | "disabled" | "primary" | "accent" | "alert" | "white"-色。指定しない場合はinheritとなり、親要素のcolorプロパティを継承します
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"mdサイズ xs=16px, sm=20px, md=24px, lg=28px, xl=32px, 2xl=64px, 3xl=80px, 4xl=104px
id
optional
string-ネイティブの`id`属性。ページで固有のIDを指定
label
optional
string-アイコンが何を表すかを説明するテキスト 単に装飾的なアイコンの場合は指定しない
data-*
optional
string-Custom data attributes

Feature#

  • ユーザーの注目を引き、形から連想される意味によってユーザーの理解を助けることができます
  • @ubie-oss/ubie-iconsに存在するアイコンを使用できます
    • @ubie-oss/ubie-iconsを単独で使う場合と比べスタイリングが容易です

Usage#

アイコンのバリエーションはElements/Iconsを参照してください。

スタイリング#

propを通して可能です。

<Icon icon="AlertIcon" color="alert" />
<Icon icon="UbieIcon" size="2xl" />

色を指定しない場合は、親要素のcolorの影響を受けます。 次の場合は、アイコンはprimaryカラーとなります。

<Color color="primary">
  <Icon icon="UbieIcon" /> Ubie Vitals
</Color>

アイコン単独での使用#

基本的には、アイコンはテキストと併用して利用することを推奨します。アイコンの持つ意味が100%ユーザーに伝わるとは限りません。

単独で使用する場合は、label propにそのアイコンがどういった意味を持つかを記述してください。 labelを使わない場合、支援技術等からはアイコン自体がみえません1 。

<Icon icon="SetupIcon" label="設定" />

コントラストを確保する#

テキストと同様に、コントラストを確保し視覚的にアイコンを見やすくしましょう。特にアイコン単体で使うような場合、必ずコントラストを確保すべきです。 アイコンが見づらいものである場合、その機能も果たせなくなっているはずです。

WCAG では隣接した色とのコントラスト比を 3:1 以上とすることを推奨しています。

参考:

Footnotes#

  1. Windows NVDAの場合 - ユビー AI 受診相談でほんとうに起きていた怖い話 ↩