You are viewing the Portuguese (Brazil) site, but your language preference is set to English. Switch to English site →

Menu

Í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
IcnAccept
Accept
IcnAcceptLarge
AcceptLarge
IcnAdd
Add
IcnAgent
Agente
IcnAgentBold
AgentBold
IcnAgents
Agentes
IcnAgentsBold
AgentsBold
IcnAlert
Alert
IcnArrowDown
ArrowDown
IcnArrowLeft
ArrowLeft
IcnArrowRight
ArrowRight
IcnArrowUp
ArrowUp
IcnBulb
Bulb
IcnBulbBold
BulbBold
IcnCall
Chamada
IcnCallBold
CallBold
IcnClose
Fechar
IcnCloseLarge
CloseLarge
IcnCogs
Cogs
IcnDashboard
Painel
IcnDashboardBold
DashboardBold
IcnData
Dados
IcnDataBold
DataBold
IcnDefaultAvatar
DefaultAvatar
IcnDefaultAvatarBold
DefaultAvatarBold
IcnDirectory
Directory
IcnDirectoryBold
DirectoryBold
IcnEye
Eye
IcnEyeBold
EyeBold
IcnFacebook
Facebook
IcnFacebookBold
FacebookBold
IcnFilter
Filtro
IcnFilterUp
FilterUp
IcnGenericTask
GenericTask
IcnGenericTaskBold
GenericTaskBold
IcnHamburger
Hamburger
IcnHangup
Hangup
IcnHangupBold
HangupBold
IcnHangupLarge
HangupLarge
IcnHelp
Ajuda
IcnHelpBold
HelpBold
IcnHold
Espera
IcnHoldBold
HoldBold
IcnHoldLarge
HoldLarge
IcnHoldLargeBold
HoldLargeBold
IcnIncomingCall
IncomingCall
IcnIncomingCallBold
IncomingCallBold
IcnInfo
Info
IcnInfoBold
InfoBold
IcnLine
Line
IcnLineBold
LineBold
IcnLoading
Loading
IcnLogout
Logout
IcnLogoutBold
LogoutBold
IcnMessage
Mensagem
IcnMessageBold
MessageBold
IcnMonitor
Monitor
IcnMonitorOff
MonitorOff
IcnMore
Mais
IcnMute
Desativar som
IcnMuteBold
MuteBold
IcnMuteLarge
MuteLarge
IcnMuteLargeBold
MuteLargeBold
IcnRead
Read
IcnResize
Resize
IcnSendLarge
SendLarge
IcnSettings
Configurações
IcnSettingsBold
SettingsBold
IcnSideMenuOff
SideMenuOff
IcnSideMenuOn
SideMenuOn
IcnSms
Sms
IcnSmsBold
SmsBold
IcnSuggested
Suggested
IcnSupervisor
Supervisor
IcnSupervisorBold
SupervisorBold
IcnTasksLarge
TasksLarge
IcnTasksSmall
TasksSmall
IcnThumbdown
Thumbdown
IcnThumbdownBold
ThumbdownBold
IcnThumbup
Thumbup
IcnThumbupBold
ThumbupBold
IcnTwilio
Twilio
IcnVideo
Vídeo
IcnVideoBold
VideoBold
IcnVoice
Voice
IcnVoiceBold
VoiceBold
IcnVolume
Volume
IcnVolumeBold
VolumeBold
IcnWhatsapp
WhatsApp
IcnWhatsappBold
WhatsappBold
Classifique esta página:

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.

Obrigado pelo seu feedback!

Selecione o(s) motivo(s) para seu feedback. As informações adicionais que você fornece nos ajudam a melhorar nossa documentação:

Enviando seu feedback...
🎉 Obrigado pelo seu feedback!
Algo deu errado. Tente novamente.

Obrigado pelo seu feedback!

Indique‑nos e obtenha USD10 em 3 etapas simples!

Etapa 1

Obtenha o link

Obtenha um link de indicação pessoal gratuito aqui

Etapa 2

Dê USD10

Seu usuário se inscreve e faz a atualização usando o link

Etapa 3

Obtenha USD10

1.250 mensagens SMS grátis
OU 1.000 min de voz grátis
OU 12.000 chats
OU mais