OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

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

  • Thread starter Thread starter sth
  • Start date Start date
S

sth

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

Code:
<!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:

Code:
<?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:

Code:
.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

Code:
.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: "";
}
<p>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.</p>
<p>The project itself is in vue 3 using vite, just in case there is an easy solution just for that.</p>
<p>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.</p>
<p>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?</p>
<p>My code stripped down to the relevant parts:
<a href="https://plnkr.co/edit/jMU0VICbE1ypfKlr?open=index.html" rel="nofollow noreferrer">https://plnkr.co/edit/jMU0VICbE1ypfKlr?open=index.html</a></p>
<p>index.html:</p>
<pre class="lang-html prettyprint-override"><code><!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>
</code></pre>
<p>lib/icons.svg:</p>
<pre class="lang-svg prettyprint-override"><code><?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>
</code></pre>
<p>lib/lib.css:</p>
<pre class="lang-cs prettyprint-override"><code>.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;
}
</code></pre>
<p>lib/style.css</p>
<pre class="lang-css prettyprint-override"><code>.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: "";
}
</code></pre>
Continue reading...
 

Latest posts

Top