Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Can't import svg images correctly #194

Open
kmcaloon opened this issue Aug 19, 2020 · 1 comment
Open

Can't import svg images correctly #194

kmcaloon opened this issue Aug 19, 2020 · 1 comment

Comments

@kmcaloon
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants