File: /home/frenchy/www/french-american.org/releases/20210303111656Z/app/assets/svg/symbols/preview.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="cache-control" content="max-age=0"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
<meta http-equiv="pragma" content="no-cache"/>
<title>Icon kit preview | gulp-svg-sprites</title>
<link href="css/sprite.css" rel="stylesheet" type="text/css" media="all"/>
<style type="text/css">@CHARSET "UTF-8";
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
color: #666;
background: #fafafa;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
line-height: 1.4
}
header {
display: block;
padding: 3em 3em 2em 3em;
background-color: #fff
}
header p {
margin: 0 0 0 0;
}
nav {
font-size: .7em;
display: block;
width: 100%;
margin: 0 0 2em 0
}
nav a {
display: inline-block;
text-decoration: none;
margin-left: 2em;
color: #0f7595;
white-space: nowrap
}
nav a:hover {
text-decoration: underline
}
nav a.current {
font-weight: bold;
text-decoration: underline;
color: #666
}
section {
border-top: 1px solid #eee;
padding: 2em 3em 0 3em
}
ul {
margin: 0;
padding: 0
}
.icon-boxes li {
display: inline-block;
background-color: #fff;
position: relative;
margin: 0 2em 2em 0;
vertical-align: top;
border: 1px solid #ccc;
padding: 1em 1em 1em 1em;
cursor: default
}
.icon-box {
margin: 0;
width: 144px;
height: 144px;
position: relative;
background: #ccc url(data:image/gif;base64,R0lGODlhDAAMAIAAAMzMzP///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4wLWMwNjEgNjQuMTQwOTQ5LCAyMDEwLzEyLzA3LTEwOjU3OjAxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQjk4OTI0MUY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQjk4OTI0MkY5NTIxMUUyQkJDMEI5NEFEM0Y1QTYwQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjNCOTg5MjNGRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCOTg5MjQwRjk1MjExRTJCQkMwQjk0QUQzRjVBNjBDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEAAAAAAAsAAAAAAwADAAAAhaEH6mHmmzcgzJAUG/NVGrfOZ8YLlABADs=) top left repeat;
border: 1px solid #ccc;
display: table-cell;
vertical-align: middle;
text-align: center
}
.icon-box.inverted {
background: black;
}
.icon {
display: inline;
display: inline-block
}
.snippet-popover {
position: absolute;
display: none;
opacity: 0;
bottom: 0;
left: 0;
background: white;
border: 1px solid #ccc;
padding: 16px;
z-index: 1;
transition: all .3s;
}
.snippet-popover.active {
display: block;
opacity: 1;
}
pre {
margin: 0;
margin-bottom: 20px;
}
h2 {
margin: 0;
padding: 5px 0;
font-size: 1em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
h4 {
margin: 0;
}
footer {
display: block;
margin: 0;
padding: 0 3em 3em 3em
}
footer p {
margin: 0;
font-size: .7em
}
footer a {
color: #0f7595;
margin-left: 0
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute">
<symbol id="i-chevron" viewBox="0 0 6 11">
<path d="M5.778 5.774l-4.519 4.518a.736.736 0 1 1-1.04-1.04l3.998-3.998L.219 1.256a.736.736 0 0 1 1.04-1.04l4.519 4.518a.733.733 0 0 1 0 1.04z"></path>
</symbol>
<symbol id="i-chevron--black" viewBox="0 0 6 11">
<path d="M5.778 5.774l-4.519 4.518a.736.736 0 1 1-1.04-1.04l3.998-3.998L.219 1.256a.736.736 0 0 1 1.04-1.04l4.519 4.518a.733.733 0 0 1 0 1.04z"></path>
</symbol>
<symbol id="i-chevron-down" viewBox="0 0 11.7 8">
<path d="M5.2 6.7L.7 2.2c-.3-.3-.3-.8 0-1 .3-.3.8-.3 1 0l4 4 4-4c.3-.3.8-.3 1 0 .3.3.3.8 0 1L6.2 6.7c-.1.1-.3.2-.5.2-.1 0-.3 0-.5-.2z"></path>
</symbol>
<symbol id="i-chevron-up" viewBox="0 0 11.7 8">
<path d="M6.3 1.2l4.5 4.5c.3.3.3.8 0 1-.3.3-.8.3-1 0l-4-4-4 4c-.3.3-.8.3-1 0-.3-.3-.3-.8 0-1l4.5-4.5c.1-.1.3-.2.5-.2.1 0 .3 0 .5.2z"></path>
</symbol>
<symbol id="i-email" viewBox="0 0 18 14">
<path d="M17.528.467A1.555 1.555 0 0 0 16.393 0H1.607C1.165 0 .787.156.472.467A1.524 1.524 0 0 0 0 1.591v10.818c0 .438.157.812.472 1.124.315.311.693.467 1.135.467h14.786c.442 0 .82-.156 1.135-.467.315-.312.472-.686.472-1.124V1.591c0-.438-.157-.812-.472-1.124zm-.814 11.942c0 .086-.032.16-.095.224a.31.31 0 0 1-.226.094H1.607a.31.31 0 0 1-.226-.094.304.304 0 0 1-.095-.224V4.773c.214.238.445.457.693.656a140.353 140.353 0 0 1 4.279 3.36c.341.286.62.508.834.667.214.159.503.32.868.482.365.163.708.244 1.03.244h.02c.321 0 .665-.081 1.03-.244a4.66 4.66 0 0 0 .869-.482c.214-.16.492-.381.833-.666a140.24 140.24 0 0 1 4.28-3.361c.247-.199.478-.418.692-.656v7.636zm0-10.56v.11c0 .39-.155.827-.467 1.307-.311.48-.648.864-1.01 1.149a1514.935 1514.935 0 0 0-4.027 3.152c-.04.033-.158.13-.352.293-.194.162-.348.287-.462.373-.114.086-.263.19-.447.313a2.69 2.69 0 0 1-.507.273c-.154.06-.298.09-.432.09h-.02c-.134 0-.278-.03-.432-.09a2.685 2.685 0 0 1-.507-.273 9.292 9.292 0 0 1-.447-.313 12.74 12.74 0 0 1-.462-.373c-.194-.163-.312-.26-.352-.293a1475.54 1475.54 0 0 0-4.028-3.152c-.984-.77-1.476-1.71-1.476-2.824 0-.086.032-.161.095-.224a.31.31 0 0 1 .226-.094h14.786c.053.03.1.038.14.025.04-.014.07.011.09.074.021.063.04.093.056.09.017-.004.027.038.03.124l.005.13v.133z" fill="#FFF"></path>
</symbol>
<symbol id="i-instagram" viewBox="0 0 30 30">
<path d="M15.683-.001c3.454.002 3.996.021 5.501.09 1.597.073 2.688.326 3.642.697a7.353 7.353 0 0 1 2.657 1.73 7.354 7.354 0 0 1 1.73 2.657c.37.955.624 2.045.697 3.642.069 1.506.088 2.047.09 5.502v1.366c-.002 3.454-.021 3.996-.09 5.501-.073 1.597-.326 2.688-.697 3.642a7.354 7.354 0 0 1-1.73 2.657 7.354 7.354 0 0 1-2.657 1.73c-.954.37-2.045.624-3.642.697-1.458.067-2.012.087-5.186.09h-1.997c-3.174-.003-3.727-.023-5.186-.09-1.597-.073-2.687-.326-3.642-.697a7.354 7.354 0 0 1-2.657-1.73 7.353 7.353 0 0 1-1.73-2.657c-.37-.954-.624-2.045-.697-3.642-.069-1.505-.088-2.047-.09-5.501v-1.366C0 10.862.02 10.32.089 8.815c.073-1.597.326-2.687.697-3.642a7.353 7.353 0 0 1 1.73-2.657A7.353 7.353 0 0 1 5.173.786C6.128.416 7.218.162 8.815.09 10.321.021 10.862.002 14.317 0zm.007 2.703h-1.38c-3.377.002-3.886.02-5.372.087-1.463.067-2.257.311-2.785.517-.7.272-1.2.597-1.725 1.122a4.647 4.647 0 0 0-1.122 1.725c-.206.528-.45 1.322-.517 2.785-.068 1.486-.085 1.995-.087 5.371v1.381c.002 3.377.02 3.885.087 5.371.067 1.463.311 2.257.517 2.786.272.7.597 1.2 1.122 1.724.525.525 1.024.85 1.725 1.123.528.205 1.322.45 2.785.516 1.438.066 1.96.084 5.053.087h2.017c3.093-.003 3.615-.021 5.053-.087 1.463-.067 2.257-.311 2.786-.516a4.65 4.65 0 0 0 1.724-1.123 4.647 4.647 0 0 0 1.123-1.724c.205-.529.45-1.323.516-2.786.066-1.438.084-1.96.087-5.053V13.99c-.003-3.092-.021-3.615-.087-5.053-.067-1.463-.311-2.257-.516-2.785-.273-.7-.598-1.2-1.123-1.725a4.647 4.647 0 0 0-1.724-1.122c-.529-.206-1.323-.45-2.786-.517-1.486-.068-1.994-.085-5.371-.087zM15 7.296a7.703 7.703 0 1 1 0 15.407 7.703 7.703 0 0 1 0-15.407zM15 10a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm8.007-4.807a1.8 1.8 0 1 1 0 3.6 1.8 1.8 0 0 1 0-3.6z" fill="#FFF" fill-rule="evenodd"></path>
</symbol>
<symbol id="i-linkedin" viewBox="0 0 30 27">
<path d="M6.603 8.658V27H.756V8.658h5.847zm15.976-.176c4.156 0 7.421 2.638 7.421 8.32V27h-6.63v-9.491c0-2.485-1.037-4.18-3.318-4.18-1.745 0-2.715 1.144-3.166 2.247-.17.396-.143.947-.143 1.499V27h-6.569s.085-16.813 0-18.342h6.569v2.88c.388-1.26 2.487-3.056 5.836-3.056zM3.572 0c2.157 0 3.484 1.37 3.526 3.18 0 1.777-1.369 3.184-3.567 3.184h-.042C1.373 6.364 0 4.962 0 3.184 0 1.373 1.413 0 3.572 0z" fill="#FFF" fill-rule="evenodd"></path>
</symbol>
<symbol id="i-lock" viewBox="0 0 30 37">
<path d="M15 0c6.015 0 10.91 4.457 10.91 9.935v3.846A4.95 4.95 0 0 1 30 18.657v13.39C30 34.777 27.789 37 25.071 37H4.93C2.21 37 0 34.778 0 32.047v-13.39a4.95 4.95 0 0 1 4.09-4.876V9.935C4.09 4.457 8.986 0 15 0zm10.071 15.074H4.93c-1.966 0-3.565 1.608-3.565 3.583v13.39c0 1.975 1.6 3.583 3.565 3.583h20.14c1.966 0 3.565-1.608 3.565-3.583v-13.39c0-1.975-1.6-3.583-3.565-3.583zM15 19.185a2.737 2.737 0 0 1 2.727 2.74v4.112A2.737 2.737 0 0 1 15 28.777a2.737 2.737 0 0 1-2.727-2.74v-4.111A2.737 2.737 0 0 1 15 19.186zm0 1.37c-.752 0-1.364.615-1.364 1.37v4.112c0 .756.612 1.37 1.364 1.37.752 0 1.364-.614 1.364-1.37v-4.111c0-.756-.612-1.37-1.364-1.37zM15 1.37c-5.264 0-9.545 3.842-9.545 8.565v3.769h19.09V9.935c0-4.723-4.281-8.565-9.545-8.565z" fill="#234588"></path>
</symbol>
<symbol id="i-map" viewBox="0 0 13 18">
<path d="M6.5 0C2.916 0 0 2.924 0 6.519c0 4.46 5.817 11.01 6.065 11.286.232.26.638.26.87 0C7.183 17.53 13 10.98 13 6.52 13 2.924 10.084 0 6.5 0zm0 9.799a3.279 3.279 0 0 1-3.27-3.28 3.279 3.279 0 0 1 3.27-3.28 3.279 3.279 0 0 1 3.27 3.28 3.279 3.279 0 0 1-3.27 3.28z" fill="#FFF"></path>
</symbol>
<symbol id="i-phone" viewBox="0 0 16 16">
<path d="M15.641 12.655l-2.47-2.477c-.493-.49-1.308-.476-1.817.035l-1.245 1.247-.246-.137c-.786-.436-1.862-1.035-2.994-2.17-1.136-1.138-1.733-2.218-2.17-3.007-.046-.083-.09-.164-.134-.24l.836-.837.41-.412c.51-.511.524-1.328.033-1.82L3.374.358c-.491-.492-1.307-.477-1.817.035l-.696.702.019.019a4.039 4.039 0 0 0-.574 1.014A4.267 4.267 0 0 0 .05 3.16c-.326 2.71.91 5.188 4.265 8.55 4.637 4.647 8.373 4.296 8.535 4.279a4.167 4.167 0 0 0 1.03-.26c.366-.143.71-.339 1.008-.572l.015.013.705-.692c.51-.511.524-1.328.033-1.822z" fill="#FFF"></path>
</symbol>
<symbol id="i-twitter" viewBox="0 0 27 22">
<path d="M26.255.407a11.038 11.038 0 0 1-3.52 1.345A5.52 5.52 0 0 0 18.692 0c-3.056 0-5.537 2.487-5.537 5.554 0 .435.048.858.143 1.264A15.705 15.705 0 0 1 1.879 1.014a5.557 5.557 0 0 0-.75 2.795c0 1.926.978 3.626 2.465 4.622a5.532 5.532 0 0 1-2.51-.692v.068a5.551 5.551 0 0 0 4.445 5.445 5.516 5.516 0 0 1-2.502.097 5.543 5.543 0 0 0 5.174 3.856 11.094 11.094 0 0 1-6.88 2.378c-.447 0-.888-.025-1.321-.076A15.67 15.67 0 0 0 8.492 22c10.19 0 15.76-8.461 15.76-15.801 0-.242-.004-.483-.014-.72A11.218 11.218 0 0 0 27 2.605c-.992.44-2.06.74-3.18.874A5.563 5.563 0 0 0 26.254.407" fill="#FFF" fill-rule="evenodd"></path>
</symbol>
<symbol id="i-warning" viewBox="0 0 27 27">
<path d="M13.5 6A1.5 1.5 0 0 1 15 7.5v7a1.5 1.5 0 0 1-3 0v-7A1.5 1.5 0 0 1 13.5 6zm0 12a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 9C6.044 27 0 20.956 0 13.5S6.044 0 13.5 0 27 6.044 27 13.5 20.956 27 13.5 27zm0-2C19.851 25 25 19.851 25 13.5S19.851 2 13.5 2 2 7.149 2 13.5 7.149 25 13.5 25z"></path>
</symbol>
<symbol id="i-warning--red" viewBox="0 0 27 27">
<path fill="#FF003E" d="M13.5 6A1.5 1.5 0 0 1 15 7.5v7a1.5 1.5 0 0 1-3 0v-7A1.5 1.5 0 0 1 13.5 6zm0 12a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm0 9C6.044 27 0 20.956 0 13.5S6.044 0 13.5 0 27 6.044 27 13.5 20.956 27 13.5 27zm0-2C19.851 25 25 19.851 25 13.5S19.851 2 13.5 2 2 7.149 2 13.5 7.149 25 13.5 25z"></path>
</symbol>
</svg>
<header>
<h1 id="logo">Gulp SVG Sprites <small>(13 icons in <symbol> mode)</small></h1>
<h4>Files Generated:</h4>
<ol>
<li><a href="svg/symbols.svg">svg/symbols.svg</a></li>
</ol>
<h4>Usage:</h4>
<ol>
<li>
Include the <strong>contents</strong> of the <a href="svg/symbols.svg">SVG file</a> just after the opening <code><body></code> tag.
</li>
<li>
Paste one of the snippets anywhere into your website.
</li>
</ol>
</header>
<section>
<ul class="icon-boxes">
<li title="i-chevron">
<div class="icon-box" id="icon-box-i-chevron">
<svg class="icon i-chevron">
<use xlink:href="#i-chevron" />
</svg>
</div>
<h2>i-chevron</h2>
<button onclick="showPopover('snippet-i-chevron')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-chevron')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-chevron">
<pre><code><svg class="icon i-chevron"><use xlink:href="#i-chevron"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-chevron--black">
<div class="icon-box" id="icon-box-i-chevron--black">
<svg class="icon i-chevron--black">
<use xlink:href="#i-chevron--black" />
</svg>
</div>
<h2>i-chevron--black</h2>
<button onclick="showPopover('snippet-i-chevron--black')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-chevron--black')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-chevron--black">
<pre><code><svg class="icon i-chevron--black"><use xlink:href="#i-chevron--black"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-chevron-down">
<div class="icon-box" id="icon-box-i-chevron-down">
<svg class="icon i-chevron-down">
<use xlink:href="#i-chevron-down" />
</svg>
</div>
<h2>i-chevron-down</h2>
<button onclick="showPopover('snippet-i-chevron-down')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-chevron-down')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-chevron-down">
<pre><code><svg class="icon i-chevron-down"><use xlink:href="#i-chevron-down"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-chevron-up">
<div class="icon-box" id="icon-box-i-chevron-up">
<svg class="icon i-chevron-up">
<use xlink:href="#i-chevron-up" />
</svg>
</div>
<h2>i-chevron-up</h2>
<button onclick="showPopover('snippet-i-chevron-up')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-chevron-up')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-chevron-up">
<pre><code><svg class="icon i-chevron-up"><use xlink:href="#i-chevron-up"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-email">
<div class="icon-box" id="icon-box-i-email">
<svg class="icon i-email">
<use xlink:href="#i-email" />
</svg>
</div>
<h2>i-email</h2>
<button onclick="showPopover('snippet-i-email')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-email')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-email">
<pre><code><svg class="icon i-email"><use xlink:href="#i-email"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-instagram">
<div class="icon-box" id="icon-box-i-instagram">
<svg class="icon i-instagram">
<use xlink:href="#i-instagram" />
</svg>
</div>
<h2>i-instagram</h2>
<button onclick="showPopover('snippet-i-instagram')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-instagram')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-instagram">
<pre><code><svg class="icon i-instagram"><use xlink:href="#i-instagram"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-linkedin">
<div class="icon-box" id="icon-box-i-linkedin">
<svg class="icon i-linkedin">
<use xlink:href="#i-linkedin" />
</svg>
</div>
<h2>i-linkedin</h2>
<button onclick="showPopover('snippet-i-linkedin')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-linkedin')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-linkedin">
<pre><code><svg class="icon i-linkedin"><use xlink:href="#i-linkedin"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-lock">
<div class="icon-box" id="icon-box-i-lock">
<svg class="icon i-lock">
<use xlink:href="#i-lock" />
</svg>
</div>
<h2>i-lock</h2>
<button onclick="showPopover('snippet-i-lock')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-lock')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-lock">
<pre><code><svg class="icon i-lock"><use xlink:href="#i-lock"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-map">
<div class="icon-box" id="icon-box-i-map">
<svg class="icon i-map">
<use xlink:href="#i-map" />
</svg>
</div>
<h2>i-map</h2>
<button onclick="showPopover('snippet-i-map')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-map')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-map">
<pre><code><svg class="icon i-map"><use xlink:href="#i-map"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-phone">
<div class="icon-box" id="icon-box-i-phone">
<svg class="icon i-phone">
<use xlink:href="#i-phone" />
</svg>
</div>
<h2>i-phone</h2>
<button onclick="showPopover('snippet-i-phone')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-phone')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-phone">
<pre><code><svg class="icon i-phone"><use xlink:href="#i-phone"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-twitter">
<div class="icon-box" id="icon-box-i-twitter">
<svg class="icon i-twitter">
<use xlink:href="#i-twitter" />
</svg>
</div>
<h2>i-twitter</h2>
<button onclick="showPopover('snippet-i-twitter')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-twitter')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-twitter">
<pre><code><svg class="icon i-twitter"><use xlink:href="#i-twitter"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-warning">
<div class="icon-box" id="icon-box-i-warning">
<svg class="icon i-warning">
<use xlink:href="#i-warning" />
</svg>
</div>
<h2>i-warning</h2>
<button onclick="showPopover('snippet-i-warning')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-warning')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-warning">
<pre><code><svg class="icon i-warning"><use xlink:href="#i-warning"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
<li title="i-warning--red">
<div class="icon-box" id="icon-box-i-warning--red">
<svg class="icon i-warning--red">
<use xlink:href="#i-warning--red" />
</svg>
</div>
<h2>i-warning--red</h2>
<button onclick="showPopover('snippet-i-warning--red')">Show Snippet</button>
<br/>
<button onclick="invertBackground('icon-box-i-warning--red')">Invert Background</button>
<div class="snippet-popover" id="snippet-i-warning--red">
<pre><code><svg class="icon i-warning--red"><use xlink:href="#i-warning--red"></use></svg></code></pre>
<button onclick="hidePopover()">Close</button>
</div>
</li>
</ul>
</section>
<footer>
<p>Generated by <a href="https://github.com/shakyshane/gulp-svg-sprites">Gulp Svg Sprites</a> - Preview page courtesy of <a href="http://iconizr.com" target="_blank">iconizr</a>.</p>
</footer>
<script type="text/javascript">
var openSnippet;
function showPopover(id) {
openSnippet = document.getElementById(id);
openSnippet.classList.add("active");
}
function hidePopover() {
openSnippet.classList.remove("active");
}
function invertBackground(id) {
var elem = document.getElementById(id);
elem.classList.toggle("inverted");
}
</script>
</body>
</html>