Thiết kế website giá rẻ

Question

Core problem:
I am using a third party library where I can only set text (no HTML or JS) as a label, but I want to add an icon before the text. The icon is part of an svg file that contains multiple icons that are accessed by id, usually via an icon set resolver.

The project itself is in vue 3 using vite, just in case there is an easy solution just for that.

My approach so far:
I tried using ::before and different combinations of url, background-image and related attributes. However the selector does not work, and I only get a combination of all icons displayed.

Now my question is: Is it even possible via CSS url attribute to use the ID selector to get only one of the SVGs in the file? Am I just doing it wrong? Is my svg file wrong?

My code stripped down to the relevant parts:
https://plnkr.co/edit/jMU0VICbE1ypfKlr?open=index.html

# index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add an icon via ::before</title>
    <link rel="stylesheet" href="lib/lib.css">
    <link rel="stylesheet" href="lib/style.css">
</head>
<body>
<div class="container">
    <div class="lib_label_col">
        <div class="label_row row_folder" style="top:0px;height:90px;line-height:89px;"
                data-row-index="0" data-row-id="1">
            <div class="scell folder opened" style="width:305px; height:48px;">
                <div class="scell_level0">
                    <div class="scell_expand"></div>
                    <div class="scell_name">Label 1</div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

# lib/icons.svg
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <svg id="chevron-down" height="24" width="24" viewBox="0 0 24 24" fill="none">
<!--        <rect width="24" height="24" fill="white"/>-->
        <path d="M17 9.5L12 14.5L7 9.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <svg id="chevron-right" height="24" width="24" viewBox="0 0 24 24" fill="none">
<!--        <rect width="24" height="24" fill="white"/>-->
        <path d="M9.5 7L14.5 12L9.5 17" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    <svg id="invalid" height="24" width="24" viewBox="0 0 24 24" fill="none">
<!--        <rect width="24" height="24" fill="white"/>-->
        <path d="M17 9.5L12 14.5L7 9.5" stroke="#000000" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
</svg>

# lib/lib.css
.scell {
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid rgba(0, 0, 255, 0.5);
    border-right: 1px solid rgba(0, 0, 255, 0.5);
}

.lib_data .lib_wrapper div {
    box-sizing: border-box;
}

.scell .scell_level0 {
    padding-left: 5px;
    padding-top: 16px;
    color: grey;
}

.scell.folder .scell_expand {
    float: left;
    width: auto;
}

.scell.folder .scell_name {
    float: left;
    width: 237px;
    color: grey;
    font-size: 14px;
    font: normal normal 600 14px/18px "Open Sans", sans-serif;;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.scell.folder .scell_expand {
    margin: -4px 4px
}

.scell.folder {
    border-right: 1px solid transparent;
}

.row_folder .scell {
    border-right-color: grey;
    border-bottom-color: grey;
}

# lib/style.css
.container {
    height: 100vh;
    width: 100vw;
}

.lib_container, .lib_data {
    width: 100%;
    height: 100%;
}

.scell {
    display: flex;
    flex-direction: row;
}

.scell::before {
    height: 24px;
    margin: 0 auto;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    padding-top: 12px;
    width: 24px;
}

.opened::before {
    content: url('icons.svg#chevron-down');
}

.closed::before {
    content: url('icons.svg#chevron-right');
}

.invalid::before {
    content: url('icons.svg#invalid');
}

.scell:not(.invalid):not(.opened):not(.closed)::before {
    content: "";
}

Thiết kế website giá rẻ

Danh mục

How to use SVG from file with multiple SVGs by ID selector with ::before