Some SVGs work in Nextjs and some not, why? - svg

Question

I've struggled with svgs from here, when I tried using them in my Nextjs app.
They won't show as background-image or image itself. I've tried svgs from other places and they work, I couldn't find out why?
This doesn't work. This is inside that file:
<svg width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.25 6.75L4.75 12L10.25 17.25"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 12H5"/></svg>
This does work. This is inside that file:
<?xml version="1.0" ?><svg width="128px" height="128px" viewBox="0 0 128 128" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#231f20;}</style></defs><title/><path class="cls-1" d="M87.59,23.4H40.41a17,17,0,0,0-17,17V87.6a17,17,0,0,0,17,17H87.59a17,17,0,0,0,17-17V40.4A17,17,0,0,0,87.59,23.4Zm0,77.2H66.14V97.4a2,2,0,0,0-4,0v3.2H40.41a13,13,0,0,1-13-13V66H31a2,2,0,1,0,0-4H27.41V40.4a13,13,0,0,1,13-13H62.14v3a2,2,0,0,0,4,0v-3H87.59a13,13,0,0,1,13,13V62H97a2,2,0,0,0,0,4h3.61V87.6A13,13,0,0,1,87.59,100.6Z"/><path class="cls-1" d="M77.15,73.08l-11-8.92L66,37.82a2,2,0,0,0-2-2h0a2,2,0,0,0-2,2l.14,27.29a2,2,0,0,0,.74,1.54l11.75,9.52a2,2,0,0,0,1.26.45,2,2,0,0,0,1.56-.74A2,2,0,0,0,77.15,73.08Z"/></svg>
I've tried copying some elements from svg that works to the one that doesn't, but to no success. When I convert first svg into png it works again... I've tried changing stroke color and clearing cache too.
Edit:
in index.tsx:
import style from './task.module.css'
const Task= () => {
return <div className={style.test}>
<img src="/arrow-left.svg" alt="" />
</div>
}
export default Task
in task.module.css
.test{
display: inline-block;
width: 3rem;
height: 3rem;
background-image: url(/arrow-left.svg);
background-position: center;
background-size: 2rem;
background-repeat: no-repeat;
}

Answer 1

Add the xmlns attribute when referring external svg files
xmlns="http://www.w3.org/2000/svg" so your arrow.svg becomes
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M10.25 6.75L4.75 12L10.25 17.25"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
d="M19.25 12H5"
/>
</svg>
Here is a very well drafted explanation of why
and your arrow working - https://stackblitz.com/edit/nextjs-vhje7s?file=pages%2Findex.js