simplestyle
Version:
Simple Style Guide Tool based on Atomic Web Design
55 lines (54 loc) • 2.31 kB
HTML
<html>
<head>
<title>IcoMoon - SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="demo-files/demo.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="bgc1 clearfix">
<div class="mhl">
<p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></p><p><strong>Notice</strong>: This demo (along with "symbol-defs.svg" and "svgxuse.js" files) should be <b>hosted on a web server</b> to work properly.</p>
</div>
</header>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 0</h1>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-menu"><use xlink:href="symbol-defs.svg#icon-menu"></use></svg><span class="mls"> icon-menu</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-search2"><use xlink:href="symbol-defs.svg#icon-search2"></use></svg><span class="mls"> icon-search2</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-x2"><use xlink:href="symbol-defs.svg#icon-x2"></use></svg><span class="mls"> icon-x2</span>
</div>
</div>
</div>
<div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 14</h1>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-arrow-up"><use xlink:href="symbol-defs.svg#icon-arrow-up"></use></svg><span class="mls"> icon-arrow-up</span>
</div>
</div>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-facebook"><use xlink:href="symbol-defs.svg#icon-facebook"></use></svg><span class="mls"> icon-facebook</span>
</div>
</div>
<div class="glyph fs2">
<div class="clearfix pbs">
<svg class="icon icon-youtube"><use xlink:href="symbol-defs.svg#icon-youtube"></use></svg><span class="mls"> icon-youtube</span>
</div>
</div>
</div>
<script defer src="svgxuse.js"></script>
</body>
</html>