Tools:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" fill="currentColor">
<defs>
<style>
g { display: none }
g:target { display: inline }
</style>
<symbol id="s-heart" viewBox="0 0 100 87">
<path d="M100,35c0-13-11-25-25-25s-25,12-25,18c0-5-11-18-25-18s-25,11-25,25c0,20,36,49,50,62,14-14,50-43,50-62z"/>
</symbol>
</defs>
<g id="icon-heart">
<use xlink:href="#s-heart" />
</g>
</svg>
-
Use
<symbol>tag withviewBox, to enshure we do not need add viewBox in<use>tag -
Define symbols in
<defs>, so you can reuse paths in groups -
Add few styles to show/hide active image group:
<style>
g { display: none }
g:target { display: inline }
</style>
- You can include icon inline with '' tag:
<svg class="icon icon-heart icon-heart--red">
<use xlink:href="#s-heart" />
</svg>
- You can set background in css:
.icon {
background-color: red;
-webkit-mask: url(sprite.svg#icon-heart) no-repeat 50% 50%;
mask: url(sprite.svg#icon-heart) no-repeat 50% 50%;
}
- Also, add some filters:
.icon--hue {
-webkit-filter: hue-rotate(220deg) saturate(5);
filter: hue-rotate(220deg) saturate(5);
}
- Add
fill="currentColor",stroke="currentColor"where you want to use csscolorproperty and do not add where you want use cssfillorstrokeproperty:
<g>
<g fill="currentColor"></g> <!-- uses color css property for fill color -->
<g stroke="currentColor"></g> <!-- uses color css property for stroke color -->
<g></g> <!-- uses fill css property for fill color and stroke css property for stroke color -->
</g>
- More colors!
.icon--colored {
--primary-color: #0099CC;
--secondary-color: #FFDF34;
--tertiary-color: #333;
}
- Add
preserveAspectRatio="xMidYMid meet"attribute, removewidth,height, leaveviewBox
svg {
height: XXX;
width: auto;
min-width: auto;
max-width: 100%;
}
Thanks to: