Había creado una aplicación nextJS de exhibición de una sola página diseñada con Tailwind CSS. Estoy agregando el fondo de un componente SectionWrapper como un archivo svg .

Creé una clase personalizada en global.css usando la utilidad @layer como esta

 @layer components { .banner { @apply bg-[url('../assets/banner.svg')] bg-no-repeat w-full bg-cover bg-center h-full; } .banner02 { @apply bg-[url('../assets/banner02.svg')] bg-no-repeat w-full bg-cover bg-center h-full; } . . }

Y usándolos en mi index.js como este donde estoy pasando el banner como accesorios.

 . . . <Sectionwrapper title="Creative way to showcase the store" description="The app contains two screens. The first screen list all NFTs while the second shows the details of a specific NFT." mockupImg={assets.mockup.src} banner="banner02" /> . . .

Y en el componente sectionWrapper , se usa como ${banner} en el primer div.

 import React from "react"; import assets from "../assets"; import Button from "./Button"; const Sectionwrapper = ({ title, description, showBtn, banner, mockupImg, reverse, }) => { return ( <div className={`min-h-screen flex justify-center items-center p-16 sm:p-8 ${banner} ${ reverse ? "bg-white" : "bg-primary" }`} > <div className={`flex items-center w-11/12 sm:w-full minmd:w-3/4 ${ reverse ? "flex-row-reverse md:flex-col-reverse fadeRightMini" : "flex-row md:flex-col fadeLeftMini" } `} > . . . </div> </div> </div> ); }; export default Sectionwrapper;

Tema

Los SVG funcionan bien en el entorno local. Pero en el entorno implementado de Vercel y Netlify , el SVG no se procesa. Funciona bien en localhost pero no en producción.

en entorno local

en vercel/netlify

Más recursos

Enlace Github aquí

Enlace de Vercel/Demostración en vivo aquí