Ícones

Todos os ícones podem ser usados em vários lugares na visualização. Assim, é possível defini-los como variável ou texto.

Para exibir um ícone na visualização, ele é declarado diretamente no texto usando a tag [icon:SYMBOLPFAD]. O caminho do ícone pode ser copiado da biblioteca de ícones usando o botão direito do mouse ou com CTRL+C. Sempre que possível, deve-se escolher apenas os Material Symbols para manter o estilo da visualização consistente.

Biblioteca De Ícones

Todos os ícones disponíveis podem ser acessados e pesquisados no menu de contexto Visualização ▸ Ícones. Também é possível importar um conjunto personalizado de ícones para a biblioteca. O procedimento será explicado mais adiante.

Observações: O nome exibido na lista de ícones não é idêntico ao caminho do ícone. Se nenhum conjunto de ícones for especificado no caminho, o conjunto Glyphicons será usado automaticamente.

O filtro na biblioteca de ícones também pesquisa pelas tags registradas. Se esse comportamento não for desejado, o filtro pode começar com um = para pesquisar apenas nos nomes.

Conjunto De Ícones Material Symbols (Padrão)

Este conjunto de ícones é completamente dinâmico e o estilo dos ícones é configurado automaticamente de acordo com o design da visualização. Além disso, um ícone preenchido é usado automaticamente quando o ícone deve estar ativo. No entanto, nem todos os ícones têm uma variante preenchida.

Os ícones são arredondados automaticamente se o raio do botão for maior ou igual a 16 pixels. Se o raio for igual a 0px, os ícones afiados serão usados. No editor, no entanto, os ícones normais sempre são usados.

Observação: Recomenda-se usar o conjunto de ícones "Material Symbols" para manter a visualização consistente.

Conjunto De Ícones Material Animated

Existem alguns ícones selecionados do Material Symbols que foram animados para representar valores. Esses ícones têm apenas uma animação com o ícone da estrutura. Ao selecioná-los, outras variáveis serão liberadas.

Conjunto De Ícones Philips Hue

Os ícones do Philips Hue podem ser usados livremente se a interface Hue for usada. Além disso, há um conjunto adicional de ícones Hue da comunidade do Home Assistant HASS. Mais informações podem ser encontradas no final deste capítulo.

Conjunto De Ícones Clima

Este conjunto de ícones exibe os ícones climáticos na visualização. Eles são suportados sem costuras por várias interfaces. Veja o capítulo abaixo Ícones Climáticos.

Conjunto De Ícones Legacy (Obsoleto)

O conjunto de ícones Legacy inclui todos os ícones da antiga visualização. O estilo de exibição da nova interface permanece o mesmo. Os ícones não devem mais ser usados, pois sua representação não foi otimizada para a nova interface.

Vários ícones antigos ainda estão animados:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Ícones Ocultos

Também existem ícones ocultos para a visualização. Eles serão explicados mais detalhadamente nos capítulos seguintes.

Apenas um prefixo de URL é necessário para chamar os ícones.

Conjuntos Personalizados De Ícones

É possível importar um conjunto personalizado de ícones para o projeto. Cada conjunto de ícones deve ser preparado como um arquivo ZIP. Alguns dados de exemplo podem ser baixados aqui:

Dica Profissional: Após a importação bem-sucedida, você pode exportar o conjunto de ícones como .antobj para simplificar a importação. Para isso, clique com o botão direito do mouse em um conjunto de ícones e selecione Exportar.

As regras a seguir definem a estrutura e os requisitos de um conjunto de ícones. Por favor, leia-as cuidadosamente e siga-as exatamente.

Regras

  • Prefixo
    • Pode conter apenas _, a–z e 0–9.
    • Letras maiúsculas são convertidas automaticamente para minúsculas.
    • Nomes reservados como sys, src ou doc são inválidos.
    • Deve começar com uma letra (a–z). Apenas números não são permitidos.
    • Sublinhados finais (_) são removidos.
    • Deve ter pelo menos 3 caracteres de comprimento.
    • Múltiplos sublinhados (__) são reduzidos a um único.
  • Nomes De Ícones
    • São convertidos automaticamente para minúsculas.
    • Caracteres permitidos são -, _, a–z e 0–9.
    • Nomes longos e prefixos devem ser evitados.
    • Um prefixo deve ser único e usado apenas uma vez.
    • Se um ícone tiver o mesmo nome e prefixo que um ícone do sistema, ele pode substituí-lo.
  • Restrições De Arquivo
    • Tamanho máximo do arquivo após limpeza: 10 kB. Arquivos maiores serão rejeitados.
    • Arquivos SVG devem estar limpos:
      • Quebras de linha são removidas automaticamente.
      • Os seguintes elementos são excluídos: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Os seguintes atributos são excluídos: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Ícones com scripts, imagens, CSS ou recursos externos incorporados serão rejeitados.
      • Se os estilos contiverem cores ou blocos de estilo, a importação também pode ser rejeitada.
  • Requisitos Do Cabeçalho SVG
    • Deve conter: viewBox, width e height. Valores ausentes serão complementados automaticamente, se possível.
    • Deve conter o namespace: xmlns="http://www.w3.org/2000/svg". Se estiver ausente ou incorreto, será complementado automaticamente.
    • O nome do ícone deve corresponder exatamente às dimensões, caso contrário o ícone será rejeitado.
    • As dimensões devem ser quadradas (largura = altura). Padrão: 24px.
    • Estilos conflitantes ou dimensões inadequadas devem ser evitados.
  • Geral
    • Ícones mal criados podem causar lentidão significativa na exibição ou até mesmo falhas.
    • Certifique-se de respeitar os direitos autorais dos ícones.
    • Todos os vetores são arredondados para três casas decimais.

Estrutura

  • O arquivo iconset.ini é obrigatório para reconhecer o conjunto de ícones.
    • Ele pode estar na raiz do arquivo ZIP ou em uma subpasta.
    • Deve estar em minúsculas (iconset.ini).
    • Os nomes dos arquivos de ícones não são sensíveis a maiúsculas e minúsculas.
  • A importação não busca automaticamente por arquivos SVG.
    • A pasta de ícones deve ser definida explicitamente em iconset.ini (observe a diferenciação entre maiúsculas e minúsculas).
    • Na estrutura do arquivo ZIP, uma pasta chamada icons/ foi definida.
  • Subpastas
    • As subpastas na pasta definida (icons/) servem como categorias.
    • Os nomes dos ícones devem ser únicos em todas as categorias.
    • Regras de nomeação na pasta de ícones:
      • Mínimo: Apenas dimensão e extensão do arquivo (por exemplo, 24.svg).
      • Variantes como filled24.svg ou round_filled_24.svg são válidas.
      • Nomes de arquivo com múltiplos números (por exemplo, 24_48.svg) são inválidos.
      • Variantes de estilo são reconhecidas por:
        • Preenchido: Deve conter filled ou fill.
        • Arredondado: Deve conter round.
        • Afiado: Deve conter sharp.
        • Arredondado e afiado não podem ser combinados.
      • Se várias regras se aplicarem, o arquivo reconhecido por último será usado (a seleção pode parecer aleatória).
  • Outras Regras
    • Subpastas aninhadas não são pesquisadas (elas podem ser usadas para backups ou originais).
    • Arquivos sem .svg serão ignorados.
    • Em uma pasta de ícones, pode haver um arquivo chamado tags.txt para adicionar tags de pesquisa adicionais.
      • Tags podem ser separadas por ,, ; ou quebras de linha.

Conjuntos Especiais De Ícones

Também existem vários conjuntos especiais de ícones que podem ser importados como conjuntos personalizados de ícones, mas não precisam ser configurados de acordo com as especificações acima.

Ícones Hass Hue

Um deles é o da página do GitHub hass-hue-icons. Este é um conjunto adicional de ícones Hue da comunidade do Home Assistant HASS e só pode ser usado para projetos não comerciais, pois está sob a licença Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. Por isso, o conjunto de ícones não é fornecido com o Antcas Control. No entanto, os ícones podem ser importados a qualquer momento como um novo conjunto de ícones no projeto usando o arquivo ZIP hass-hue-icons-main.zip. Observe as condições de licença do projeto na página da web do GitHub.

Fonte: https://github.com/arallsopp/hass-hue-icons.

Ícones Material Design de Pictogrammers

Outro é o dos Pictogrammers. Para isso, o arquivo mdi-###.json deve ser compactado em um arquivo ZIP e importado. O arquivo pode ser encontrado e baixado no console de desenvolvedor do navegador. Tentamos combinar os ícones de contorno com os preenchidos. A biblioteca é quase idêntica aos Material Symbols. No entanto, há muitas extensões da comunidade. Se você quiser integrar outros conjuntos de ícones na biblioteca, sinta-se à vontade para nos perguntar.

Fonte: https://pictogrammers.com/library/mdi/

Páginas Subordinadas