How to check which icons are available in svg file? - css

Question

In my vuejs2/html app based on external template svg icons
are used, like :
<svg class="icon icon-plus">
<use xlink:href="/img/icons.svg#plus" />
</svg>
<svg class="icon icon-basket">
<use xlink:href="/img/icons.svg#basket" />
</svg>
File icons.svg has 20 KiB in size and I wonder
if there is a way to check which icons are available in this
file? How can I check it? I need to of close, like ”x", but making
icons.svg#close
I failed.
Can I modify color/background color of these icons? I need to modify it with css propoties and set custom colors.
Are there some available resource easy to use to create such svg files?
Thanks!

Answer 1

Most modern svg icon libraries (feather-icons, fontAwesome etc.) provide something like a "cheat sheet" showing all available icons.
Besides, they will most likely provide an api for embedding and styling (like changing icon colors).
If you can't find any documentation, you could try to create an visual overview like so:
let svgIcons = document.querySelector('#svgIcons');
let symbols = svgIcons.querySelectorAll('symbol[id]');
let symbolUseHtml = '';
symbols.forEach(function(el, i){
let id = el.id;
let viewBox = el.getAttribute('viewBox');
let viewBoxAtt = viewBox ? 'viewBox="'+viewBox+'"' : '';
symbolUseHtml +=
'<div class="icon-wrp"><svg class="icon icon-'+id+'" id="icon-'+id+'" '+viewBoxAtt+'><use href="#'+id+'"></svg><p>'+id+'</p></div>';
});
symbolUseHtml+='';
document.body.insertAdjacentHTML('beforeend', symbolUseHtml);
.icon-wrp{
display:inline-block;
font-size:20px;
padding:0.5em;
border:1px solid #ccc
}
#icon-home{
fill: red;
}
#icon-close{
fill: green;
}
<svg id="svgIcons" viewBox="0 0 100 100" style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="home" viewBox="0 0 34 48">
<path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
</symbol>
<symbol id="close" viewBox="0 0 27 48">
<path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
</symbol>
</svg>
Most likely querying for <symbol> elements will do the trick – as #chrwahl recommended.
Unfortunately, there is no standardized concept, how icon libraries are referencing icon assets:
Some might use nested svg elements or elements wrapped in a <def>.
Here is a draft of a visual "icon Inspector" to illustrate the different flavors:
Icon inspector example
let svgIcons = document.querySelector(".svgIcons");
let svgMarkup = document.querySelector("#svgMarkup");
let svgUseCode = document.querySelector("#svgUseCode");
let svgUseCodeID = document.querySelector("#svgUseCodeID");
let svgIconAssets = document.querySelector(".svgIconAssets");
let iconType = "";
let iconHtml = "";
// default example svg
let svgSrc = `<svg id="svgIcons" class="svgIcons" viewBox="0 0 100 100" style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="home" viewBox="0 0 34 48">
<path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z" />
</symbol>
<symbol id="close" viewBox="0 0 27 48">
<path d="M26.16,17.92l-10.44,10.44l10.44,10.44l-2.44,2.44l-10.44-10.44l-10.44,10.44l-2.44-2.44l10.44-10.44l-10.44-10.44l2.44-2.44l10.44,10.44l10.44-10.44Z" />
</symbol>
</svg>`;
svgMarkup.value = svgSrc;
loadSvg(svgSrc);
let svgSrcSelect = document.querySelectorAll(".trackChange");
svgSrcSelect.forEach(function (el, i) {
el.addEventListener("change", function (e) {
svgSrc = e.target.value;
loadSvg(svgSrc);
});
});
function loadSvg(src) {
// if external src
if (src.indexOf("<svg") == -1) {
fetch(src)
.then((response) => response.text())
.then((data) => {
// add temporary svg to DOM
svgIcons.innerHTML = data;
renderIcons(data);
})
.catch((error) => {
let errorData ='<svg class="icon" viewBox="0 0 100 100"><symbol id="error" viewBox="0 0 100 100" ><text x="50" y="50" width="100" text-anchor="middle" style="font-size:25%; fill:red">Not available</text></symbol></svg>';
svgIcons.innerHTML = errorData;
renderIcons(errorData);
})
}
// if src is svg markup
else {
svgIcons.innerHTML = src;
renderIcons(src);
}
}
function renderIcons(data) {
let svgOuter = svgIcons.querySelector("svg");
let nested = svgOuter.querySelectorAll("svg");
let symbols = svgOuter.querySelectorAll("symbol");
let icons = symbols.length ? symbols : nested;
let nonPathEls = svgIcons.querySelectorAll("polyline, line");
iconType = icons == symbols ? "symbols" : "nested svgs";
iconHtml = "";
icons.forEach(function (el, i) {
let id = el.id ? el.id : "";
let idAtt = id ? ' id="icon-'+id+'" ' : '';
/**
* if an icon doesn't have an id –
* try to fetch the last class name
**/
let classAtt = !id ? el.classList : "";
let classLast = classAtt ? [].slice.call(classAtt).pop() : "";
let viewBox = el.getAttribute("viewBox");
let viewBoxAtt = viewBox ? 'viewBox="' + viewBox + '"' : "";
let iconDef = id ? document.querySelector("#" + id) : "";
let iconAsset = iconDef ? iconDef : el;
let iconUseHtml = "";
/**
* if icon defs contain other elements
* than paths – like polyline or line –
* maybe they're intended to have outlines/strokes
* but no fill (like in feather-icons)
**/
if (iconAsset) {
let children = iconAsset.childNodes;
if (children.length && nonPathEls.length) {
children.forEach(function (sub, i) {
sub.classList.add("icon-inner-stroke");
});
}
let iconInner = iconAsset ? iconAsset.innerHTML : "";
let iconSelector = !id ? "class: " + '<strong>'+classLast+'</strong>' : "id: " + '<strong>'+id+'</strong>';
if (id) {
iconUseHtml =
'<svg class="icon-use icon-use-' +
id +
idAtt+
viewBoxAtt +
">\n" +
'<use href="' +
id +
'" />\n' +
"</svg>\n";
}
let dataUse = iconUseHtml
? 'data-use="' + encodeURIComponent(iconUseHtml) + '" '
: 'data-use=""';
iconHtml +=
'<div class="icon-wrp" ' +
dataUse +
" >" +
'<svg class="icon icon-' +
id + '" '+
idAtt+
viewBoxAtt +
">" +
iconInner +
"</svg>" +
'<p class="icon-label">' +
iconSelector +
"<br>type: " +
iconType +
"</p>" +
"</div>";
//console.log(svgIconAssets)
}
});
svgIconAssets.innerHTML = iconHtml;
let svgIconWrp = svgIconAssets.querySelectorAll(".icon-wrp");
svgIconWrp.forEach(function (el, i) {
el.addEventListener("click", function (e) {
let currentIcon = e.target.closest(".icon-wrp");
let iconCode = '<!-- not selectable by id -->\n'+currentIcon.innerHTML;
let useCode = currentIcon.getAttribute("data-use");
useCode = useCode ? decodeURIComponent(useCode) : iconCode;
svgUseCode.value = useCode;
svgUseCodeID.innerHTML =
"<strong>" + currentIcon.querySelector("svg").id + "</strong>";
});
});
}
body {
margin: 0;
font-family: "Segoe UI";
}
* {
box-sizing: border-box;
font-family: inherit;
}
:root {
--svgHover: red;
}
::-webkit-scrollbar {
width: 0.45em;
border-radius: 0.5em;
background: #ddd;
}
::-webkit-scrollbar-track {
border-radius: 0.5em;
}
::-webkit-scrollbar-thumb {
background: #aaa;
border-radius: 0.5em;
}
.layout {
display: flex;
height: 100vh;
overflow: hidden;
}
.svgIconAssets {
display: flex;
flex-wrap: wrap;
}
.icon-wrp {
width: 10vw;
font-size: 4vw;
margin-bottom: 0.5em;
text-align: center;
}
.icon-wrp * {
text-align: center;
}
.icon-label {
font-size: 12px;
text-align: center;
margin: 0;
}
.icon {
display: inline-block;
height: 1em;
font-size: 1em;
color: #999;
fill: #999;
cursor:pointer;
&:hover {
color: var(--svgHover);
fill: var(--svgHover);
}
}
.icon-inner-stroke {
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
input {
width: 100%;
}
label{
font-size:0.8rem;
line-height: 1.2em;
margin-bottom:0.25rem;
}
.svgDisplay {
width: 75%;
height: 100%;
position: relative;
overflow: auto;
}
.frm-wrp {
padding: 1em;
margin-left: auto;
width: 20%;
background-color: #ccc;
display: flex;
flex-direction: column;
flex: 1;
* {
width: 100%;
}
textarea {
min-height: 5em;
height: 90%;
white-space: pre-wrap;
font-family: monospace;
}
input, textarea{
margin-bottom: 0.5rem;
}
}
<div class="layout">
<div class="svgDisplay">
<div class="svgIcons" style="display:none"></div>
<div class="svgIconAssets"></div>
</div>
<div class="frm-wrp">
<label>Svg URL</label>
<input type="text" id="svgSrcSelect" class="svgSrcSelect trackChange" list="dataSrc" placeholder="select example or paste svg url" />
<datalist id="dataSrc">
<option value="https://unpkg.com/feather-icons#4.28.0/dist/feather-sprite.svg">Feather icons</option>
<option value="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/sprites/regular.svg">FontAwesome (6.0)</option>
<option value="https://cdn.jsdelivr.net/npm/font-awesome-svg-icons#0.1.0/svg-sprite.svg">FontAwesome (0.1)</option>
</datalist>
<label>Svg markup</label>
<textarea id="svgMarkup" class="svgMarkup trackChange" placeholder="enter svg code"></textarea>
<label>Svg use code: <span id="svgUseCodeID"></span></label>
<textarea id="svgUseCode" class="svgUseCode" placeholder="enter svg code"></textarea>
</div>
</div>
This example contains 3 icon library svgs (you can select them in the URL field as datalist options).
Significant differences:
1. Feather icons
icons are defined as symbols
contain different element types like circle, polyline etc. (in addition to <path>)
all icons are styled by stroke attributes (stroke, stroke-width, stroke-linecap)
2. FontAwesome (6.0)
icons are defined as symbols
all assets are solid/closed <path> shapes
all icons are styled by fill attribute
3. FontAwesome (0.1)
icons are grouped in nested svg elements
using class names instead of IDs
(probably supposed to be just a test file)