search

cyrilwanner / next-optimized-images

🌅 next-optimized-images automatically optimizes images used in next.js projects (jpeg, png, svg, webp and gif).
MIT License
2.21k stars 93 forks source link

Can't import svg images correctly #194

Open kmcaloon opened 4 years ago

kmcaloon commented 4 years ago

I keep running into issues here. My pngs and jpegs are loading correctly, but no matter what I do I can't get my svgs to show up. I currently have imagemin-svgo, and am running into issues with or without it.

The first issue is that when I require my svg according to the docs here is what I get

// NextJS
<img src={ require( '~public/images/logo-walmart.svg' ) } alt="Walmart Logo" />

// Resulting HTML
<img src="[object Module]" alt="Walmart Logo">

Event if I try require( '~public/images/logo-walmart.svg').default, it results with a file that when I open in a new tab shows the following error: error on line 1 at column 1: Document is empty

If it helps, here is the original svg:

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="47.016" viewBox="0 0 188.41362 47.016108" width="188.41" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><g transform="matrix(1.25 0 0 -1.25 -279.62 519.24)"><g transform="matrix(.25 0 0 .25 224.45 297.78)"><path d="m0 37.789s18.553 76.025 21.514 88.365c3.456 14.403 9.6831 19.704 27.637 16.129l11.585-47.135c2.9362-11.708 4.9056-20.055 6.793-31.965h0.33203c1.3262 12.027 3.2146 20.292 5.6309 32.006 0 0 4.7159 21.398 7.1309 32.637 2.4214 11.235 9.1601 18.316 26.746 14.461l27.604-104.49h-22.287l-9.4238 45.176c-2.5337 13.15-4.8329 23.425-6.6055 35.455h-0.31445c-1.611-11.91-3.66-21.778-6.236-34.59l-9.8125-46.041h-23.221l-10.496 44.881c-2.9736 13.638-5.7548 24.651-7.5234 36.273h-0.32031c-1.8112-10.945-4.2236-24.786-6.8359-37.988 0 0-6.2359-32.101-8.4238-43.166l-23.471 0.003zm212.46 0v104.49h21.219v-22.188-82.307h-21.219zm298.85 0v77.084c0 10.628 2.0002 18.074 6.2793 22.623 3.7385 3.9785 9.8964 6.5547 17.275 6.5547 6.2735 0 12.446-1.1898 15.355-2.2734l-0.27343-16.582c-2.1646 0.53275-4.6548 0.95899-8.0606 0.95899-7.2281 0-9.6523-4.6294-9.6523-14.172v-29.492h18.48v-19.992h-18.48v-24.709h-20.924zm-346.27 24.223c-13.187 0-23.655 3.7026-29.361 7l4.1758 14.299c5.2221-3.2922 13.537-6.0176 21.41-6.0176 13.035-0.0335 15.166 7.3705 15.166 12.119v1.123c-28.403-0.04263-46.344 9.7858-46.344 29.82 0 12.232 9.133 23.695 25.014 23.695 9.776 0 17.952-3.8989 22.852-10.146h0.48047s3.2448 13.567 21.121 8.3789c-0.93912-5.6466-1.2441-11.667-1.2441-18.918v-27.914c0-17.791-7.5963-33.439-33.27-33.439zm126.93 0c-13.278 0-19.245 6.729-22.863 12.438h-0.31445v-10.666h-20.25v78.5h21.332v-46.037c0-2.1582 0.24663-4.4404 1-6.4258 1.7674-4.6351 6.0798-10.057 12.965-10.057 8.6072 0 12.635 7.277 12.635 17.779v44.74h21.309v-46.594c0-2.0602 0.28243-4.5417 0.88868-6.3633 1.7519-5.2724 6.4009-9.5625 12.801-9.5625 8.726 0 12.914 7.1504 12.914 19.508v43.012h21.324v-46.234c0-24.383-12.381-34.037-26.357-34.037-6.1896 0-11.075 1.552-15.492 4.2637-3.7128 2.2782-7.0362 5.5151-9.9414 9.7773h-0.31445c-3.38-8.46-11.31-14.041-21.64-14.041zm117.14 0c-13.184 0-23.65 3.7026-29.361 7l4.1816 14.299c5.217-3.2922 13.537-6.0176 21.406-6.0176 13.026-0.0335 15.162 7.3705 15.162 12.119v1.123c-28.399-0.04263-46.342 9.7858-46.342 29.82 0 12.232 9.1377 23.695 25.027 23.695 9.7682 0 17.947-3.8989 22.838-10.146h0.48243s3.2442 13.567 21.123 8.3789c-0.9405-5.6466-1.2422-11.667-1.2422-18.918v-27.914c0-17.791-7.5983-33.439-33.275-33.439zm88.586 0c-8.1686 0-17.462 5.2728-21.363 16.576h-0.5957v-14.805h-19.203v78.5h21.891v-40.197c0-2.1685 0.13148-4.0592 0.47461-5.793 1.619-8.4202 8.0595-13.803 17.303-13.803 2.5375 0 4.3536 0.27484 6.3184 0.55859v-20.551c-1.6475-0.33288-2.7743-0.48633-4.8242-0.48633zm-320.58 42.434v9.793c0 1.4486-0.12609 2.9432-0.52734 4.25-1.6422 5.4389-7.2766 10.035-14.32 10.035-5.8722 0-10.537-3.3327-10.537-10.383 0-10.784 11.871-13.765 25.385-13.695zm244.07 0v9.793c0 1.4486-0.12872 2.9432-0.52734 4.25-1.6422 5.4389-7.2746 10.035-14.318 10.035-5.8735 0-10.539-3.3327-10.539-10.383 0-10.784 11.871-13.765 25.385-13.695z" transform="matrix(.8 0 0 -.8 0 467.81)" fill="#007dc6"/><path d="m665.44 0c-6.8502 0-12.295 3.8254-12.295 8.4824l4.1602 47.107c0.45925 2.8381 3.9358 5.0273 8.1387 5.0273 4.2112-0.0055 7.6756-2.1928 8.1445-5.0273l4.18-47.107c0-4.6566-5.46-8.482-12.32-8.482zm-67.795 37.787c-3.5563 0.08438-7.5962 2.7769-10.166 7.2324-3.4368 5.9329-2.8278 12.563 1.1934 14.889l42.871 19.965c2.6782 0.99612 6.3156-0.90582 8.4219-4.5371 0.0003-0.000503-0.00029-0.0015 0-0.002 2.1161-3.6492 1.9523-7.7523-0.27539-9.5723l-38.72-27.158c-1.0056-0.58244-2.1368-0.84453-3.3223-0.81641zm135.59 0c-1.1852-0.02813-2.3147 0.23397-3.3184 0.81641l-38.725 27.158c-2.2145 1.8199-2.3787 5.9232-0.27343 9.5723l0.002 0.002c2.1141 3.6313 5.7397 5.5332 8.418 4.5371l42.89-19.964c4.0379-2.326 4.6166-8.9558 1.2031-14.889-2.5814-4.4556-6.628-7.148-10.184-7.2324zm-100.09 62.151c-0.55461-0.0075-1.0923 0.07818-1.5957 0.26758l-42.871 19.941c-4.0211 2.3362-4.6301 8.9688-1.1934 14.908 3.4264 5.9212 9.4659 8.7362 13.488 6.4141l38.723-27.137c2.228-1.8422 2.3924-5.9442 0.27539-9.5898l0.0176 0.008c-1.7116-2.9695-4.4404-4.7798-6.8438-4.8125zm64.609 0c-2.4006 0.0327-5.124 1.843-6.8398 4.8125l0.0156-0.008c-2.1066 3.6456-1.9435 7.7476 0.27148 9.5898l38.725 27.137c4.0146 2.3221 10.06-0.49281 13.502-6.4141 3.4135-5.9394 2.8348-12.572-1.2031-14.908l-42.877-19.941c-0.50337-0.1894-1.0398-0.27513-1.5938-0.26758zm-32.32 19.523c-4.1958 0.005-7.6644 2.1849-8.123 5.0156l-4.1602 47.105c0 4.6648 5.4447 8.4824 12.295 8.4824 6.863 0 12.318-3.8177 12.318-8.4824l-4.1699-47.105c-0.46891-2.8307-3.9333-5.0102-8.1445-5.0156h-0.0156z" transform="matrix(.8 0 0 -.8 0 467.81)" fill="#ffc220"/></g></g></svg>

Is there something obvious I'm missing?

giladaya commented 3 years ago

Same here. Also the file that is referenced in the default export seems to be a react component.