svgnext.js

Some SVGs work in Nextjs and some not, why?

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;
}
Solution

  • 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