Ícones do Flex UI (IU do Flex)
Os ícones a seguir estão disponíveis para uso no Flex UI (IU do Flex). Você pode utilizar esses ícones ao adicionar novos botões no cabeçalho ou na barra lateral do Flex:
import { Icon } from '@twilio/flex-ui';
const Component = (props) => {
return (
<Icon icon="Accept"/>
);
}
Criar ícones personalizados
Você também pode criar seus próprios ícones personalizados usando arquivos SVG. Primeiro, crie um módulo personalizado usando o(s) SVG(s) desejado(s):
export const PayIcon = (props) => {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
...
</svg>
);
}
export const PayIconActive = (props) => {
return (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
...
</svg>
);
}
Em seguida, importe e use o módulo de ícones:
import { PayIcon, PayIconActive } from "./PayIcons";
// Use it in a component
<PaymentTab
key="payment-tab"
icon={<PayIcon />}
iconActive={<PayIconActive />}
/>
Ícones padrão
Os nomes dos ícones fazem distinção entre maiúsculas e minúsculas.
Ícone | Nome |
![]() |
Accept |
![]() |
AcceptLarge |
![]() |
Add |
![]() |
Agente |
![]() |
AgentBold |
![]() |
Agentes |
![]() |
AgentsBold |
![]() |
Alert |
![]() |
ArrowDown |
![]() |
ArrowLeft |
![]() |
ArrowRight |
![]() |
ArrowUp |
![]() |
Bulb |
![]() |
BulbBold |
![]() |
Chamada |
![]() |
CallBold |
![]() |
Fechar |
![]() |
CloseLarge |
![]() |
Cogs |
![]() |
Painel |
![]() |
DashboardBold |
![]() |
Dados |
![]() |
DataBold |
![]() |
DefaultAvatar |
![]() |
DefaultAvatarBold |
![]() |
Directory |
![]() |
DirectoryBold |
![]() |
Eye |
![]() |
EyeBold |
![]() |
|
![]() |
FacebookBold |
![]() |
Filtro |
![]() |
FilterUp |
![]() |
GenericTask |
![]() |
GenericTaskBold |
![]() |
Hamburger |
![]() |
Hangup |
![]() |
HangupBold |
![]() |
HangupLarge |
![]() |
Ajuda |
![]() |
HelpBold |
![]() |
Espera |
![]() |
HoldBold |
![]() |
HoldLarge |
![]() |
HoldLargeBold |
![]() |
IncomingCall |
![]() |
IncomingCallBold |
![]() |
Info |
![]() |
InfoBold |
![]() |
Line |
![]() |
LineBold |
![]() |
Loading |
![]() |
Logout |
![]() |
LogoutBold |
![]() |
Mensagem |
![]() |
MessageBold |
![]() |
Monitor |
![]() |
MonitorOff |
![]() |
Mais |
![]() |
Desativar som |
![]() |
MuteBold |
![]() |
MuteLarge |
![]() |
MuteLargeBold |
![]() |
Read |
![]() |
Resize |
![]() |
SendLarge |
![]() |
Configurações |
![]() |
SettingsBold |
![]() |
SideMenuOff |
![]() |
SideMenuOn |
![]() |
Sms |
![]() |
SmsBold |
![]() |
Suggested |
![]() |
Supervisor |
![]() |
SupervisorBold |
![]() |
TasksLarge |
![]() |
TasksSmall |
![]() |
Thumbdown |
![]() |
ThumbdownBold |
![]() |
Thumbup |
![]() |
ThumbupBold |
![]() |
Twilio |
![]() |
Vídeo |
![]() |
VideoBold |
![]() |
Voice |
![]() |
VoiceBold |
![]() |
Volume |
![]() |
VolumeBold |
![]() |
|
![]() |
WhatsappBold |
Precisa de ajuda?
Às vezes, todos nós precisamos; a programação é difícil. Receba ajuda agora da nossa equipe de suporte, ou confie na sabedoria da multidão navegando pelo Stack Overflow Collective da Twilio ou buscando a tag Twilio no Stack Overflow.