有些 SVG 在 Nextjs 中工作，有些则不能，为什么？

Question

当我尝试在 Nextjs 应用程序中使用 svgs 时，我一直在努力使用 svgs。 它们不会显示为背景图像或图像本身。我尝试过其他地方的 svgs 并且它们可以工作，但我找不到原因？

这个

不起作用。这是在该文件内： <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>

这个

确实有效。这是在该文件内： <?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>

我尝试将 svg 中的一些元素复制到不起作用的元素，但没有成功。当我将第一个 svg 转换为 png 时，它再次工作......我也尝试过更改描边颜色并清除缓存。

编辑：

在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

在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

xmlns

属性

xmlns="http://www.w3.org/2000/svg"

所以你的

arrow.svg

变成了

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

这是一个非常详尽的原因解释

你的箭头工作了 -

https://stackblitz.com/edit/nextjs-vhje7s?file=pages%2Findex.js

Answer 2