SVG sprite provides the modern way to add icons in web page. Currently avaliable all methods do not provide precise control on icon size and color.
To create svg sprite first we create a svg file like curious.svg. Then add the following code -
1
2
3
4
5
6
7
|
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="home" viewBox="0 0 24 24" fill="currentColor">
<path fill="none" d="M0 0h24v24H0z"></path><path d="M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20ZM19 19V9.97815L12 4.53371L5 9.97815V19H19Z"></path>
</symbol>
</svg>
|
Now we can add icon in web using following code -
1
2
3
4
|
<svg>
<use xlink:href="curious.svg#home"></use>
</svg>
|
We can style the svg using css like :
1
2
3
4
5
6
|
svg {
width: 1em;
height: 1em;
vertical-align: middle;
}
|