simplestyle
Version:
Simple Style Guide Tool based on Atomic Web Design
61 lines (59 loc) • 4.12 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>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-visio" viewBox="0 0 33 32">
<title>visio</title>
<path class="path1" d="M0 3.211v25.573l19.485 3.216v-32zM10.96 21.92h-2.768l-2.768-11.956h2.103l2.214 9.299 2.103-9.299h2.214z"></path>
<path class="path2" d="M20.813 3.985v5.978h3.764l3.211-3.432 4.428 3.985-3.543 3.653 0.111 6.975h-3.653l0.111 3.764h-4.428v3.211h12.621v-24.134h-12.621z"></path>
<path class="path3" d="M20.813 11.624v5.093h4.207v3.1h2.103v-5.646l-2.546-2.546h-3.764z"></path>
<path class="path4" d="M20.813 18.599h3.155v4.871h-3.155v-4.871z"></path>
<path class="path5" d="M25.684 10.739l2.325-2.325 2.325 2.325-2.325 2.214-2.325-2.214z"></path>
</symbol>
<symbol id="icon-pencil" viewBox="0 0 32 32">
<title>pencil</title>
<path class="path1" d="M11.392 26.528c-0.352 0.384-0.96 0.384-1.312 0l-4.32-4.32c-0.352-0.352-0.352-0.96 0-1.312l13.824-13.824c0.352-0.352 0.96-0.352 1.312 0l4.32 4.32c0.352 0.384 0.352 0.96 0 1.312l-13.824 13.824zM28.608 3.68c-2.464-2.464-4.896-0.576-4.896-0.576-0.416 0.32-1.024 0.864-1.376 1.216s-0.352 0.96 0 1.312l4.32 4.32c0.384 0.352 0.96 0.352 1.312 0s0.896-0.96 1.216-1.376c0 0 1.888-2.432-0.576-4.896M6.272 28.832c0.512-0.128 0.608-0.512 0.256-0.864l-2.208-2.24c-0.384-0.352-0.768-0.256-0.896 0.256l-0.736 2.88c-0.096 0.512 0.192 0.832 0.704 0.704l2.88-0.736z"></path>
</symbol>
<symbol id="icon-thumbs-o-up" viewBox="0 0 24 28">
<title>thumbs-o-up</title>
<path class="path1" d="M4 21c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM22 12c0-1.062-0.953-2-2-2h-5.5c0-1.828 1.5-3.156 1.5-5 0-1.828-0.359-3-2.5-3-1 1.016-0.484 3.406-2 5-0.438 0.453-0.812 0.938-1.203 1.422-0.703 0.906-2.562 3.578-3.797 3.578h-0.5v10h0.5c0.875 0 2.312 0.562 3.156 0.859 1.719 0.594 3.5 1.141 5.344 1.141h1.891c1.766 0 3-0.703 3-2.609 0-0.297-0.031-0.594-0.078-0.875 0.656-0.359 1.016-1.25 1.016-1.969 0-0.375-0.094-0.75-0.281-1.078 0.531-0.5 0.828-1.125 0.828-1.859 0-0.5-0.219-1.234-0.547-1.609 0.734-0.016 1.172-1.422 1.172-2zM24 11.984c0 0.906-0.266 1.797-0.766 2.547 0.094 0.344 0.141 0.719 0.141 1.078 0 0.781-0.203 1.563-0.594 2.25 0.031 0.219 0.047 0.453 0.047 0.672 0 1-0.328 2-0.938 2.781 0.031 2.953-1.984 4.688-4.875 4.688h-2.016c-2.219 0-4.281-0.656-6.344-1.375-0.453-0.156-1.719-0.625-2.156-0.625h-4.5c-1.109 0-2-0.891-2-2v-10c0-1.109 0.891-2 2-2h4.281c0.609-0.406 1.672-1.813 2.141-2.422 0.531-0.688 1.078-1.359 1.672-2 0.938-1 0.438-3.469 2-5 0.375-0.359 0.875-0.578 1.406-0.578 1.625 0 3.187 0.578 3.953 2.094 0.484 0.953 0.547 1.859 0.547 2.906 0 1.094-0.281 2.031-0.75 3h2.75c2.156 0 4 1.828 4 3.984z"></path>
</symbol>
</defs>
</svg>
<header class="bgc1 clearfix">
<div class="mhl">
<p>SVG Icons - Generated by <a href="https://icomoon.io/app">IcoMoon</a></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-visio"><use xlink:href="#icon-visio"></use></svg><span class="mls"> icon-visio</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-pencil"><use xlink:href="#icon-pencil"></use></svg><span class="mls"> icon-pencil</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-thumbs-o-up"><use xlink:href="#icon-thumbs-o-up"></use></svg><span class="mls"> icon-thumbs-o-up</span>
</div>
</div>
</div>
<script defer src="svgxuse.js"></script>
</body>
</html>