使用包裹加载资产 - svg 图标不可见

Question

我有一个用 parcel 构建的 vanilla js 项目。我有一个图标标签我的 html:

<i class="icon"></i>

并且在 scss 文件中，我将背景设置为存在于 projectRoot/src/assets/icons/icon.svg 中的 svg 文件:

.icon {
    background: url('../assets/icons/icon.svg');
    height: 16px;
    width: 16px;
    display: block;
}

在控制台中检查时，我看到图标正在正确导入，如果我在 localhost:3000/icon 上打开它。5187a1f6.svg 我明白了图标。所以我想知道为什么它在浏览器中不可见？

这是 svg 文件：

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
    <circle style="fill:#1273EB" cx="256" cy="256" r="256" data-original="#2D404E" class="active-path" data-old_color="#2D404E"/>
    <path style="fill:#48B19B;" d="M512,256c0-51.363-15.124-99.191-41.165-139.275c0,0-14.604,21.334-11.86,35.047   c2.742,13.715,18.855,14.762,17.2,24.822s-13.541-2.879-28.172,23.633c-14.63,26.514-7.312,63.096,13.714,65.834   C482.744,268.797,512,256,512,256z" data-original="#48B19B" class=""/>
    <path style="fill:#48B19B;" d="M323.23,8.92c29.797,8.088,57.434,21.424,81.857,38.951c0,0-29.684-4.896-40.929,5.158   c-11.244,10.057-27.643,33.832-40.929,0C309.945,19.199,323.23,8.92,323.23,8.92z" data-original="#48B19B" class=""/>
    <path style="fill:#48B19B;" d="M63.519,87.219C110.437,33.754,179.275,0,256,0c0,0-17.368,10.516,15.546,28.344   c32.915,17.83,17.828,26.057,10.971,31.543c-6.856,5.486-18.749-10.971-26.517-21.941c-7.769-10.973-41.132-27.885-66.734-18.74   c-25.601,9.145-47.539,15.9-43.885,24.408c3.653,8.506,47.539-7.945,63.996-7.035c16.457,0.912,10.971,10.967-4.569,22.854   c-15.542,11.887-17.374,26.514-0.916,35.656c16.456,9.146,36.566,10.061,41.143,4.576c4.574-5.486-8.229-41.143,22.858-25.602   s56.688,24.691,31.087,47.545c-25.602,22.852-54.857,48.461-55.773,63.084c-0.916,14.625,9.146,26.52,3.66,27.43   c-5.486,0.91-10.521-5.941-14.176-10.973c-3.653-5.029-20.571-6.855-28.799-3.658c-8.229,3.197-23.774,15.541-15.086,27.428   c8.689,11.889,20.565,6.396,32.454,11.883c11.887,5.486,22.972,26.365,20.696,31.084c-2.276,4.717-12.409-1.256-20.696-17.369   c-8.289-16.115-23.835-5.486-34.773-8.229c-10.939-2.742-19.168-4.57-30.14-23.771c-10.972-19.199-33.687-24.572-42.969-35.656   c-26.589-31.75-24.687-55.771-30.172-66.742C77.72,105.145,63.519,87.219,63.519,87.219z" data-original="#48B19B" class=""/>
    <path style="fill:#48B19B;" d="M280.685,259.658c0,0,27.429,2.738,41.143,14.627c13.714,11.887,15.546,16.461,36.573,21.031   c21.027,4.568,30.172,16.451,16.457,39.311c-13.714,22.857-38.404,59.43-50.287,70.402c-11.882,10.973-26.512,20.115-31.998,38.4   c-5.485,18.283-7.317,29.248,4.57,36.568c0,0-6.396,15.545-21.026-4.57c-14.631-20.117-2.744-43.885,0-57.6   c2.742-13.713,10.055-54.852,5.484-64.914c-4.568-10.059-25.601-16.461-31.087-37.486   C245.028,294.401,254.629,253.483,280.685,259.658z" data-original="#48B19B" class=""/>
    <path style="opacity:0.6;fill:#253744;enable-background:new    ;" d="M74.98,74.983c99.975-99.977,262.062-99.975,362.038,0   c99.976,99.973,99.976,262.062,0.001,362.037c0,0,116.148-153.59-48.293-318.031C224.284-45.453,74.98,74.983,74.98,74.983z"/>
</g></g> </svg>

Answer 1

您可以添加背景位置和背景覆盖。所以你的 css 应该是这样的：

.icon {
    background: url('../assets/icons/icon.svg');
    background-position: center;
    background-size: cover;
    height: 16px;
    width: 16px;
    display: block;
}

Answer 2

浏览器将 SVG 图像视为位图图像。图标class可以这样修改，

.icon {
    background-image: url('../assets/icons/icon.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 16px;
    width: 16px;
    display: block;
}

使用包裹加载资产 - svg 图标不可见

Loading assets with parcel - svg icon not visible

html

css

svg

parceljs