Doing so would define SVG symbols that can later be referenced in other SVGs.
The minimum code required to insert one of the symbols defined above is as follows:
<svg width="128" height="128"><use href="#anger" /></svg>
Modify the value of the href attribute to insert
other glyphs.
To change the size of the SVG, set its width and
height attributes.
You could also specify a color palette like so:
<svg class="palette0" width="128" height="128"><use href="#anger" /></svg>
In order to customize colors, you could use some CSS:
.custom {
--color0: red;
}
@media (prefers-color-scheme: dark) {
.custom {
--color0: pink;
}
}
The class defined above can be applied like so:
<svg class="custom" width="128" height="128"><use href="#anger" /></svg>