Actualmente en mi proyecto tengo una carpeta con todos mis archivos svg, la consulta para obtenerlos de graphql es la siguiente:
query AssetsPhotos { allFile(filter: {extension: {regex: "/(svg)/"}, relativeDirectory: {eq: "svg"}}) { edges { node { id name } } } }pero a diferencia de los archivos de imagen (.png, jpg, etc.) no tengo la opción GatsbyImageData, ¿cómo podría renderizarlos si quiero algo como esto?
{SgvsData.map(({ image,id,title}) => ( <GatsbyImage image={getImage(image.gatsbyImageData)} alt={title} key={id} /> ))}Probé opciones como publicUrl, children y childImageSharp, pero la imagen no se muestra. Muchas gracias por adelantado
¿Cómo renderizar archivos svg con Gatsby Image?
Respuesta corta: no puedes
gatsby-plugin-sharp y gatsby-plugin-image no son compatibles con SVG o GIF (consulte: https://github.com/gatsbyjs/gatsby/issues/10297#issuecomment-444419483 )
Como señaló, no hay GatsbyImageData porque los transformadores y objetos punzantes de Gatsby ( gatsby-transformer-sharp pero especialmente gatsby-plugin-sharp ) no son compatibles con SVG. Como no pueden interpretar los activos SVG, no pueden crear los nodos de GraphQL.
Dicho esto, hay varias formas de cargar un SVG en un proyecto de React/Gatsby:
gatsby-plugin-react-svg : siga Importar SVG como un componente en Gatsby para obtener más detallesPuede consultar el SVG a través publicURL , pero no puede representarlo con GatsbyImage. Entonces, solo use la etiqueta <img> y no necesita un complemento .
query MyQuery { allFile(filter: {extension: {in: "svg"}}) { nodes { publicURL } } }Y que representarlo:
<img src={...publicURL} alt=""/>No puede renderizar archivos SVG con Gatsby Image, pero no es necesario.
Podrías usar gatsby-plugin-svgr-loader (me gusta más que gatsby-plugin-react-svg pero hacen esencialmente lo mismo):
import Icon from "./path/assets/icon.svg"; // ... <Icon />; En este caso, el complemento está configurado para procesar archivos svg desde una ruta que coincida con /assets/
{ resolve: 'gatsby-plugin-svgr-loader', options: { rule: { include: /assets/ } } }La otra forma es escribir código svg directamente en su componente:
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> <path strokeLinecap="round" strokeLinejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>El ejemplo anterior es un ícono de campana exportado como jsx desde heroicons