0

Estoy usando una librería externa en react para mostrar un svg.

Según la documentación simplemente importo el svg en el componente y lo uso dentro de una etiqueta img, cómo hago a continuación.

import { cardImg } from '@design-library';

  return (
    <Loader options={LoaderOptions} loaded={!isAppLoading}>
      

      <Title>Presentation</Title>
      <div>
        <p>Utils</p>
        <img src={cardImg} />
      </div>

Esto es lo que hay en el archivo de la biblioteca importada

'use strict';

var cardImg = "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"312\" height=\"234\" viewBox=\"0 0 312 234\">\n  <defs>\n    <path id=\"slice-a\" d=\"M17.4812487,27 C14.7979704,26.9944944 12.6276119,29.1592638 12.6330808,31.835683 L12.7918144,109.366233 C12.7972937,112.042652 14.9765341,114.216363 17.6598123,114.22188 L143.750943,111.96245 C149.185191,111.865074 153.54668,107.445107 153.571676,102.010044 L153.633081,88.6579974 L153.633081,88.6579974 L153.517345,32.1253045 C153.511866,29.4488853 151.332625,27.2751743 148.649347,27.2696582 L17.4812487,27 Z\"/>\n  </defs>\n  <g fill=\"none\" fill-rule=\"evenodd\">\n    <rect width=\"312\" height=\"234\" fill=\"#F1F1F1\"/>\n    <g transform=\"translate(73 30.114)\">\n      <use fill=\"#FBCE07\" transform=\"rotate(-26 83.133 70.61)\" xlink:href=\"#slice-a\"/>\n      <polygon fill=\"#404040\" points=\"5 43.886 145.954 44.176 146 66.505 5.046 66.215\" transform=\"rotate(-26 75.5 55.195)\"/>\n      <path fill=\"#F1F1F1\" fill-rule=\"nonzero\" d=\"M138.522294,82.7257434 L10.0395355,82.7257434 C6.28911648,82.7257434 3.28091481,85.8514151 3.28091481,89.6701879 L3.28091481,168.781299 C3.28091481,172.600072 6.28911648,175.725743 10.0395355,175.725743 L117.901604,175.725743 C133.040989,175.725743 145.280915,163.00785 145.280915,147.355373 L145.280915,89.6701879 C145.280915,85.8514151 142.272713,82.7257434 138.522294,82.7257434 Z\"/>\n      <path fill=\"#FBCE07\" fill-rule=\"nonzero\" d=\"M138.522294,84.7257434 C141.079603,84.7257434 143.165401,86.8211766 143.276279,89.4499245 L143.280915,89.6701879 L143.280915,147.355373 C143.280915,161.774411 132.145019,173.489354 118.321318,173.722211 L117.901604,173.725743 L10.0395355,173.725743 C7.48222702,173.725743 5.39642868,171.63031 5.28555084,169.001562 L5.28091481,168.781299 L5.28091481,89.6701879 C5.28091481,87.0130167 7.29759671,84.8457681 9.82755015,84.7305605 L10.0395355,84.7257434 L138.522294,84.7257434 Z\"/>\n      <g transform=\"translate(13.269 92.738)\">\n        <path fill=\"#FFF\" fill-rule=\"nonzero\" d=\"M18.3567802,21.0719631 L12.633856,21.0656655 L12.4038148,21.2343895 C12.0708178,21.477459 11.6353932,21.6055766 11.2083066,21.6055766 C10.7739265,21.6055766 10.3881208,21.4700163 9.9722441,21.1824879 L9.80089725,21.0631212 L4.06135454,21.0568177 L3.52661121,16.7922005 L0.266255661,14.3716832 L0.229146925,14.1989801 C0.0367285374,13.3034702 -0.00189190649,12.9340339 1.12466934e-06,12.0063293 C0.00665871366,5.71334156 5.00883333,0.668932351 11.2407816,0.67486964 C17.4747961,0.68246821 22.4680147,5.73712388 22.4607765,12.0292844 C22.4607765,12.9500333 22.4208557,13.3192846 22.2258796,14.2210814 L22.1882407,14.3951677 L18.8907468,16.8089066 L18.3567802,21.0719631 Z\"/>\n        <path fill=\"#DB2026\" d=\"M0.686606559,14.1003802 C0.50148883,13.2388474 0.466107968,12.9028401 0.467932838,12.0068206 C0.474321382,5.97166135 5.2677965,1.13783888 11.2402125,1.14352889 C17.2145239,1.15081092 21.9997856,5.99412512 21.9928434,12.0292844 C21.9928434,12.9253039 21.9546119,13.2613112 21.7685464,14.1218948 L18.4515905,16.5498797 L17.9439383,20.6028491 L12.4810699,20.5968377 L12.128209,20.8556455 C11.8672751,21.046113 11.5226276,21.1369172 11.2083066,21.1369172 C10.873452,21.1369172 10.5780849,21.0318754 10.2394395,20.797746 L9.94786332,20.5946229 L4.47425429,20.5886115 L3.96597029,16.5350094 L0.686606559,14.1003802 L0.686606559,14.1003802 Z\"/>\n        <path fill=\"#FBCE07\" d=\"M10.1681601,18.595684 L10.6319575,18.9523217 C10.8119007,19.0922481 11.0675595,19.1909264 11.2449683,19.1918782 C11.4252284,19.1918782 11.6821544,19.0922481 11.8620976,18.9535909 L12.3262118,18.5979051 L16.3495905,18.6026645 L16.7709364,15.2628345 L19.9718985,12.9212095 C20.0960847,12.4401928 20.1201616,12.2564799 20.121112,11.7998948 C20.121112,11.2259111 19.9718985,10.5100973 19.7460191,10.0036971 L13.9441169,15.8282513 L19.5220404,8.9318801 C19.3021802,7.96223158 18.8665782,7.18644932 18.1819702,6.5515453 L13.1334219,15.2593443 L17.5534361,5.71198706 C16.9511965,4.89400478 16.2266715,4.36983615 15.2724655,4.04619692 L12.1899871,14.8979472 L14.4180519,3.6026208 C13.7584712,3.22440711 12.9746693,3.02070477 12.166192,3.01816029 C11.9460149,3.0194356 11.9060118,3.01816029 11.6983209,3.01816029 L11.2332467,14.7967306 L10.7624553,3.01816029 C10.5269537,3.01816029 10.4707704,3.01880101 10.2955792,3.01816029 C9.52290037,3.01689725 8.76631362,3.21266726 8.0326014,3.61436065 L7.98761559,3.640696 L10.3053352,14.9179367 L7.23838011,4.0519082 C6.24995951,4.38506623 5.44496697,4.96254014 4.94758865,5.69263217 L9.38787811,15.2238075 L4.41631258,6.41955126 C3.72251736,6.98052592 3.16526357,7.90162855 2.93906731,8.85731616 L8.53219733,15.8380874 L2.73884878,9.93230607 C2.4841404,10.4637724 2.33966419,11.1548374 2.33966419,11.803385 C2.33872852,12.1908002 2.38371433,12.5455342 2.4854076,12.9392953 L5.74054274,15.3399368 L6.14097981,18.5906073 L10.1681601,18.595684 Z\"/>\n      </g>\n      <rect width=\"4\" height=\"6\" x=\"13.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"19.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"25.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"31.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"43.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"49.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"55.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"61.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"73.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"79.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"85.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"91.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"103.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"109.269\" y=\"151.738\" fill=\"#404040\"/>\n      <rect width=\"4\" height=\"6\" x=\"115.269\" y=\"151.738\" fill=\"#404040\"/>\n    </g>\n  </g>\n</svg>";

module.exports = cardImg;

y si imprimo el valor de los datos importados me devuelve el svg pero en la pantalla aparece como roto como se puede ver en la imagen adjunta.

introducir la descripción de la imagen aquí

y si inspecciono el elemento muestra lo que puedes ver en la siguiente imagen

introducir la descripción de la imagen aquí

¿Cómo puedo utilizar este componente?

Gracias a todos de antemano por su tiempo y ayuda.

1 respuesta 1

2

Es porque para Javascript eso es una cadena de texto y no un SVG

Debes guardar el SVG como tal en un archivo y despues importarlo

import imgagenSVG from './ruta/archivo.svg';

y ahora si ya puedes usarlo en tu html

<img src={imagenSVG} />

Basandome en tu comentario, lo que deberas hacer es guardar el SVG en base64, hay servicios en internet que te hacen esa conversión, como por ejemplo https://www.base64-image.de

Una vez que tengas tu archivo en base64 lo colocas en la variable tal cual haz intentado

export const imagen1 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..."

y vuala, ya puedes mostrarla correctamente

Recalquese que mostrando un SVG mediante la etiqueta pierdes la posibilidad de aplicar color mediante CSS y otras cuantas propiedades.

3
  • gracias! es como lo estaba usando hasta ahora, el tema es que deseaba eliminar del proyecto los archivos y utilizarlos importados de una libreria el 8 feb. 2021 a las 18:54
  • Edito mi respuesta basandome en tu comentario el 9 feb. 2021 a las 0:32
  • muchas gracias!! en principio no deseo m odificar nada pero lo tendre en cuenta! el 9 feb. 2021 a las 7:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.