vindi-ds-icons

Svgs para Componentes Reacts

Usage no npm install needed!

<script type="module">
  import vindiDsIcons from 'https://cdn.skypack.dev/vindi-ds-icons';
</script>

README

DS Repositories Icons

O projeto foi criado para flexibilizar e agilizar o processo de criação de SVGs em componentes React.

O projeto está em uma estrutura de mono repositório (monorepo), ou seja, dentro desse repositório temos mais de um projeto. Essa abordagem facilita a concentração de projetos relacionados, facilitando a manutenção.

Estrutura

O repositório possui cinco projetos:


$ tree -L 1 packages/

packages
├── preview
├── react-icons
├── teste
├── ts-test
└── webpack4-test

  • preview: Esse é um projeto em react, que renderiza os ícones do gerados pelo projeto react-icons gerando um site estático. Seu principal propósito é servir de documentação para o consumo dos ícones.
  • react-icons: Esse projeto é responsável por converter os arquivos *.svg em componentes React. É dele que geramos o pacote no NPM vindi-ds-icons e disponibilizamos para serem utilizados.
  • teste: É um projeto simples, criado para testar a importação e exibição dos ícones da biblioteca publicada.
  • ts-teste: Projeto que testar os ícones (em WIP)
  • webpack4-test: Projeto que testar a conversão dos arquivos *.svg em componentes React.

Primeiros passos

Ao clonar o projeto, rode os seguintes comandos:

  yarn                     /* Instalando todas as dependências do projeto */
  cd packages/react-icons
  yarn build               /* Criando os componentes React a partir dos svgs */

Em caso error de dependências, rode novamente o comando yarn na pasta do projeto com erro

Preview do Site

Ao instalar as dependências e criar os componentes, rode os comandos abaixo para rodar o site:

  cd ../preview
  yarn start       /* Rodas a aplicação no endereço http://localhost:3000 */

Distribuições

Esse projeto distribuímos dois artefactos:

Deploy manual do pacote NPM

Para executar o processo manual de distribuição do pacote npm, siga as instruções:

  1. Acesse a pasta do projeto react-icons
  cd packages/react-icons
  1. Atualize a versão do pacote
  yarn version
  1. Build o projeto
  yarn build
  1. Faça login na conta NPM do time de DS (solicite as credenciais com o time pelo slack)
 npm login
  1. Publique o projeto
  npm publish

Pronto, uma nova versão do pacote foi publicada.

Link de acesso: https://www.npmjs.com/package/vindi-ds-icons

Deploy manual do site

Para executar o processo manual de distribuição do site, siga as instruções:

  1. Configuração da AWS CLI

Para realizar o deploy é necessário configurar o AWS CLI, para isso vai ser necessário criar chaves de acesso ou utilizar as já existentes.

Configure as credenciais das contas AWS no arquivo ~/.aws/credentials seguindo o modelo abaixo:

  [vindi-dev]
  aws_access_key_id =
  aws_secret_access_key =
  region = us-east-1
  1. Atualize o site com a versão mais nova do pacote vindi-ds-icons no package.json
  2. Rode o projeto para validar o pacote
  3. Gere o site estático
  yarn build
  1. Com a pasta out gerada com sucesso, execute o comando
  yarn deploy

Pronto, uma nova versão do side deve ter sido publicada.

Link de acesso: http://vindi-icons-staging.s3-website-us-east-1.amazonaws.com/

Em caso de falha, contacte o time de DS pelo slack

Processo de adição de um novo ícone

Para adicionar um novo ícone, siga os passos:

  1. Acesse a pasta de ícones do projeto react-icons ou acesse o link
  2. Escolha em qual pasta se enquadra o novo ícone.

Caso seja necessário criar um nova pasta clique em Add file e na opção Create new file na barra de criar o nome do arquivo, digite o nome da pasta e termine com nome_da_pasta/.keep e clique em Commit new file

  1. Ao entrar na pasta escolhida, clique em Add file e selecione Upload files
  2. Selecione os arquivos e clique em Commit change para salvar