Aula 04

Ícones do App

Favicon e Ícones

Favicon

Um pequeno ícone gráfico que representa um site ou uma página da web. Ele aparece em diversos locais do navegador.

Ícones

São usados no PWA em diferentes tamanhos e formatos que representam o aplicativo em dispositivos e navegadores, sendo usados em atalhos na tela inicial, splash screens e barras de tarefas.

Mão no Código

1. Em https://icon-sets.iconify.design/flat-color-icons/page-2.html?keyword=color, escolher um ícone qualquer;

2. Copiar o SVG;

3. Criar um arquivo ./public/logo.svg;

4. Colar o SVG e Salvar;

5. No Terminal no root do projeto, digitar pnpm generate-pwa-assets;

Root

Path inicial do projeto, ponto de partida para toda a estrutura do código.

6. ✨ Arquivos criados em ./public. Atualize o navegador e note o novo ícone;

Saiba Mais

• mdn

Snippets

São atalhos para trechos de código.

Snippets [vscode]

Trechos de código pré-definidos que podem ser inseridos rapidamente por meio de palavras-chave.

Mão no Código

1. No path ./.vscode crie um arquivo default.code-snippets, e cole o conteúdo abaixo:

{
  "Vue Base Component": {
    "prefix": "vbase",
    "body": [
      "<script setup lang='ts'>",
      "",
      "</script>",
      "",
      "<template>",
      "$0",
      "</template>",
      ""
    ],
    "description": "Vue base component with script first and no style"
  }
}

WARNING

No nome do arquivo; "default" pode ser qualquer coisa e a extensão "code-snippets" é obrigatória.

2. Teste com o prefix vbase e Tab. Observe que $0, indica a posição do cursor após o trigger.

Frontend

Mão no Código

1. Criar a página inicial vazia;

2. Adicionar um elemento qualquer;