Au 10 - Front-end - React - Trabalhando com icones - Mestres BEGIN

[Música] fala pessoal jancer aqui no vídeo de hoje nós vamos abordar aqui um pouco sobre os ícones tá questão de ícone na aplicação questão do svg na aplicação né como que a gente pode tá usando como a gente pode melhorar na verdade um elemento svg pra gente tá usando ele aqui dentro desse ambiente react com essa ideia de react né com essa ideia de componentizar e a gente vai estar reutilizando para colocar um ícone no nosso botão a gente vai usar também os ícones na tabela né porque se a gente dar dar uma olhada aqui no nosso XD né no nosso design aqui o botão novo produto ele tem né um ícone um mais aqui e também nos ícones da lista né Nós temos aqui os ícones de edição e também eh de deleção tá então esses nós vamos adicionar esses três ícones e para adicionar a gente vai tá fazendo uma a gente vai ter uma abordagem um pouco diferente do que a gente vem tendo aí dos elementos svg Tá certo então aqui no código eu adicionei aqui né o delete P svg Edit PSG e um plus né svg que são os ícones aí que a gente vai estar usando hoje né só mostrando aqui para vocês e esses ícones se a gente vem olhar eles são na verdade um HTML né a extensão do arquivo é pon svg mas nós usamos aqui a tag svg e passamos os valores né para quem não para quem não tá ligado aí o que que é o svg é basicamente uma forma da gente criar ícones né criar formas no no no código al formas geométricas um enfim algum ícone alguma coisa de forma que se a ideia né é que seja algo pequeno né simples na questão de tamanho de arquivo então um um ícone svg ele é extremamente pequeno comparado a uma imagem svg do mesmo tamanho e a questão do ícone svg é que não é só a gente fala assim de tamanho Mas o ícone ele pode ser escalável então por exemplo esse ícone aqui esse delete ele tem aqui já definido uma largura de 16. 5 e uma altura de 18. 8 pixis né Mas a gente pode passar isso aqui tipo 200 por 200 pixis e ele vai 200 por 200 não né porque ele não é quadrado mas dado as proporções a gente pode passar um um valor aqui tipo 200 100 10 vezes 20 vezes maior que ele vai preencher aquele ícone ele vai conseguir criar o ícone Mantendo as proporções né mantendo a qualidade da imagem né então o icon svg a vantagem dele é isso porque independente do tamanho ele mantém qualidade né diferente da imagem se eu pego a imagem que é 20 pixels por 20 Pixel e escalo ela para 100 pixis a gente não vai ter conseguir compreender nada né porque a gente perde muita qualidade tá então esse svg se a gente Analisa aqui ele ele é né um um HTML né a tag svg com as tags PFS aqui dentro né que seria a forma de eu definir um caminho né eu vou falando aqui baseado em um Canvas ele tem aquela ideia do Canvas do eixo X e Y onde eu quero criar um ponto e esse ponto ele faz tal formato e e eu quero preencher esse ponto com a cor tal ou adicionar bordas a esse ponto é um negócio bem É bem interessante Então não vou aprofundar muito aqui no svg mas é muito interessante é a gente e saber pelo menos o básico ali dele eu também sei o básico eu nunca me aventurei fazendo o desenho aqui usando o código né normalmente o que a galera faz é ir nesses programas tipo um figma um Adobe Illustrator cria lá a arte e exporta ela via svg então o código já vem pronto né svg que foi criado por um software aí de criação de ilustrações tá beleza mas nós temos aqui esses essas tags svg E essas tags a gente pode facilmente converter isso aqui para uma componente tá então e é o que a gente vai fazer então na pasta components aqui do projeto né as componentes que seriam Gerais aí que são usadas em vários locais nós podemos para organizar criar uma pasta aqui chamada icons tá E e dentro dessa pasta a gente pode colocar as componentes referentes aos ícones então eu posso criar um arquivo aqui eu vou chamar isso aqui de Plus pon tsx né que é uma componente e aqui eu crio a componente né é Plus eu vou chamar de Plus icon tá icon recebe uma função essa função vai retornar o nosso svg né no final vou dar um Export default o Plus icon tá aqui no retorno dessa função eu vou copiar basicamente esse código svg e vou colar aqui dentro tá sem segredo nenhum Vou salvar ele vai formatar para mim e se a gente der uma olhada ele passa aqui ó largura e altura né Wi he tá passando aqui Fix fixo de 18 piels Mas como isso aqui é um componente né A questão a vantagem disso aqui ser um componente é que a gente pode parametrizar então eu posso criar eu vou criar aqui uma interface né eu vou criar aqui a interface interface props vai ter uma largura wid tá certo aqui é um número né que seria o valor referente um valor em pixis e o He aqui também um Number que vão ser as propriedades que essa componente vai receber né então aqui a eu vou receber e tipar essas propriedades né isso aqui a gente já fez várias vezes aí no curso eu vou receber aqui um wiit e o height tá e o que que a gente pode fazer aqui para melhorar isso esse wid height ele pode ser opcional tá o padrão aqui ele é opcional e a gente pode definir um valor padrão para esses parâmetros né Um Valor default ou seja se a pessoa usar o Plus icon e não passar largura e altura Eu tenho um valor padrão tá e a gente declara isso aqui aqui mesmo na onde a gente recebe esses métodos eu posso falar aqui ó que o wid por padrão é 20 e o He também né Por padrão é 20 a gente só usa aqui o igual né como é que é a atribuição do valor 20 se a pessoa passar lá na na hora de usar componente 30 esse valor Wi aqui será 30 tá e eu só vou repassar aqui paraa propriedade do svg então aqui esse widget que ele tá passando aqui 18 eu vou passar a variável que eu recebi e a altura também tá he certo então com isso aqui nós já temos uma componente que é um ícone svg e que ela recebe parâmetro de largura e altura e caso a gente não queira tipo como nesse caso aqui é um quadrado né esse Plus icon ele é um quadrado eu poderia ao invés de receber largura e altura eu poderia receber e um um diâmetro um raio uma propriedade que como é um quadrado né os dois lados são a altura todos os lados são iguais né a gente pode receber só um valor aqui mas vou manter dessa forma para porque a gente pode usar isso aqui a gente vai usar isso aqui nas outras componentes tá então com isso aqui vamos fazer o uso dele aqui logo e esse ícone deais né se a gente olha aqui no XD ele tá no botão é no botão de novo produto então eu vou vir aqui na nossa componente né no Button que é onde eu tô usando que inclusive El ele tá com um problemão aqui né porque o texto desse botão tá fixo né a gente criou a componente para ser usada globalmente mas o texto aqui ficou sendo passado fixo né novo produto esse texto ele pode vir como o parâmetro Tá então vamos criar aqui a interface que vai descrever os parâmetros desse botão né chamar de props esse botão ele vai receber é um text né esse texto é um stream e é obrigatória a questão do ícone e isso aqui agora a gente já pode variar já começa a variar por quê Porque o botão ele pode receber um ícone né eu eu não posso falar que esse botão aqui ele vai sempre ter aquele ícone dema n porque não vai Isso Aqui varia né então a gente pode tá recebendo essa componente no caso esse Plus icon via parâmetro Ou seja a pessoa onde eu uso esse botão deixa eu abrir aqui onde a gente usa ele né que seria no nosso product subheader né aqui eu tô usando aquele botão né aquela componente eu poderia passar aqui ó tipo a propriedade icon recebe o aquela a componente que a gente acabou de criar né que é o Plus icon tá Plus icon aqui é um é uma componente se a gente bota o mouse aqui em cima o tipo dela né é uma função que retorna um elemento jsx tá a gente pode passar ela já eh renderizada né o elemento jx e aqui eu passaria a de 30 e altura né de 30 a gente pode fazer assim também eu posso passar só o Plus icon e passar outros parâmetros que seriam pro botão né tipo icon size n icon Wi ou icon e repassar Plus icon pode ter várias abordagens aqui como usar isso tá eu vou fazer o seguinte eu vou usar desse jeito que tá aqui agora ou seja meu botão ele pode receber um ícone um icon é esse ícone ele é opcional né não é sempre que eu vou querer ter um ícone no meu botão e o tipo dele se a gente bota o mouse aqui em cima ó como eu já defini a propriedade aqui no no Button e o typescript já fez a inferência de tipo né Por mais que eu não tenha declarado que o meu botão pode receber um ícone né que é o erro que tá dando aqui mas ele sabe que para esse ícone eu passei tem aqui né o ícone é do tipo jsx P Element né isso aqui é um elemento jsx né que que retorna da minha função da minha componente Plus icon então o icon aqui é um jsx P Element tá E e aqui eu vou aqui o but né agora eu vou falar que ele recebe aqui um objeto do tipo PR e dentro desse objeto eu vou ter um text e vou ter um icon certo com isso aqui esse texto que tava aqui sendo novo produto Agora não é mais novo produto né é o parâmetro que eu recebo Text e esse ícone eu vou colocar dentro do botão né Porque aqui no XD ele tá dentro do botão então aqui dentro a gente pode fazer o seguinte eu posso colocar Chaves né que vai me permitir aqui nesse caso aqui ó as chaves permite eu passar uma variável do JavaScript dentro do jsx permite também a de fazer condição então eu vou verificar né se o icon existe ou seja vou usar aqui um tern se ele existir e a gente pode usar aqui os esses comerciais né se somente se o icon existir eu vou retornar hum ele mesmoo aqui fica estranho né Mas seria isso né Ness isso aqui parece que tá redundante mas se o icon não existisse ele for undefined ele não vai retornar nada aqui dentro tá a gente pode até fazer o teste disso mas eu vou deixar desse jeito que tá E aqui o meu botão tá dando erro porque eu não passei o text né o texto o a descrição desse botão então tô passando o ícone depois o ícone aqui eu vou passar o text que é novo produto né ISO É isso mesmo vou salvar aqui no XD isso é novo produto vamos ver aqui no Browser como é que ficou aí ó nós já temos aqui um ícone deixa eu dar um zoom aqui o ícone né o Plus a o texto né novo produto e se a gente e para provar primeiro eu vou fazer a alteração do tamanho né eu vou passar uma largura aqui de 100 ele meio que não não Tipo ele ocupou mais espaço mas o ícone em si não cresceu né porque ele ele tem a proporção né então tem que passar largura e altura né ele ele é um quadrado né E aí ó passei largura e altura de 100 e ele aumentou para 100 pixis e a qualidade se Manteve né a gente pode ver que não não tem não teve perda de qualidade posso passar 200 vai vamos lá ele aumentou também e a qualidade é a mesma né então a vantade do svg é isso tá eu vou manter o padrão de 20 tá então eu não vou nem passar aqui o edit rde porque o padrão lá já defini como 20 e o que a gente tem que fazer aqui agora eh eu vou eu vou testar vou mostrar aqui para vocês também a questão do botão sem o ícone né então vou vou renderizar outro aqui logo abaixo sem o ícone vou Vou salvar e Ó lá ele isso aqui mostrando aquela aquela comparação que a gente fez do ícone com e comercial né isso aqui se o ícone existe ele retorna o ícone senão ele não retorna nada né que é esses dois casos aqui certo vou remover esse segundo botão que eu adicionei E agora o que a gente tem que fazer é alinhar dentro do botão né você pode ver que o texto tá na parte inferior né não tá alinhado e para alinhar isso a forma mais simples possível é usando o flexbox né que é a mais prática também né então eu falar eu falo que esse botão é uma Flex Box né Ele é um contêiner flexível e os elementos dentro dele serão alinhados eh no centro né então no meu arquivo de estilo aqui do botão a gente tá passando aqui algumas coisas cores cor e cor de fundo tamanho da fonte enfim borda o raio da borda né e aqui a gente pode passar o o display né o display Flex se a gente só passa Isso ele já trocou né Tipo o o texto que tava sendo aliado embaixo agora tá sendo aliado em cima e aqui tem aquela questão que o display de o o Flex Direction né É em Row então ele já alinha esses elementos um ao lado do outro né revisando aqui um pouco né se a gente passa aqui o Flex Dire column vai ficar um em cima do outro né então vamos deixar o Row do jeito que tava por mais que o padrão é Row eu vou manter vou repetir Row aqui para aquela questão da legibilidade do código né Eu não vou a gente tenta ao mínimo a gente tenta ao máximo não deixar que a informação do nosso código tem que ser subtendida tipo eu não posso assumir que todo toda pessoa que for ler esse meu código vai saber que o padrão da flexbox é Row por mais que seja algo muito simples é uma prática que a gente começa desde o fundamento tá então vou deixar ali o Flex Direction Roll e para alinhar ele aqui no centro eu acredito que é o justify content Center não é o Aline e passando vergonha novamente né que assim Aline item Center eh eu na teve uma aula passada aí que eu me embolei muito para explicar isso e realmente é uma coisa que me confunde muito por mais que eu trabalho com isso todo dia que é a questão do dependendo na direção do Flex a questão do alinhar e justificar né que nós temos o que Aline items e justify content né justify content e esses dois caras eles se invertem dependendo do do Flex Direction né o Aline item em um momento ele pode ser horizontal Em outro momento pode ser vertical e justify content também Mas enfim vamos prosseguir o que que eu tenho que adicionar aqui agora só uma borda né nesse meu texto porque se a gente for ver o texto em si esse text aqui ele é uma string solta né ele não tá relacionado com o elemento em si do HTML se a gente vem aqui no botão eu vou inspecionar ele aqui ó vamos abrir ele aqui dentro do botão eu tenho um ícone svg né que é o nosso ícone e eu tenho uma string solta né não é um elemento em si eh do HTML então o que que eu vou fazer ao invés de eu só retornar o text eu vou colocar em volta dele uma tag um spam tá e o text aqui dentro do spam por que isso para mim conseguir aplicar um estilo diretamente no spam tá então aqui no arquivo de Styles o que que eu vou fazer eu vou pegar todo mundo que tá que é filho da nossa classe Button né nesse caso aqui eu aplico a classe Button na tag Button Então quem tiver aqui dentro né quem tem a classe que é filho do um de um pai que tem a classe Button e é do tipo spam né então ponto eu eu seleciono aqui o crio selector passar na classe Button do espaço spam ou seja vou selecionar aquele spam aquele texto lá eu vou passar uma margem e left nele de 10 pixs para ele dar essa distanciada né A gente até Conseguiu ver ele mudando aqui Talvez um pouquinho mais a 15 certo e com isso eu acho que a gente já matou aqui né esse botão demais Agora seria fazer a mesma coisa que a gente fez com esse botão de mais com esses dois botões aqui né com o edit e o delete para não ficar repetitivo eu vou fazer isso aqui eu vou cortar o vídeo e já vou voltar com esses caras convertidos para componente certo voltei aqui né o que eu fiz basicamente foi converter né aquele Plus o edit e o delete né e o que que eu é deixa eu só repassar aqui ó o delete Como é o edit como é que ele ficou né o padrão do Edit he 16.

5 né tô só repassando e o delete é o padrão dele largura 16. 5 altura 18. 8 e eu pego os valores cada pessoa passa e repasso aqui pra tag svg Beleza então o que que a gente pode fazer aqui também eh a cor né esse fio aqui é o que tá tá preenchendo o nosso pef né o nosso ícone com aquela cor né então o nosso ícone é cinza ele tá preenchendo aqui eh nesse fio né o edit também é cinza tá preenchendo aqui o Plus é branco ele tá preenchendo aqui por conta desse hexadecimal né então a gente pode também aceitar a a cor né um hexadecimal referente a cor para ser eh pra gente repassar aqui paraa componente para ela pra gente caso a gente queira deixar a cor né Eh via parâmetro nesse caso aqui eu não vou fazer mas é só né repassando aqui as possibilidades que a gente pode ter beleza e o que que a gente vai fazer aqui agora é uma coisa que eu vi que dá para melhorar né todos os ícones a gente tá criando a interface props praticamente do mesmo jeito né Então por que não criar essa interface em um só lugar e reutilizar né então aqui dentro de src a gente pode criar uma pasta aqui @types certo e essa pasta por padrão ela é realmente pra gente definir tipagens né então aqui dentro dela eu posso criar um arquivo aqui chamar ele de como vai ser uma interface né pro padrão a interface a gente coloca um i no início do nome né então I eu vou chamar de I svg props Pode ser Ou só svg props tá caso você não goste desse prefixo a gente pode passar só svg props né PTS que isso aqui vai ser um Export default interface svg props svg props tá E aqui dentro eu vou ter nesse caso aqui né no caso dos botões largura e altura no caso dos botões no caso dos ícones né o He a gente pode ter e a cor pode ter enfim Enfim uma variedade de propriedades que inclusive o próprio HTML já tem essas tipagens tá então se a gente vem aqui no nosso icons né e bota o mouse aqui em cima da tag svg a gente pode ver que o tipo dela é esse jsx P intrinsec Element svg né na verdade isso aqui é a variável ela é do tipo ó react.