Renatodeluna/Exemplo_svgSprite.html

## Exemplo_svgSprite.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Exemplo SVG</title>

    <style>
        svg:not(:root) {
            overflow: hidden;
        }
        .svgIcon {
            fill: #78cdf0;
            width: 100%;
            height: 3rem;
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <svg xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" display="none" version="1.1">
        <defs>
          <symbol id="icon-star" viewBox="0 0 24 23">
            <path class="cls-1" d="M5.436,22.996 C5.150,22.996 4.866,22.907 4.626,22.732 C4.202,22.423 3.989,21.900 4.078,21.383 L5.209,14.777 L0.417,10.100 C0.042,9.733 -0.094,9.185 0.069,8.685 C0.231,8.186 0.662,7.822 1.181,7.746 L7.803,6.783 L10.765,0.774 C10.997,0.302 11.476,0.004 12.000,0.004 C12.524,0.004 13.003,0.302 13.235,0.774 L16.197,6.783 L22.819,7.746 C23.338,7.822 23.769,8.186 23.931,8.685 C24.093,9.185 23.959,9.733 23.583,10.100 L18.791,14.777 L19.922,21.383 C20.010,21.900 19.798,22.423 19.373,22.732 C18.949,23.040 18.386,23.082 17.923,22.837 L12.000,19.719 L6.077,22.837 C5.875,22.943 5.655,22.996 5.436,22.996 ZM4.339,10.075 L7.651,13.308 C7.976,13.625 8.124,14.082 8.047,14.529 L7.265,19.094 L11.359,16.939 C11.760,16.728 12.240,16.728 12.641,16.939 L16.734,19.094 L15.953,14.529 C15.876,14.082 16.024,13.625 16.349,13.308 L19.661,10.075 L15.084,9.409 C14.635,9.344 14.248,9.062 14.047,8.655 L12.000,4.501 L9.953,8.655 C9.753,9.062 9.364,9.344 8.916,9.409 L4.339,10.075 Z"/>
          </symbol>
        </defs>
    </svg>

    <h1>
        <svg class="svgIcon">
            <use xlink:href="#icon-star"></use>
        </svg>
    </h1>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Exemplo SVG</title>

	<style>
	svg:not(:root) {
	overflow: hidden;
	}
	.svgIcon {
	fill: #78cdf0;
	width: 100%;
	height: 3rem;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<svg xmlns="//www.w3.org/2000/svg" xmlns:xlink="//www.w3.org/1999/xlink" display="none" version="1.1">
	<defs>
	<symbol id="icon-star" viewBox="0 0 24 23">
	<path class="cls-1" d="M5.436,22.996 C5.150,22.996 4.866,22.907 4.626,22.732 C4.202,22.423 3.989,21.900 4.078,21.383 L5.209,14.777 L0.417,10.100 C0.042,9.733 -0.094,9.185 0.069,8.685 C0.231,8.186 0.662,7.822 1.181,7.746 L7.803,6.783 L10.765,0.774 C10.997,0.302 11.476,0.004 12.000,0.004 C12.524,0.004 13.003,0.302 13.235,0.774 L16.197,6.783 L22.819,7.746 C23.338,7.822 23.769,8.186 23.931,8.685 C24.093,9.185 23.959,9.733 23.583,10.100 L18.791,14.777 L19.922,21.383 C20.010,21.900 19.798,22.423 19.373,22.732 C18.949,23.040 18.386,23.082 17.923,22.837 L12.000,19.719 L6.077,22.837 C5.875,22.943 5.655,22.996 5.436,22.996 ZM4.339,10.075 L7.651,13.308 C7.976,13.625 8.124,14.082 8.047,14.529 L7.265,19.094 L11.359,16.939 C11.760,16.728 12.240,16.728 12.641,16.939 L16.734,19.094 L15.953,14.529 C15.876,14.082 16.024,13.625 16.349,13.308 L19.661,10.075 L15.084,9.409 C14.635,9.344 14.248,9.062 14.047,8.655 L12.000,4.501 L9.953,8.655 C9.753,9.062 9.364,9.344 8.916,9.409 L4.339,10.075 Z"/>
	</symbol>
	</defs>
	</svg>

	<h1>
	<svg class="svgIcon">
	<use xlink:href="#icon-star"></use>
	</svg>
	</h1>
	</body>
	</html>