maksimerohin
3/27/2019 - 2:06 PM

SVG Sprite

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>SVG Sprites</title>
  </head>
  <body>
  
    <svg class="icon">
        <use xlink:href="sprite.svg#facebook"></use>
    </svg>
    
    <svg class="icon">
        <use xlink:href="sprite.svg#twitter"></use>
    </svg>
  
  </body>
</html>
sprite.svg
content_copyfile_download
  • Rendered
  • Source
style.css
content_copyfile_download
.icon {
  fill: red;
}

.icon:hover {
  fill: green;
}