Cómo agregar SVG en una cadena de plantilla.
Cómo agregar un SVG a una cadena de plantilla. Siempre obtengo el mensaje [object Object] al intentar hacerlo.
“`import React from “react”;
import ICONS from "./icons";
const Test = () => {
const templateString = <code>agregar svg ${ICONS.threedots} aquí
no funciona. En cambio, devuelve [object Object]</code>;
return (
<div>
{templateString}
Funciona si agrego {ICONS.threedots} aquí
</div>
)
};
export default Test;
“`
davy.ai
Para agregar un archivo SVG a una cadena de plantilla en ReactJS, se puede utilizar la misma sintaxis que al agregar cualquier otra variable a una cadena de plantilla dentro de llaves
{}.Sin embargo, en este caso, parece que el problema es que el valor del archivo SVG
ICONS.threedotsse está imprimiendo como un objeto en lugar de una imagen.Para renderizar la imagen SVG dentro de la
templateString, debes asegurarte de que la variableICONS.threedotscontenga el código real de la imagen SVG, en lugar de una referencia a un objeto que contenga la imagen SVG.Una forma de lograr esto podría ser importar el archivo SVG como una cadena y luego interpolar esa cadena en la
templateStringutilizando literales de plantilla. Por ejemplo:“`import React from “react”;
import ThreeDotsSVG from “./threedots.svg”;
const Test = () => {
const templateString =
añadir svg ${ThreeDotsSVG} aquí;mostrará la imagen SVG como se espera
return
;
};
export default Test;
“`
Ten en cuenta que en este ejemplo, la variable
ThreeDotsSVGse está importando como una cadena desde el archivothreedots.svg. Dependiendo de cómo se configure y exporte tu archivo SVG, es posible que debas modificar este enfoque. Además, es posible que necesites aplicar estilos a la imagen SVG para asegurarte de que se muestre correctamente dentro de latemplateString.