Svgs para Componentes Reacts
npm install vindi-ds-iconsO 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.
O repositório possui cinco projetos:
``js
$ 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.
Ao clonar o projeto, rode os seguintes comandos:
`js`
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
Ao instalar as dependências e criar os componentes, rode os comandos abaixo para rodar o site:
`js`
cd ../preview
yarn start / Rodas a aplicação no endereço http://localhost:3000 /
Ao acessar o site, após buildar e não aparecer o ícone, devemos remover o .next para que os novos ícones possam ser visualizados
`js`
cd ../preview
rm -rf .next
yarn start / Rodas a aplicação no endereço http://localhost:3000 com os novos ícones/
Esse projeto distribuímos dois artefactos:
- pacote NPM: vindi-ds-icons
- site: http://vindi-icons-staging.s3-website-us-east-1.amazonaws.com/
#### 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
2. Atualize a versão do pacote
``
yarn version
3. Build o projeto
``
yarn build
4. Faça login na conta NPM do time de DS (solicite as credenciais com o time pelo slack)
``
npm login
5. 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
2. Atualize o site com a versão mais nova do pacote vindi-ds-icons no package.json
3. Rode o projeto para validar o pacote
4. Gere o site estático
``
yarn buildout
5. Com a pasta 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
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 filenome_da_pasta/.keep
> na barra de criar o nome do arquivo, digite o nome da pasta e termine com Commit new file
> e clique em Add file
3. Ao entrar na pasta escolhida, clique em e selecione Upload filesCommit change` para salvar
4. Selecione os arquivos e clique em