Ícones nas Traduções

O Nerdify permite definir ícones para componentes, actions e fieldsets através dos arquivos de tradução YAML.

---

Sintaxe Básica

Adicione a chave icon no componente:

components:
  edit_customer:
    name: Editar
    icon: edit

  destroy_customer:
    name: Excluir
    icon: delete

---

Ícones em Actions

Actions podem ter ícones definidos na tradução:

components:
  new_customer:
    name: Novo Cliente
    icon: add

  edit_customer:
    name: Editar
    icon: edit

  destroy_customer:
    name: Excluir
    icon: delete
    confirm: Tem certeza que deseja excluir?

  export_customers:
    name: Exportar
    icon: file_download

  print_customer:
    name: Imprimir
    icon: print

---

Ícones em Fieldsets

Fieldsets podem ter ícones no header:

components:
  customer_form:
    name: Dados do Cliente
    icon: person

  address_form:
    name: Endereço
    icon: location_on

  financial_info:
    name: Informações Financeiras
    icon: attach_money

---

Ícones em Tabs

Tabs podem ter ícones junto com o label:

components:
  tabs_customer:
    inclusion:
      about:
        label: Cadastro
        icon: person
      pets:
        label: Pets
        icon: pets
      sales:
        label: Vendas
        icon: shopping_cart
      addresses:
        label: Endereços
        icon: location_on

---

Ícones em Campos Select

Opções de campos select podem ter ícones:

components:
  status:
    name: Status
    inclusion:
      active:
        label: Ativo
        value: active
        id: active
        icon: check_circle
      inactive:
        label: Inativo
        value: inactive
        id: inactive
        icon: cancel
      pending:
        label: Pendente
        value: pending
        id: pending
        icon: schedule

---

Ícones Disponíveis

O Nerdify usa Material Design Icons. Alguns ícones comuns:

Ações

Ícone	Nome
➕	add
✏️	edit
🗑️	delete
💾	save
❌	close
✅	check
↩️	undo
↪️	redo

Navegação

Ícone	Nome
🏠	home
◀️	arrow_back
▶️	arrow_forward
🔍	search
☰	menu
⚙️	settings

Status

Ícone	Nome
✅	check_circle
❌	cancel
⚠️	warning
ℹ️	info
❓	help
⏰	schedule

Objetos

Ícone	Nome
👤	person
👥	people
🛒	shopping_cart
💰	attach_money
📍	location_on
📧	email
📱	phone
🐾	pets

Arquivos

Ícone	Nome
📄	description
📁	folder
⬇️	file_download
⬆️	file_upload
🖨️	print

---

Verificando Ícones Disponíveis

No Rails console, você pode verificar ícones:

# Verificar se um ícone existe
Nerdify::MaterialIcon.options.include?("shopping_cart")  # => true

# Buscar um ícone com fallback
Nerdify::MaterialIcon.find("meu_icone")  # => "info" (fallback)

---

Exemplo Completo

---
pt-BR:
  api/v1/platform/modules/customers/customers:
    show:
      title: Cliente
      components:
        # Actions com ícones
        edit_customer:
          name: Editar
          icon: edit
        destroy_customer:
          name: Excluir
          icon: delete
          confirm: Tem certeza?
        new_sale:
          name: Nova Venda
          icon: add_shopping_cart

        # Fieldsets com ícones
        customer_info:
          name: Informações
          icon: person
        contact_info:
          name: Contato
          icon: contact_phone

        # Tabs com ícones
        tabs_customer:
          inclusion:
            about:
              label: Cadastro
              icon: person
            pets:
              label: Pets
              icon: pets
            sales:
              label: Vendas
              icon: receipt
            addresses:
              label: Endereços
              icon: place

        # Campo select com ícones
        status:
          name: Status
          inclusion:
            active:
              label: Ativo
              icon: check_circle
              value: active
              id: active
            blocked:
              label: Bloqueado
              icon: block
              value: blocked
              id: blocked

---

Boas Práticas

Faça

• Use ícones consistentes para ações similares em toda a aplicação
• Escolha ícones intuitivos que representem a ação/conceito
• Teste se o ícone existe antes de usar

Evite

• Usar ícones que não existem no Material Design
• Ícones que não representam claramente a ação
• Excesso de ícones que polui a interface