simplestyle
Version:
Simple Style Guide Tool based on Atomic Web Design
103 lines (101 loc) • 7.23 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-chevron-down" viewBox="0 0 53 32">
<title>chevron-down</title>
<path class="path1" d="M52.568 5.638l-5.637-5.638-20.71 20.709-20.6-20.602-5.62 5.62 26.272 26.272 5.62-5.62-0.034-0.032 20.709-20.709z"></path>
</symbol>
<symbol id="icon-search" viewBox="0 0 33 32">
<title>search</title>
<path class="path1" d="M13.832 0c-7.638 0-13.832 6.047-13.832 13.509s6.194 13.509 13.832 13.509 13.83-6.047 13.83-13.509-6.19-13.509-13.83-13.509zM13.832 22.873c-5.414 0-9.804-4.192-9.804-9.364s4.39-9.364 9.804-9.364 9.804 4.192 9.804 9.364-4.389 9.364-9.804 9.364z"></path>
<path class="path2" d="M25.716 20.85h-3.761v3.514l0.214-0.215 7.851 7.851h3.085v-2.837l-7.851-7.851 0.462-0.462z"></path>
</symbol>
<symbol id="icon-menu" viewBox="0 0 32 32">
<title>menu</title>
<path class="path1" d="M29.6 8.96h-27.2v-3.2h27.2v3.2zM29.6 17.6h-27.2v-3.2h27.2v3.2zM29.6 26.24h-27.2v-3.2h27.2v3.2z"></path>
</symbol>
<symbol id="icon-search2" viewBox="0 0 32 32">
<title>search2</title>
<path class="path1" d="M19.616 2.432c-5.568 0-10.112 4.544-10.112 10.112 0 1.792 0.48 3.488 1.312 4.96l-7.552 7.648c-0.992 1.024-0.992 2.656 0 3.648 0.512 0.512 1.184 0.736 1.824 0.736 0.672 0 1.344-0.256 1.824-0.736l7.52-7.616c1.504 0.928 3.296 1.472 5.184 1.472 5.568 0 10.112-4.544 10.112-10.112s-4.544-10.112-10.112-10.112zM19.616 19.52c-3.872 0-6.976-3.136-6.976-6.976 0-3.872 3.104-6.976 6.976-6.976 3.84 0 6.976 3.104 6.976 6.976 0 3.84-3.136 6.976-6.976 6.976z"></path>
</symbol>
<symbol id="icon-x2" viewBox="0 0 32 32">
<title>x2</title>
<path class="path1" d="M28 7.872l-8.128 8.128 8.128 8.16-3.84 3.84-8.192-8.128-8.096 8.128-3.872-3.84 8.096-8.16-8.096-8.128 3.872-3.872 8.096 8.128 8.192-8.128 3.84 3.872z"></path>
</symbol>
<symbol id="icon-arrow-up" viewBox="0 0 30 32">
<title>arrow-up</title>
<path class="path1" d="M28.768 17.339q0 0.911-0.661 1.607l-1.339 1.339q-0.679 0.679-1.625 0.679-0.964 0-1.607-0.679l-5.25-5.232v12.571q0 0.929-0.67 1.509t-1.616 0.58h-2.286q-0.946 0-1.616-0.58t-0.67-1.509v-12.571l-5.25 5.232q-0.643 0.679-1.607 0.679t-1.607-0.679l-1.339-1.339q-0.679-0.679-0.679-1.607 0-0.946 0.679-1.625l11.625-11.625q0.625-0.661 1.607-0.661 0.964 0 1.625 0.661l11.625 11.625q0.661 0.696 0.661 1.625z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 19 32">
<title>facebook</title>
<path class="path1" d="M17.125 0.214v4.714h-2.804q-1.536 0-2.071 0.643t-0.536 1.929v3.375h5.232l-0.696 5.286h-4.536v13.554h-5.464v-13.554h-4.554v-5.286h4.554v-3.893q0-3.321 1.857-5.152t4.946-1.83q2.625 0 4.071 0.214z"></path>
</symbol>
<symbol id="icon-youtube" viewBox="0 0 27 32">
<title>youtube</title>
<path class="path1" d="M17.339 22.214v3.768q0 1.196-0.696 1.196-0.411 0-0.804-0.393v-5.375q0.393-0.393 0.804-0.393 0.696 0 0.696 1.196zM23.375 22.232v0.821h-1.607v-0.821q0-1.214 0.804-1.214t0.804 1.214zM6.125 18.339h1.911v-1.679h-5.571v1.679h1.875v10.161h1.786v-10.161zM11.268 28.5h1.589v-8.821h-1.589v6.75q-0.536 0.75-1.018 0.75-0.321 0-0.375-0.375-0.018-0.054-0.018-0.625v-6.5h-1.589v6.982q0 0.875 0.143 1.304 0.214 0.661 1.036 0.661 0.857 0 1.821-1.089v0.964zM18.929 25.857v-3.518q0-1.304-0.161-1.768-0.304-1-1.268-1-0.893 0-1.661 0.964v-3.875h-1.589v11.839h1.589v-0.857q0.804 0.982 1.661 0.982 0.964 0 1.268-0.982 0.161-0.482 0.161-1.786zM24.964 25.679v-0.232h-1.625q0 0.911-0.036 1.089-0.125 0.643-0.714 0.643-0.821 0-0.821-1.232v-1.554h3.196v-1.839q0-1.411-0.482-2.071-0.696-0.911-1.893-0.911-1.214 0-1.911 0.911-0.5 0.661-0.5 2.071v3.089q0 1.411 0.518 2.071 0.696 0.911 1.929 0.911 1.286 0 1.929-0.946 0.321-0.482 0.375-0.964 0.036-0.161 0.036-1.036zM14.107 9.375v-3.75q0-1.232-0.768-1.232t-0.768 1.232v3.75q0 1.25 0.768 1.25t0.768-1.25zM26.946 22.786q0 4.179-0.464 6.25-0.25 1.054-1.036 1.768t-1.821 0.821q-3.286 0.375-9.911 0.375t-9.911-0.375q-1.036-0.107-1.83-0.821t-1.027-1.768q-0.464-2-0.464-6.25 0-4.179 0.464-6.25 0.25-1.054 1.036-1.768t1.839-0.839q3.268-0.357 9.893-0.357t9.911 0.357q1.036 0.125 1.83 0.839t1.027 1.768q0.464 2 0.464 6.25zM9.125 0h1.821l-2.161 7.125v4.839h-1.786v-4.839q-0.25-1.321-1.089-3.786-0.661-1.839-1.161-3.339h1.893l1.268 4.696zM15.732 5.946v3.125q0 1.446-0.5 2.107-0.661 0.911-1.893 0.911-1.196 0-1.875-0.911-0.5-0.679-0.5-2.107v-3.125q0-1.429 0.5-2.089 0.679-0.911 1.875-0.911 1.232 0 1.893 0.911 0.5 0.661 0.5 2.089zM21.714 3.054v8.911h-1.625v-0.982q-0.946 1.107-1.839 1.107-0.821 0-1.054-0.661-0.143-0.429-0.143-1.339v-7.036h1.625v6.554q0 0.589 0.018 0.625 0.054 0.393 0.375 0.393 0.482 0 1.018-0.768v-6.804h1.625z"></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-chevron-down"><use xlink:href="#icon-chevron-down"></use></svg><span class="mls"> icon-chevron-down</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-search"><use xlink:href="#icon-search"></use></svg><span class="mls"> icon-search</span>
</div>
</div>
<div class="glyph fs1">
<div class="clearfix pbs">
<svg class="icon icon-menu"><use xlink:href="#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="#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="#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="#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="#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="#icon-youtube"></use></svg><span class="mls"> icon-youtube</span>
</div>
</div>
</div>
<script defer src="svgxuse.js"></script>
</body>
</html>