Icon
Copan fornece um conjunto de ícones de interface comuns que você pode usar em seu projeto. Esses ícones são publicados em um pacote separado e que deve também ser instalado no projeto.
Os ícones presentes nesta biblioteca são gerados através de um plugin no Figma do Material Symbols. Elas já estão transformadas em componentes React, mas caso tenha problemas ou não encontre o que precisa, nos procure no canal #support_squad-tech-tools no Slack.
Para instalar:
npm i @loft/react-iconsPlayground
Propriedades
Nome (* = obrigatório) | Tipo | Valores | Descrição |
|---|---|---|---|
size | string |
| Ícones pequenos são usados para informações adicionais ou itens que precisam de pouco destaque, Ícones médios (padrão) podem ser usados tanto como elementos de interação ou como apoio para ilustrar conteúdo. Ícones grandes e extra grandes devem ser usados apenas em caso de warnings e empty states. |
color | string |
| Cor do ícone, sendo preto por padrão. Para outras cores utilize as cores disponiveis na biblioteca de Tokens. |
Todos os ícones
Icons disponíveis para serem usados.
AccountAddIcon
AccountBoxIcon
AccountCircleIcon
AccountRemoveIcon
AngleLeftIcon
AngleRightIcon
ApartmentIcon
ArrowCircleLeftIcon
ArrowCircleRightIcon
ArrowDownIcon
ArrowLeftIcon
ArrowRightIcon
ArrowUpIcon
AttachFileIcon
BathtubIcon
BedIcon
BoletoIcon
BookIcon
BrushIcon
BulbIcon
BulletListIcon
CalculateIcon
CalendarAddIcon
CalendarCheckIcon
CalendarIcon
CalendarMonthIcon
CalendarTodayIcon
CancelCircleIcon
CarIcon
ChartBar1Icon
ChartBar2Icon
ChartBar3Icon
ChatIcon
CheckCircleIcon
CheckIcon
ClockIcon
CloseIcon
ConstructionIcon
CouchIcon
DesktopIcon
DoorOpenIcon
DoubleCheckIcon
DownloadIcon
DuplicateIcon
EditIcon
EditSquareIcon
EmailIcon
ErrorCircleIcon
ExchangeIcon
ExpandArrowIcon
ExpandLessIcon
ExpandMoreIcon
FacebookIcon
FamilyHomeIcon
FileAddIcon
FileDeleteIcon
FileDoneIcon
FileDownloadIcon
FileIcon
FileMoveIcon
FileUploadIcon
FilterAltIcon
FireIcon
FolderIcon
FolderMoveIcon
FolderSharedIcon
FoodPizzaIcon
FoodRamenIcon
FridgeIcon
GeneralMagicIcon
GroupIcon
HeartHalfIcon
HeartOffIcon
HeartOnIcon
HelpIcon
HistoryIcon
HomeIcon
InboxIcon
InfoIcon
InstagramIcon
Inventory2Icon
IosShareIcon
KeyIcon
LaptopIcon
LaundryIcon
LayoutColumnIcon
LayoutGridIcon
LinkAddIcon
LinkOffIcon
LinkedinIcon
LoadingIcon
LockIcon
LockTimeIcon
LoftIcon
LogoutIcon
MailIcon
MapCompassIcon
MapPinIcon
MenuIcon
MinusCircleIcon
MinusIcon
ModeFanIcon
Money1Icon
Money2Icon
MoreHorizIcon
MoreVertIcon
NatureFlowerOneIcon
NatureTreeIcon
NotificationsIcon
PantoneIcon
PauseIcon
PdfIcon
PetIcon
PhoneAndroidIcon
PhoneIcon
PhoneInTalkIcon
PhotoCameraIcon
PhotoTourIcon
PictureIcon
PixIcon
PlayIcon
PlaylistAddCheckIcon
PlaylistAddIcon
PlaylistIcon
PlaylistRemoveIcon
PlusCircleIcon
PlusIcon
PowerIcon
PrintIcon
PushPinIcon
RainIcon
RouteIcon
RuleIcon
SearchIcon
SellTagIcon
SendIcon
SentimentSadIcon
SentimentSmileIcon
Settings1Icon
Settings2Icon
ShareIcon
ShieldCheckIcon
ShieldDisabledIcon
ShieldLockIcon
ShoppingBagIcon
ShoppingBasketIcon
ShoppingCartIcon
ShowerIcon
SizeIcon
StarHalfIcon
StarOffIcon
StarOnIcon
StoreFrontIcon
StoveIcon
SubjectIcon
SubwayIcon
SunIcon
SunriseIcon
SunsetIcon
TextIcon
ThumbDownIcon
ThumbUpIcon
ThunderIcon
TimerIcon
TrashIcon
TrendingDownIcon
TrendingUpIcon
TwitterIcon
UpRightIcon
UpdateIcon
UploadIcon
UserIcon
VerifiedIcon
VideocamIcon
VisibilityIcon
VisibilityOffIcon
Wallet1Icon
Wallet2Icon
WarningCircleIcon
WarningIcon
WaterMixerIcon
WhatsappIcon
WifiIcon
WindIcon
WineIcon