Question

我正在使用parceljs捆绑我的代码。我正在尝试从服务器渲染数据时添加ajax加载器。

，但显示SVG图标。通过检查页面，我发现loader元素存在，但SVG的高度和宽度为0。我知道这不是兼容性问题，因为显示了不同的SVG图标

我试图欺骗捆绑器，然后在dist文件夹中添加SVG文件夹的URL。所以代替

我写了

export const renderLoader = parent => {
    let loader = `
        <div class="loader">
            <svg>
                <use href="./img/icons.svg#icon-cw"></use>
            </svg>
        </div>
    `
    parent.insertAdjacentHTML('afterbegin', loader);
}


.loader {
  margin: 5rem auto;
  text-align: center; }
  .loader svg {
    height: 5.5rem;
    width: 5.5rem;
    fill: #F59A83;
    transform-origin: 44% 50%;
    animation: rotate 1.5s infinite linear; }

@keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

没有任何控制台错误

svg url未使用parcel.js编译

0 个答案: