SVGR: de SVG a componente de ReactJS

Practicando con styled components! Súper interesante! 🔝👌🏻

Definitivamente empezaré a usar CSS in JS y styled components en mis proyectos

Aqui trabajando con la UI

Así van mis avances.

Una forma util de usar SVG en react es importandolos como componentes cuando tenemos los assets .svg

Por ejemplo:
import { ReactComponent as DogIcon} from '../assets/dog.svg';

Seleccioné ese logo que se me hizo genial, y acorde a lo que vemos en las clases decidí darle unos espacios más a los elementos

Excelente Curso!!!

Si quieren saltarse todo el proceso y simplemente de un svg en sus assets convertirlo a SVGR, denle un vistazo a este post (https://blog.logrocket.com/how-to-use-svgs-react/), existe un package que ya lo hace y agg una configuración dentro de las rules al file webpack.config.js

Buen curso !

test-petgram

La de herramientas que acabo de descubrir… gracias Midu!

No se porque pero me gusta full este curso! complementa demasiado lo visto ya en el curso de react esencial.

Lo estoy haciendo asi pero me queda unas dudas como si este mismo proyecto puede ser usado de otra manera como una red solcial de plomeros.
![Petgram](

Una forma mas comun de usar los svg y para evitar la ultima web donde convierte el logo como componente de react, es guardar las imagenes svg generalemente dentro de la carpeta assets y luego simplemente importarlas dentro de nuestro proyecto, asi queda mas limpio el proyecto. Aqui el paso a paso…

Quise usar un gradiente en el border pero no se como. Apreciaría si me pueden guiar un poco en ese aspecto

Se podia importar también como ReactComponent desde archivo directamente también.

import {ReactComponente as Logo} from './../assets/logo.svg';
Por ejemplo.

Super clase!

Muy buena combinación de herramientas para crear y optimizar los svg del logo.

https://petgram-5p73l7xmh.now.sh/

les comparto mi page esto esta que mola !! jaja

Buenas queria pegar la imagen pero me salta este error

, creo que por la extencion que me descarga la imagen que es .AVIF. Tampoco puedo pegar la captura de pantalla ni con el boton de agregar una imagen.

Petygram:

Excelente!

definitivamente usare mas css in jsx, su estetica se ve impecable

Excelente curso. Demo

Excelente curso !! así va mi avance 😁

Me gusto ese tipo de logo, los colores y los puntos que tiene de fondo

Logo/styles.js

import styled from "styled-components";

export const Svg = styled.svg ` 
    width: 220px;
    margin-top: -30px;
    margin-left: -10px;
`

App.js

import React from "react";

//styles
import { GlobalStyle } from "./GlobalStyles";

import { ListOfCategories } from './Components/ListOfCategories';
import { ListOfPhotoCards } from './Components/ListOfPhotoCards';
import { Logo } from './Components/Logo';

export const App = () => (
    <>
        <GlobalStyle />
        <Logo />
        <ListOfCategories />
        <ListOfPhotoCards />
    </>
)

Me gusta la versatilidad con la que el profe usa toda una variedad de recursos 😄

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

💚

Genial

Mi lista de enlaces destacados se ha alimentado enormemente con esta clase

Petgram the next best Social Media 😄

)

![](

Hola, este es mi resultado:

Es mi primer proyecto con styled components y no lo conocia pero me agrada

Gracias por los recursos para crear SVG’s, esto agiliza mucho el trabajo en demos 😃

Excelente curso!, ahi va el mío 😄

Así va quedando XD

Maravilloso :3

¡Hola!
Les comparto una captura de mi avance. 😃

Excelente curso, he aprendido un montón y no va ni la mitad del curso!!!

¡Este curso está genial!

Excelente convertir SVG a SVGR

Ahi va!

Hola asi la llevo muy buenas paginas para crear y trnaformar los svg…

Muchas gracias por las páginas, estan buenisimas 🚀…

-Así va el proyecto
https://petgram-umber.now.sh/

Aqui va el mio 🕺🏻🕺🏻

Mi avance:

Eh maso meno

Les comparto mi avance:

Así vamos:

Vamos con todo!!

Asi vamos:

loooo ameeeeeeeeee

Así va el mío, centre el título, le agregue las imágenes y likes guardados en el archivo db.json

Así va el mio

Por aqui dejo mi avance con React.js …!!

avanzando

Hola Devs:
-Aqui esta mi solucion, por cierto muy creativos el de todos ustedes:

Recuerden, #NuncaParesDeAprender 💚

<code>
import styled from 'styled-components'

export const Svg = styled.svg`
  width: 220px;
  margin-left: -10px;
  margin-top: -30px;
`

Excelente herramientas las que nos acaba de enseñar el profesor

Hola, les dejo el repositorio de mi proyecto en Next.js:

https://github.com/danyel117/petgram-platzi/tree/logo_petgram

hasta el momento he hecho todos los códigos correctos, pero en vez de cargarme la pagina me carga esto:

Alguien puede ayudarme… Gracias!!!