1522 lines
62 KiB
HTML
1522 lines
62 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
|
|
<script src="https://rawgit.com/jonathantneal/svg4everybody/master/dist/svg4everybody.js"></script>
|
|
<script>svg4everybody();</script>
|
|
<title>SVG <symbol> sprite preview | svg-sprite</title>
|
|
<style>@charset "UTF-8";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:2em 0 0 0}section{border-top:1px solid #eee;padding:2em 3em 0 3em}section ul{margin:0;padding:0}section li{display:inline;display:inline-block;background-color:#fff;position:relative;margin:0 2em 2em 0;vertical-align:top;border:1px solid #ccc;padding:1em 1em 3em 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{display:inline;display:inline-block}h1{margin-top:0}h2{margin:0;padding:0;font-size:1em;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:absolute;left:1em;right:1em;bottom:1em}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>
|
|
|
|
<!--
|
|
|
|
Sprite shape dimensions
|
|
====================================================================================================
|
|
You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
|
|
they would become a huge 100% in size. You may use the following dimension classes for doing so.
|
|
They might well be outsourced to an external stylesheet of course.
|
|
|
|
-->
|
|
|
|
<style type="text/css">
|
|
.svg-arrow-right-icon { width: 12px; height: 12px; }
|
|
.svg-arrow-up-icon { width: 16px; height: 16px; }
|
|
.svg-arrows-bold-right-icon { width: 32px; height: 32px; }
|
|
.svg-arrows-stre-left-icon { width: 32px; height: 32px; }
|
|
.svg-arrows-stre-right-icon { width: 32px; height: 32px; }
|
|
.svg-arrows-up-down-icon { width: 16px; height: 16px; }
|
|
.svg-bell-icon { width: 24px; height: 24px; }
|
|
.svg-brand-img-icon { width: 22px; height: 22px; }
|
|
.svg-bug-icon { width: 120px; height: 120px; }
|
|
.svg-calendar-icon { width: 14px; height: 14px; }
|
|
.svg-calendar-grid-icon { width: 24px; height: 24px; }
|
|
.svg-caret-icon { width: 16px; height: 16px; }
|
|
.svg-chart-icon { width: 32px; height: 32px; }
|
|
.svg-chat-icon { width: 24px; height: 24px; }
|
|
.svg-chat-bubble-icon { width: 24px; height: 24px; }
|
|
.svg-check-circle-icon { width: 24px; height: 24px; }
|
|
.svg-cog-icon { width: 24px; height: 24px; }
|
|
.svg-coins-icon { width: 24px; height: 24px; }
|
|
.svg-comments-icon { width: 20px; height: 20px; }
|
|
.svg-email-icon { width: 24px; height: 24px; }
|
|
.svg-envelope-icon { width: 24px; height: 24px; }
|
|
.svg-euro-icon { width: 16px; height: 16px; }
|
|
.svg-eye-icon { width: 24px; height: 24px; }
|
|
.svg-eye-2-icon { width: 16px; height: 16px; }
|
|
.svg-files-icon { width: 14px; height: 14px; }
|
|
.svg-inbox-icon { width: 14px; height: 14px; }
|
|
.svg-isvg-chat-icon { width: 48px; height: 48px; }
|
|
.svg-isvg-file-ai-icon { width: 48px; height: 48px; }
|
|
.svg-isvg-money-icon { width: 48px; height: 48px; }
|
|
.svg-isvg-package-icon { width: 48px; height: 48px; }
|
|
.svg-isvg-pin-icon { width: 48px; height: 48px; }
|
|
.svg-isvg-usd-icon { width: 48px; height: 48px; }
|
|
.svg-link-icon { width: 24px; height: 24px; }
|
|
.svg-list-icon { width: 14px; height: 14px; }
|
|
.svg-logout-icon { width: 14px; height: 14px; }
|
|
.svg-media-icon { width: 24px; height: 24px; }
|
|
.svg-monster-icon { width: 64px; height: 64px; }
|
|
.svg-phone-call-icon { width: 24px; height: 24px; }
|
|
.svg-pin-icon { width: 14px; height: 16px; }
|
|
.svg-plus-icon { width: 22px; height: 22px; }
|
|
.svg-post-editor-btn-camera-icon { width: 24px; height: 24px; }
|
|
.svg-post-editor-btn-code-icon { width: 24px; height: 24px; }
|
|
.svg-post-editor-btn-media-icon { width: 24px; height: 24px; }
|
|
.svg-post-editor-btn-stock-icon { width: 24px; height: 24px; }
|
|
.svg-refresh-icon { width: 16px; height: 16px; }
|
|
.svg-search-icon { width: 14px; height: 14px; }
|
|
.svg-search-gray-icon { width: 14px; height: 14px; }
|
|
.svg-send-icon { width: 24px; height: 24px; }
|
|
.svg-smile-icon { width: 24px; height: 24px; }
|
|
.svg-sun-icon { width: 24px; height: 24px; }
|
|
.svg-user-icon { width: 24px; height: 24px; }
|
|
.svg-user-add-icon { width: 24px; height: 24px; }
|
|
.svg-user-heart-icon { width: 20px; height: 20px; }
|
|
.svg-user-sm-icon { width: 14px; height: 14px; }
|
|
.svg-video-play-icon { width: 48px; height: 48px; }
|
|
.svg-views-icon { width: 24px; height: 24px; }
|
|
.svg-weather-1-icon { width: 24px; height: 24px; }
|
|
.svg-weather-2-icon { width: 24px; height: 24px; }
|
|
.svg-weather-3-icon { width: 24px; height: 24px; }
|
|
</style>
|
|
<!--
|
|
====================================================================================================
|
|
-->
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!--
|
|
|
|
Inline <symbol> SVG sprite
|
|
====================================================================================================
|
|
This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
|
|
below within this document. Please see
|
|
|
|
https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#defs--symbol-mode
|
|
|
|
for further details on how to create this embeddable sprite variant.
|
|
|
|
-->
|
|
|
|
<svg width="0" height="0" style="position:absolute">
|
|
<symbol viewBox="0 0 16 16" id="arrow-right"><path data-color="color-2" fill="#52c03b" d="M6 11l4-3-4-3z"/><path fill="#2c3f68" d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z"/></symbol>
|
|
<symbol viewBox="0 0 16 16" id="arrow-up"><path fill="#2c3f67" d="M11 5.4L12.4 4 8.7.3c-.4-.4-1-.4-1.4 0L3.6 4 5 5.4l2-2V16h2V3.4l2 2z"/><path data-color="color-2" fill="#52c03b" d="M11 8h5v2h-5zM0 8h7v2H0z"/></symbol>
|
|
<symbol viewBox="0 0 32 32" id="arrows-bold-right"><path d="M11 31.414L26.414 16 11 .586 5.586 6l10 10-10 10z"/></symbol>
|
|
<symbol viewBox="0 0 32 32" id="arrows-stre-left"><path fill="#222221" d="M20.768.605L10.186 15.419a1 1 0 0 0 0 1.162l10.582 14.813 1.627-1.162L12.229 16 22.395 1.768 20.768.605z"/></symbol>
|
|
<symbol viewBox="0 0 32 32" id="arrows-stre-right"><path fill="#222221" d="M11.232 31.395l10.582-14.813a1 1 0 0 0 0-1.162L11.232.605 9.605 1.768 19.771 16 9.605 30.232l1.627 1.163z"/></symbol>
|
|
<symbol viewBox="0 0 16 16" id="arrows-up-down"><image width="16" height="16" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAATlBMVEUAAABSwDtSwDssP2gsP2hSwDssP2hSwDtSwDtSwDtSwDtSwDtSwDssP2gsP2gsP2gsP2gsP2gsP2gsP2gsP2hSwDtSwDtSwDssP2gAAACIn3uOAAAAF3RSTlMAHNfWAdwQ2OTTLNIQ09ccLNLY3OTWASTcq/UAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4QILEDgAt7SpbQAAAF5JREFUGNO9zEkSgDAIRFFCnAeiRqXvf1JBrXgD2XT9t4CIAnMgvxgrn1Cr1i4V0Lz9ygOtmnTKBXoOqgOPBexUp3t/gFkSsMhaYEMGdkiBZA3k9P1weZqO4/RJItYXC0gInMOunQsAAAAASUVORK5CYII="/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="bell"><g fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round"><path data-color="color-2" stroke="#51be3b" d="M15.5 20.5c0 1.7-1.3 3-3 3s-3-1.3-3-3"/><path stroke="#2c3f68" d="M19.5 13.5v-5c0-3.9-3.1-7-7-7s-7 3.1-7 7v5c0 4-2 7-2 7h18s-2-3-2-7z"/></g></symbol>
|
|
<symbol viewBox="0 0 32 32" id="brand-img"><path fill="#fff" d="M30.063 2.585c-.253-1.023-.758-1.754-1.5-2.17-3.28-1.842-9.02 3.577-11.05 6.88-.65 1.06-1.275 2.358-1.792 3.718a9.978 9.978 0 0 0-4.366.337C6.954 12.694 4 16.975 4 22v2c0 4.337 3.663 8 8 8h1.98c5.31 0 9.803-3.664 10.682-8.714a10.5 10.5 0 0 0-.54-5.585c1.26-1.2 2.43-2.587 3.268-3.886 1.646-2.554 3.46-8.062 2.673-11.23zM12 23a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 23z"/><path data-color="color-2" fill="#52c03b" d="M10.77 9.437c1.14-.35 2.32-.527 3.506-.527h.148c.424-.954.888-1.846 1.37-2.633-1.106-2.466-2.56-4.72-4.01-5.71-.7-.477-1.387-.656-2.04-.528-.442.086-1.08.37-1.594 1.23C7 3.19 6.89 7.465 7.457 11.06c1-.7 2.108-1.255 3.312-1.623z"/></symbol>
|
|
<symbol viewBox="0 0 64 64" id="bug"><g fill="none" stroke-width="2" stroke-miterlimit="10"><path data-cap="butt" data-color="color-2" stroke="#52c03b" d="M2 34h8M10 10l6.6 6.6M54 10l-6.6 6.6M8 60l7.3-7.3M56 60l-7.3-7.3M54 34h8M24.8 6.8L20 2M39.2 6.8L44 2"/><path data-cap="butt" stroke="#2c3f67" d="M42 12c7.1 4.4 12 13.3 12 23.6C54 50.2 44.2 62 32 62S10 50.2 10 35.6c0-10.3 4.9-19.2 12-23.5M32 16v46"/><circle data-color="color-2" stroke="#52c03b" stroke-linecap="square" cx="22" cy="26" r="4"/><circle data-color="color-2" stroke="#52c03b" stroke-linecap="square" cx="42" cy="26" r="4"/><circle data-color="color-2" stroke="#52c03b" stroke-linecap="square" cx="21" cy="41" r="5"/><circle data-color="color-2" stroke="#52c03b" stroke-linecap="square" cx="43" cy="41" r="5"/><path stroke="#2c3f67" stroke-linecap="square" d="M32 4c-5.2 0-9.4 3.7-10.1 8.4 0 0 5.1 3.7 10.1 3.7s10.1-3.6 10.1-3.7C41.4 7.7 37.2 4 32 4z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="calendar"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M19 3h4v20H1V3h4M7 3h10"/><path stroke="#2c3f68" d="M5 1h2v4H5zM17 1h2v4h-2zM1 9h22"/><path data-color="color-2" stroke="#52c03b" d="M5 13h2v1H5zM11 13h2v1h-2zM5 18h2v1H5zM11 18h2v1h-2zM17 13h2v1h-2z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="calendar-grid"><g fill="none" stroke="#dedede" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path d="M23 9v14H1V9M1 3h22v6H1zM12 1v4M6 1v4M18 1v4"/><path data-color="color-2" d="M5 13h2v1H5zM11 13h2v1h-2zM5 18h2v1H5zM11 18h2v1h-2zM17 13h2v1h-2z"/></g></symbol>
|
|
<symbol viewBox="0 0 16 16" id="caret"><circle data-color="color-2" fill="#ff7473" cx="3.014" cy="14" r="2"/><circle data-color="color-2" fill="#ff7473" cx="13.014" cy="14" r="2"/><path fill="#2c3f68" d="M15.014 2h-11V1a1 1 0 0 0-1-1h-3v2h2v2h11.674L12.26 9H0v2h13.014c.446 0 .839-.296.962-.725l2-7C16.062 2.973 15.951 2 15.014 2z"/><path data-color="color-2" fill="#ff7473" d="M1 7h4v1H1zM2 5h4v1H2z"/></symbol>
|
|
<symbol viewBox="0 0 32 32" id="chart"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M28 26H4c-1.7 0-3-1.3-3-3h30c0 1.7-1.3 3-3 3zM4 23V8c0-1.1.9-2 2-2h20c1.1 0 2 .9 2 2v15"/><path data-color="color-2" stroke="#52c03b" d="M14 10h4v9h-4zM7 15h4v4H7zM21 13h4v6h-4z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="chat"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M20.4 16.8C22 15.2 23 13.2 23 11c0-5-4.9-9-11-9S1 6 1 11s4.9 9 11 9c1.1 0 2.1-.1 3.1-.4L21 22l-.6-5.2z"/><path data-color="color-2" stroke="#52c03b" d="M8 9h8M8 13h5"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="chat-bubble"><g transform="translate(.5 .5)" fill="none" stroke="#ccc" stroke-miterlimit="10"><path data-cap="butt" data-color="color-2" d="M7.799 16.601C9.092 18.61 11.826 20 15 20c.59 0 1.163-.051 1.716-.142L21 22v-4.04c1.241-1.057 2-2.44 2-3.96 0-1.552-.792-2.961-2.081-4.027"/><path stroke-linecap="square" d="M11 1C5.477 1 1 4.582 1 9c0 1.797.75 3.45 2 4.785V19l4.833-2.416C8.829 16.85 9.892 17 11 17c5.523 0 10-3.582 10-8s-4.477-8-10-8z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="check-circle"><g fill="none" stroke="#e7e7e7" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" d="M6 12l4 4 8-8"/><circle cx="12" cy="12" r="11"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="cog"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M23 12a2 2 0 0 0-2-2h-1.262a8.003 8.003 0 0 0-.852-2.058l.892-.892c.78-.78.78-2.047 0-2.828a2.001 2.001 0 0 0-2.828 0l-.892.892A7.968 7.968 0 0 0 14 4.262V3a2 2 0 0 0-4 0v1.262a8.003 8.003 0 0 0-2.058.852l-.892-.892a2.001 2.001 0 0 0-2.828 0c-.78.78-.78 2.047 0 2.828l.892.892A7.968 7.968 0 0 0 4.262 10H3a2 2 0 0 0 0 4h1.262c.19.732.477 1.422.852 2.058l-.892.892c-.78.78-.78 2.047 0 2.828.78.78 2.047.78 2.828 0l.892-.892a7.953 7.953 0 0 0 2.058.852V21a2 2 0 0 0 4 0v-1.262a8.003 8.003 0 0 0 2.058-.852l.892.892c.78.78 2.047.78 2.828 0 .78-.78.78-2.047 0-2.828l-.892-.892A7.953 7.953 0 0 0 19.738 14H21a2 2 0 0 0 2-2z"/><circle data-color="color-2" stroke="#52c03b" cx="12" cy="12" r="3"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="coins"><g transform="translate(.5 .5)" fill="none" stroke-miterlimit="10"><path data-cap="butt" stroke="#2c3f68" d="M12 17.3c-.7.4-1.8.7-3 .7-2.2 0-4-.9-4-2 0-.6.5-1.1 1.4-1.5"/><path data-cap="butt" stroke="#2c3f68" d="M12 14.3c-.7.4-1.8.7-3 .7-2.2 0-4-.9-4-2 0-.6.5-1.1 1.3-1.5"/><path data-cap="butt" stroke="#2c3f68" d="M12 11.3c-.7.4-1.8.7-3 .7-2.2 0-4-.9-4-2 0-.6.5-1.1 1.4-1.5M11.6 5.5c.9.4 1.4.9 1.4 1.5 0 1.1-1.8 2-4 2s-4-.9-4-2c0-.6.5-1.1 1.4-1.5"/><ellipse stroke="#2c3f68" stroke-linecap="square" cx="9" cy="4" rx="4" ry="2"/><path data-cap="butt" data-color="color-2" stroke="#52c03b" d="M17.6 17.5c.8.4 1.4.9 1.4 1.5 0 1.1-1.8 2-4 2s-4-.9-4-2c0-.6.5-1.1 1.4-1.5"/><path data-cap="butt" data-color="color-2" stroke="#52c03b" d="M17.7 14.5c.8.4 1.3.9 1.3 1.5 0 1.1-1.8 2-4 2s-4-.9-4-2c0-.6.5-1.1 1.4-1.5"/><path data-cap="butt" data-color="color-2" stroke="#52c03b" d="M17.6 11.5c.8.4 1.4.9 1.4 1.5 0 1.1-1.8 2-4 2s-4-.9-4-2c0-.6.5-1.1 1.4-1.5"/><ellipse data-color="color-2" stroke="#52c03b" stroke-linecap="square" cx="15" cy="10" rx="4" ry="2"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="comments"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M20.4 16.8C22 15.2 23 13.2 23 11c0-5-4.9-9-11-9S1 6 1 11s4.9 9 11 9c1.1 0 2.1-.1 3.1-.4L21 22l-.6-5.2z"/><path data-color="color-2" stroke="#46b72e" d="M8 9h8M8 13h5"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="email"><g fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round"><path data-color="color-2" stroke="#51be3b" d="M19.5 7.5l-7 7-7-7"/><path stroke="#2c3f68" d="M1.5 3.5h22v18h-22z"/><path data-color="color-2" stroke="#51be3b" d="M7.5 15.5l-2 2m12-2l2 2"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="envelope"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" stroke="#46b72e" d="M19 7l-7 7-7-7"/><path stroke="#2c3f68" d="M1 3h22v18H1z"/><path data-color="color-2" stroke="#46b72e" d="M7 15l-2 2M17 15l2 2"/></g></symbol>
|
|
<symbol viewBox="0 0 16 16" id="euro"><path fill="#2c3f68" d="M12.8 12.2c-.9.5-1.8.8-2.8.8-2 0-3.8-1.2-4.6-3H9c.6 0 1-.4 1-1s-.4-1-1-1H5c0-.3 0-.7.1-1H9c.6 0 1-.4 1-1s-.4-1-1-1H6c.9-1.2 2.3-2 4-2 1 0 1.9.3 2.8.8.5.3 1.1.2 1.4-.3.3-.5.2-1.1-.3-1.4C12.7 1.4 11.4 1 10 1 7.2 1 4.8 2.6 3.7 5H2c-.6 0-1 .4-1 1s.4 1 1 1h1.1c-.1.3-.1.7-.1 1H2c-.6 0-1 .4-1 1s.4 1 1 1h1.3c.9 2.9 3.5 5 6.7 5 1.4 0 2.7-.4 3.9-1.2.5-.3.6-.9.3-1.4-.4-.4-1-.5-1.4-.2z"/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="eye"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle data-color="color-2" stroke="#52c03b" cx="12" cy="12" r="3"/></g></symbol>
|
|
<symbol viewBox="0 0 16 16" id="eye-2"><path fill="#fff" d="M8 14c3.6 0 6.4-3.1 7.6-4.9.5-.7.5-1.6 0-2.3C14.4 5.1 11.6 2 8 2 4.4 2 1.6 5.1.4 6.9c-.5.7-.5 1.6 0 2.2C1.6 10.9 4.4 14 8 14zm0-9c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z"/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="files"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M23 23H1V1h8l3 4h11z"/><path data-color="color-2" stroke="#52c03b" d="M8 12h8v7H8zM10 12v-2c0-1.1.9-2 2-2s2 .9 2 2v2M12 15v1"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="inbox"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" stroke="#52c03b" d="M19 7l-7 7-7-7"/><path stroke="#2c3f68" d="M1 3h22v18H1z"/><path data-color="color-2" stroke="#52c03b" d="M7 15l-2 2M17 15l2 2"/></g></symbol>
|
|
<symbol class="banc-icon bacolored" viewBox="0 0 48 48" id="isvg-chat"><path fill="#60c84c" d="M45 8H14a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h11.697l11.748 7.832a1.004 1.004 0 0 0 1.027.05A1 1 0 0 0 39 43v-7h6a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2z"/><path fill="#39527b" stroke="#fff" d="M37 2H3a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h6v9a1.001 1.001 0 0 0 1 1 .988.988 0 0 0 .581-.187L24.32 30H37a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z"/></symbol>
|
|
<symbol class="bbnc-icon bbcolored" viewBox="0 0 48 48" id="isvg-file-ai"><path fill="#60c84c" d="M44 27H4l-3-4 4-4h38l4 4z"/><path fill="#39527b" d="M41 47H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h24l12 12v32a2 2 0 0 1-2 2z"/><path fill="#60c84c" d="M31 1v10a2 2 0 0 0 2 2h10L31 1zM45 41H3a2 2 0 0 1-2-2V23h46v16a2 2 0 0 1-2 2z"/><path fill="#FFF" d="M23.758 36l-.387-1.472H20.82L20.423 36h-2.331l2.562-7.885h2.83L26.078 36h-2.32zm-.826-3.212l-.339-1.289a42.226 42.226 0 0 1-.287-1.112c-.113-.454-.188-.78-.224-.977-.031.182-.096.482-.19.902a93.441 93.441 0 0 1-.631 2.476h1.671zM26.928 36v-7.853h2.132V36h-2.132z"/></symbol>
|
|
<symbol class="bcnc-icon bccolored" viewBox="0 0 48 48" id="isvg-money"><path fill="#60c84c" d="M39.88 33.955a.132.132 0 0 0-.005-.012L31 14l3.949-11.684A1 1 0 0 0 34 1H14a.999.999 0 0 0-.949 1.316L17 14 8.12 33.955a9.357 9.357 0 0 0 .813 8.842A9.358 9.358 0 0 0 16.755 47h14.49c3.156 0 6.08-1.57 7.822-4.203a9.357 9.357 0 0 0 .814-8.842z"/><path fill="#fff" d="M24 15a1 1 0 0 1-1-1V8a1 1 0 0 1 2 0v6a1 1 0 0 1-1 1zM24.243 30.03c-1.813-.453-2.285-.71-2.24-1.644.037-.782.714-1.386 1.497-1.386h1c.842 0 1.472.692 1.5 1.534a1 1 0 0 0 2-.034c0-1.758-1.308-3.204-3-3.45V23a1 1 0 1 0-2 0v2.05c-1.692.246-3 1.692-3 3.45 0 2.53 2.261 3.096 3.757 3.47 1.813.453 2.285.71 2.24 1.644C25.96 34.396 25.283 35 24.5 35h-1c-.842 0-1.472-.692-1.5-1.534a1 1 0 0 0-2 .034c0 1.758 1.308 3.204 3 3.45V39a1 1 0 0 0 2 0v-2.05c1.692-.246 3-1.692 3-3.45 0-2.53-2.261-3.096-3.757-3.47z"/><path fill="#fff" d="M31 15H17a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z"/></symbol>
|
|
<symbol class="bdnc-icon bdcolored" viewBox="0 0 48 48" id="isvg-package"><path fill="#60c84c" d="M32 1c-4.333 0-6.789 3.595-8 6.18C22.789 4.595 20.333 1 16 1c-2.757 0-5 2.243-5 5s2.243 5 5 5h16c2.757 0 5-2.243 5-5s-2.243-5-5-5zM16 9c-1.654 0-3-1.346-3-3s1.346-3 3-3c3.745 0 5.786 3.924 6.603 6H16zm16 0h-6.606C26.206 6.925 28.24 3 32 3c1.654 0 3 1.346 3 3s-1.346 3-3 3z"/><path fill="#39527b" d="M43 15H5v30a2 2 0 0 0 2 2h34a2 2 0 0 0 2-2V15z"/><path fill="#436090" d="M45 9H3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h42a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2z"/><path fill="#60c84c" d="M19 9h10v10H19zM19 19h10v28H19z"/></symbol>
|
|
<symbol class="benc-icon becolored" viewBox="0 0 48 48" id="isvg-pin"><path fill="#60c84c" d="M32 1c-8.284 0-15 6.716-15 15 0 8.95 11.358 20.497 14.307 23.344a.994.994 0 0 0 1.386 0C35.642 36.497 47 24.949 47 16c0-8.284-6.716-15-15-15z"/><path fill="#39527b" stroke="#fff" d="M18 1.112c-9.389 0-17 7.611-17 17 0 10.143 12.873 23.23 16.215 26.457.44.425 1.13.425 1.57 0C22.127 41.342 35 28.255 35 18.112c0-9.389-7.611-17-17-17z"/><circle fill="#FFF" cx="18" cy="18" r="6"/></symbol>
|
|
<symbol class="bfnc-icon bfcolored" viewBox="0 0 48 48" id="isvg-usd"><path fill="#39527b" d="M34 31c0-5.671-4.25-7.465-8-8.531V12.065c2 .31 3.596 1.969 3.934 4.094.077.484.49.841.98.841h2.02c.598 0 1.07-.525 1-1.12-.506-4.21-3.824-7.52-7.934-7.848V5a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3.035c-4.468.356-8 4.236-8 8.965 0 5.671 4.25 7.465 8 8.531v10.404c-2-.31-3.596-1.969-3.934-4.094a.993.993 0 0 0-.98-.841h-2.02c-.598 0-1.07.525-1 1.12.506 4.21 3.824 7.52 7.934 7.848V43a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3.035c4.468-.356 8-4.236 8-8.965zM18 17c0-2.512 1.744-4.578 4-4.928v9.273c-2.806-.918-4-1.92-4-4.345zm8 18.928v-9.273c2.806.918 4 1.92 4 4.345 0 2.512-1.744 4.578-4 4.928z"/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="link"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" stroke="#46b72e" d="M14 12c0 2.2-1.8 4-4 4H5c-2.2 0-4-1.8-4-4s1.8-4 4-4h2"/><path stroke="#2c3f68" d="M10 12c0-2.2 1.8-4 4-4h5c2.2 0 4 1.8 4 4s-1.8 4-4 4h-2"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="list"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" stroke="#52c03b" d="M10 4h12M10 12h12M10 20h12"/><path stroke="#2c3f68" d="M2 2h4v4H2zM2 10h4v4H2zM2 18h4v4H2z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="logout"><g transform="translate(.5 .5)" fill="none" stroke-miterlimit="10"><path data-cap="butt" data-color="color-2" stroke="#52c03b" d="M8.1 16c1.4 2.4 4 4 6.9 4 4.4 0 8-3.6 8-8s-3.6-8-8-8c-3 0-5.5 1.6-6.9 4"/><path data-cap="butt" stroke="#2c3f68" d="M16 12H2"/><path stroke="#2c3f68" stroke-linecap="square" d="M5 15l-3-3 3-3"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="media"><g transform="translate(.5 .5)" fill="none" stroke-miterlimit="10"><path data-cap="butt" stroke="#2c3f68" d="M17.9 1.7l-2.2 4.5M13 2.7l-2.2 4.5M8.1 3.7L5.9 8.2"/><path data-color="color-2" stroke="#52c03b" stroke-linecap="square" d="M10 13l4 3-4 3z"/><path stroke="#2c3f68" stroke-linecap="square" d="M2 9h20v14H2zM21.3 5.1L2 9l-.8-3.9 19.3-4z"/></g></symbol>
|
|
<symbol viewBox="0 0 64 64" id="monster"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><circle data-color="color-2" stroke="#57be44" cx="32" cy="26" r="4"/><circle data-color="color-2" stroke="#57be44" cx="32" cy="26" r="14"/><path data-color="color-2" stroke="#57be44" d="M26 50h12"/><circle stroke="#2d4066" cx="32" cy="32" r="30"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="phone-call"><g transform="translate(.5 .5)" fill="none" stroke="#ccc" stroke-linecap="square" stroke-miterlimit="10"><path d="M17 15l-3 3-8-8 3-3-5-5-3 3c0 9.941 8.059 18 18 18l3-3-5-5z"/><path data-color="color-2" d="M14 1a9 9 0 0 1 9 9M14 5a5 5 0 0 1 5 5"/></g></symbol>
|
|
<symbol viewBox="0 0 14 16" id="pin"><image data-name="Vector Smart Object" width="14" height="16" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAQCAMAAAARSr4IAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAArlBMVEUAAAArPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmdRwDtRwDsrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmdRwDsAAADMLFPnAAAAN3RSTlMAH5Dc+2f5zGAuZNGOAgObvgHHSlvvUhYYF91NSJPBvfeBgPohW/1tVqwJRvXEVTTq8UIj2OUxdXyeaQAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhAgsQNRgRdk92AAAAm0lEQVQI1z2N6xqBUBBF9zmnIpeIEpFblCJ3du//ZLpav2btb88MAAipNE1JgQrdYIWhV0Z2uqbZ65OFC4ODYRlbIxoCkmO7XrImlFCcAo7rOsCMCho9wM1zF5hTK3TRqleoz2VbXtFHwHVzyt4wgNhyV+ue4QE4RpRW8UaScZmeQiZpmjCK69b5wixjeEXD7U4+nvjzen++1fADP1wRBNJCcUAAAAAASUVORK5CYII="/></symbol>
|
|
<symbol viewBox="0 0 22 22" id="plus"><image data-name="Vector Smart Object" width="22" height="22" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWBAMAAAA2mnEIAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAFVBMVEUAAABRwDtRwDtRwDtRwDtRwDsAAAAaDsNlAAAABXRSTlMA1gEQHwdclWcAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4QILEDQ3o7xDbgAAACtJREFUGNNjYAABQQUGGGAKNYCzGWjIFg2FgUAUtrIxEIQ6AwkjmrsBye8ATawSUhseJ7wAAAAASUVORK5CYII="/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="post-editor-btn-camera"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M19 23H5c-2.2 0-4-1.8-4-4V5c0-2.2 1.8-4 4-4h14c2.2 0 4 1.8 4 4v14c0 2.2-1.8 4-4 4z"/><circle data-color="color-2" stroke="#46b72e" cx="12" cy="12" r="6"/><path stroke="#2c3f68" d="M12 9c0 1.7-1.3 3-3 3 0 1.7 1.3 3 3 3s3-1.3 3-3-1.3-3-3-3zM5 5h1"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="post-editor-btn-code"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M6 8l-4 4 4 4M18 8l4 4-4 4"/><path data-color="color-2" stroke="#46b72e" d="M10 20l4-16"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="post-editor-btn-media"><g fill="none" stroke-width="2" stroke-miterlimit="10"><path data-cap="butt" stroke="#2c3f68" d="M17.9 1.7l-2.2 4.5M13 2.7l-2.2 4.5M8.1 3.7L5.9 8.2"/><path data-color="color-2" stroke="#46b72e" stroke-linecap="square" d="M10 13l4 3-4 3z"/><path stroke="#2c3f68" stroke-linecap="square" d="M2 9h20v14H2zM21.3 5.1L2 9l-.8-3.9 19.3-4z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="post-editor-btn-stock"><g fill="none" stroke-width="2" stroke-miterlimit="10"><path data-cap="butt" stroke="#2c3f68" d="M16 12v10M16 2v6M18 10.1l5 2.9M1 15l5-4 4 3 4.1-3.4"/><path data-color="color-2" stroke="#46b72e" stroke-linecap="square" d="M1 2h22v20H1z"/><circle stroke="#2c3f68" stroke-linecap="square" cx="16" cy="10" r="2"/></g></symbol>
|
|
<symbol viewBox="0 0 16 16" id="refresh"><path fill="#2c3f68" d="M4.5 4.5c1.9-1.9 5.1-1.9 7 0 .7.7 1.2 1.7 1.4 2.7l2-.3c-.2-1.5-.9-2.8-1.9-3.8C10.3.4 5.9.4 3.1 3.1L.9.9.2 7.3l6.4-.7-2.1-2.1z"/><path data-color="color-2" fill="#52c03b" d="M15.8 8.7l-6.4.7 2.1 2.1c-1.9 1.9-5.1 1.9-7 0-.7-.7-1.2-1.7-1.4-2.7l-2 .3c.2 1.5.9 2.8 1.9 3.8 1.4 1.4 3.1 2 4.9 2 1.8 0 3.6-.7 4.9-2l2.2 2.2.8-6.4z"/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="search"><g transform="translate(.5 .5)" fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" stroke="#52c03b" d="M22 22l-3-3"/><circle stroke="#2c3f68" cx="10" cy="10" r="9"/><path data-color="color-2" stroke="#52c03b" d="M5.1 9C5.5 7 7 5.5 9 5.1"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="search-gray"><g fill="none" stroke="#afafaf" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" d="M22 22l-3-3"/><circle cx="10" cy="10" r="9"/><path data-color="color-2" d="M5.1 9C5.5 7 7 5.5 9 5.1"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="send"><image data-name="Vector Smart Object" width="24" height="24" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAjVBMVEUAAAArPmcrPmcrPmcrPmcuSGQtRGUrPmcrPmcrPmcrPmcrPmcrPmcrPmcsQWYrPmcrPmcrPmcrPmcsQmZAh04rPmcrPmcrPmc6c1VRwDsrPmcrPmcrPmdRwDsrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcwUGFQvDwrPmcrPmcsQ2VNsUBRwDsxUmAAAAAiyuIeAAAAKXRSTlMABEpbMJryGHPRCVi2/f4BPZvxyuojgN473A9mxByp+I7oBmji73nd7FG7jpgAAAABYktHRACIBR1IAAAACXBIWXMAAAsSAAALEgHS3X78AAAAB3RJTUUH4QILEDIXzojEIAAAAOJJREFUKM9tkdkagiAQhcc2FTWXUtM0FbQ6Ze//eoGWLcINfP/MYZZDpDvGYqnDq/UGixk1LRvAxvilzHE9YHvD+pv6QRjJ5N3+vsXqg+MklTRNDlm/h/2m+bGQNAoDv8z6bAfr1dupAjzXYUSKH+CZ6ou6kcm2pd4DLxO46s1FC3SCT9xP4YwFhlArQwOnABF71x5D54viFCL8mmEIPS6SswjBz9BcXHGWt4PU/9uSQCtbcJH8r4+3EGR6iGeLVRILxdwHJbFx1Dgk0KHKSSvBSeu1gMbTUdIYpJfUek58GuIJoDEYusSPx+UAAAAASUVORK5CYII="/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="smile"><image data-name="Vector Smart Object" width="24" height="24" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAb1BMVEUAAAArPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmcrPmdRwDtRwDtRwDtRwDtRwDtRwDtRwDtRwDtRwDtRwDtRwDtRwDtRwDsrPmdRwDsAAAA/0iQNAAAAInRSTlMAKoHD7yi0bPj8sF4uFmiItyWCegEIaf3vWwEQ+hzJflqTlH15rgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfhAgsQMSvKyutkAAAA40lEQVQoz3VSWXaDMBATa1lTCDSQli2a+9+xY+xA8lrrR7Y8m2UDFkEYxWQchQFekaQ8kCan/pExL8qqrquyyJldnvon2bTPTduQVxdPdv2Z3nfknpNk7N4aomNm+qRsNP7LiYb7hqnOyVzr34bxbnTLbc4AIQuNG0RGnFwwRMRSV6MK346VSkaIWenqPtpSjivGIGv8QU36D2wpiPzAMlwp2xyTzIZmmeCa7+MCi6yGVlngxrUXxCbDOs/rIBvcBZ0leMiOx2HJYeK2TNOyvZiIi8d24Op5KM3xPK3/M/z3fX4BszsYd75yQxMAAAAASUVORK5CYII="/></symbol>
|
|
<symbol viewBox="0 0 24 24" id="sun"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path data-color="color-2" stroke="#52c03b" d="M1 12h1M4.2 4.2l.7.7M12 1v1M19.8 4.2l-.7.7M23 12h-1M19.8 19.8l-.7-.7M12 23v-1M4.2 19.8l.7-.7"/><circle stroke="#39527b" cx="12" cy="12" r="6"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="user"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M12 12a5 5 0 0 1-5-5V6a5 5 0 0 1 10 0v1a5 5 0 0 1-5 5z"/><path data-color="color-2" stroke="#52c03b" d="M22 20.908a3.99 3.99 0 0 0-2.934-3.856C17.172 16.535 14.586 16 12 16s-5.172.535-7.066 1.052A3.99 3.99 0 0 0 2 20.908V23h20v-2.092z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="user-add"><g fill="none" stroke-width="2" stroke-miterlimit="10"><path data-cap="butt" stroke="#2c3f68" d="M11 13c-2.824 0-5.329.638-6.975 1.193A2.99 2.99 0 0 0 2 17.032V21h10"/><path stroke="#2c3f68" stroke-linecap="square" d="M11 13c-2.761 0-5-3.239-5-6V6a5 5 0 0 1 10 0v1c0 2.761-2.239 6-5 6z"/><path data-color="color-2" stroke="#fff" stroke-linecap="square" d="M19 16v6M16 19h6"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="user-heart"><g fill="none" stroke-width="2" stroke-miterlimit="10"><path data-cap="butt" stroke="#2c3f68" d="M11 13c-2.824 0-5.329.638-6.975 1.193A2.99 2.99 0 0 0 2 17.032V21h10"/><path stroke="#2c3f68" stroke-linecap="square" d="M11 13c-2.761 0-5-3.239-5-6V6a5 5 0 0 1 10 0v1c0 2.761-2.239 6-5 6z"/><path data-color="color-2" stroke="#46b72e" stroke-linecap="square" d="M22.361 15.631a2.199 2.199 0 0 0-3.361.333 2.199 2.199 0 0 0-3.361-.333 2.137 2.137 0 0 0 0 3.048L19 22l3.361-3.321a2.137 2.137 0 0 0 0-3.048z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="user-sm"><g transform="translate(.5 .5)" fill="none" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M12 12a5 5 0 0 1-5-5V6a5 5 0 0 1 10 0v1a5 5 0 0 1-5 5z"/><path data-color="color-2" stroke="#52c03b" d="M22 20.908a3.99 3.99 0 0 0-2.934-3.856C17.172 16.535 14.586 16 12 16s-5.172.535-7.066 1.052A3.99 3.99 0 0 0 2 20.908V23h20v-2.092z"/></g></symbol>
|
|
<symbol viewBox="0 0 48 48" id="video-play"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><circle stroke="#2c3f68" cx="24" cy="24" r="22"/><path data-color="color-2" stroke="#46b72e" d="M20 32V16l12 8z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="views"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle data-color="color-2" stroke="#46b72e" cx="12" cy="12" r="3"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="weather-1"><g fill="none" stroke-width="2" stroke-miterlimit="10"><path data-cap="butt" data-color="color-2" stroke="#52c03b" d="M19.8 12.3c1.9-1 3.2-3 3.2-5.3-3.3 0-6-2.7-6-6-2.4 0-4.4 1.4-5.4 3.4-.3.6-.4 1.2-.5 1.9"/><path stroke="#2c3f68" stroke-linecap="square" d="M9 6c3.8 0 7 2.6 7.8 6.2.4-.1.8-.2 1.2-.2 2.8 0 5 2.2 5 5s-2.2 5-5 5H9c-4.4 0-8-3.6-8-8s3.6-8 8-8z"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="weather-2"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M20 15.9c1.7-.4 3-2 3-3.9 0-2.2-1.8-4-4-4-.3-3.9-3.5-7-7.5-7S4.2 4.2 4 8.1c-1.7.4-3 2-3 3.9s1.3 3.4 3 3.9"/><path data-color="color-2" stroke="#52c03b" d="M12 19v-3M8 16v-3M16 16v-3M12 22v1M8 19v1M16 19v1"/></g></symbol>
|
|
<symbol viewBox="0 0 24 24" id="weather-3"><g fill="none" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10"><path stroke="#2c3f68" d="M1 10c0-4.4 3.6-8 8-8 3.8 0 7 2.6 7.8 6.2.4-.1.8-.2 1.2-.2 2.8 0 5 2.2 5 5s-2.2 5-5 5h-5"/><path data-color="color-2" stroke="#52c03b" d="M9 18H1M13 14H5M13 22H5"/></g></symbol>
|
|
</svg>
|
|
|
|
<!--
|
|
====================================================================================================
|
|
-->
|
|
|
|
<header>
|
|
<h1>SVG <code><symbol></code> sprite preview</h1>
|
|
<p>This preview features two methods of using the generated sprite in conjunction with inline SVG. Please have a look at the HTML source for further details and be aware of the following constraints:</p>
|
|
<ul>
|
|
<li>Your browser has to <a href="http://caniuse.com/#feat=svg-html5" target="_blank">support inline SVG</a> for these techniques to work.</li>
|
|
<li>The embedded sprite (A) slightly differs from the generated external one. Please <a href="https://github.com/jkphl/svg-sprite/blob/master/docs/configuration.md#defs--symbol-mode" target="_blank">see the documentation</a> for details on how to create such an embeddable sprite.</li>
|
|
<li>Internet Explorer up to version 11 doesn't support external sprites for use with inline SVG. For IE 9-11, you may polyfill this functionality with <a href="https://github.com/jonathantneal/svg4everybody" target="_blank">SVG for Everybody</a>.</li>
|
|
</ul>
|
|
</header>
|
|
<section>
|
|
|
|
<!--
|
|
|
|
A) Inline SVG with embedded sprite
|
|
====================================================================================================
|
|
These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
|
|
embedded above. They may be styled via CSS.
|
|
|
|
-->
|
|
|
|
<h3>A) Inline SVG with embedded sprite</h3>
|
|
<ul>
|
|
|
|
<li title="arrow-right">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrow-right -->
|
|
<svg class="svg-arrow-right-icon">
|
|
<use xlink:href="#arrow-right"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrow-right</h2>
|
|
</li>
|
|
<li title="arrow-up">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrow-up -->
|
|
<svg class="svg-arrow-up-icon">
|
|
<use xlink:href="#arrow-up"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrow-up</h2>
|
|
</li>
|
|
<li title="arrows-bold-right">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-bold-right -->
|
|
<svg class="svg-arrows-bold-right-icon">
|
|
<use xlink:href="#arrows-bold-right"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-bold-right</h2>
|
|
</li>
|
|
<li title="arrows-stre-left">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-stre-left -->
|
|
<svg class="svg-arrows-stre-left-icon">
|
|
<use xlink:href="#arrows-stre-left"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-stre-left</h2>
|
|
</li>
|
|
<li title="arrows-stre-right">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-stre-right -->
|
|
<svg class="svg-arrows-stre-right-icon">
|
|
<use xlink:href="#arrows-stre-right"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-stre-right</h2>
|
|
</li>
|
|
<li title="arrows-up-down">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-up-down -->
|
|
<svg class="svg-arrows-up-down-icon">
|
|
<use xlink:href="#arrows-up-down"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-up-down</h2>
|
|
</li>
|
|
<li title="bell">
|
|
<div class="icon-box">
|
|
|
|
<!-- bell -->
|
|
<svg class="svg-bell-icon">
|
|
<use xlink:href="#bell"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>bell</h2>
|
|
</li>
|
|
<li title="brand-img">
|
|
<div class="icon-box">
|
|
|
|
<!-- brand-img -->
|
|
<svg class="svg-brand-img-icon">
|
|
<use xlink:href="#brand-img"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>brand-img</h2>
|
|
</li>
|
|
<li title="bug">
|
|
<div class="icon-box">
|
|
|
|
<!-- bug -->
|
|
<svg class="svg-bug-icon">
|
|
<use xlink:href="#bug"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>bug</h2>
|
|
</li>
|
|
<li title="calendar">
|
|
<div class="icon-box">
|
|
|
|
<!-- calendar -->
|
|
<svg class="svg-calendar-icon">
|
|
<use xlink:href="#calendar"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>calendar</h2>
|
|
</li>
|
|
<li title="calendar-grid">
|
|
<div class="icon-box">
|
|
|
|
<!-- calendar-grid -->
|
|
<svg class="svg-calendar-grid-icon">
|
|
<use xlink:href="#calendar-grid"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>calendar-grid</h2>
|
|
</li>
|
|
<li title="caret">
|
|
<div class="icon-box">
|
|
|
|
<!-- caret -->
|
|
<svg class="svg-caret-icon">
|
|
<use xlink:href="#caret"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>caret</h2>
|
|
</li>
|
|
<li title="chart">
|
|
<div class="icon-box">
|
|
|
|
<!-- chart -->
|
|
<svg class="svg-chart-icon">
|
|
<use xlink:href="#chart"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>chart</h2>
|
|
</li>
|
|
<li title="chat">
|
|
<div class="icon-box">
|
|
|
|
<!-- chat -->
|
|
<svg class="svg-chat-icon">
|
|
<use xlink:href="#chat"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>chat</h2>
|
|
</li>
|
|
<li title="chat-bubble">
|
|
<div class="icon-box">
|
|
|
|
<!-- chat-bubble -->
|
|
<svg class="svg-chat-bubble-icon">
|
|
<use xlink:href="#chat-bubble"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>chat-bubble</h2>
|
|
</li>
|
|
<li title="check-circle">
|
|
<div class="icon-box">
|
|
|
|
<!-- check-circle -->
|
|
<svg class="svg-check-circle-icon">
|
|
<use xlink:href="#check-circle"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>check-circle</h2>
|
|
</li>
|
|
<li title="cog">
|
|
<div class="icon-box">
|
|
|
|
<!-- cog -->
|
|
<svg class="svg-cog-icon">
|
|
<use xlink:href="#cog"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>cog</h2>
|
|
</li>
|
|
<li title="coins">
|
|
<div class="icon-box">
|
|
|
|
<!-- coins -->
|
|
<svg class="svg-coins-icon">
|
|
<use xlink:href="#coins"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>coins</h2>
|
|
</li>
|
|
<li title="comments">
|
|
<div class="icon-box">
|
|
|
|
<!-- comments -->
|
|
<svg class="svg-comments-icon">
|
|
<use xlink:href="#comments"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>comments</h2>
|
|
</li>
|
|
<li title="email">
|
|
<div class="icon-box">
|
|
|
|
<!-- email -->
|
|
<svg class="svg-email-icon">
|
|
<use xlink:href="#email"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>email</h2>
|
|
</li>
|
|
<li title="envelope">
|
|
<div class="icon-box">
|
|
|
|
<!-- envelope -->
|
|
<svg class="svg-envelope-icon">
|
|
<use xlink:href="#envelope"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>envelope</h2>
|
|
</li>
|
|
<li title="euro">
|
|
<div class="icon-box">
|
|
|
|
<!-- euro -->
|
|
<svg class="svg-euro-icon">
|
|
<use xlink:href="#euro"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>euro</h2>
|
|
</li>
|
|
<li title="eye">
|
|
<div class="icon-box">
|
|
|
|
<!-- eye -->
|
|
<svg class="svg-eye-icon">
|
|
<use xlink:href="#eye"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>eye</h2>
|
|
</li>
|
|
<li title="eye-2">
|
|
<div class="icon-box">
|
|
|
|
<!-- eye-2 -->
|
|
<svg class="svg-eye-2-icon">
|
|
<use xlink:href="#eye-2"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>eye-2</h2>
|
|
</li>
|
|
<li title="files">
|
|
<div class="icon-box">
|
|
|
|
<!-- files -->
|
|
<svg class="svg-files-icon">
|
|
<use xlink:href="#files"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>files</h2>
|
|
</li>
|
|
<li title="inbox">
|
|
<div class="icon-box">
|
|
|
|
<!-- inbox -->
|
|
<svg class="svg-inbox-icon">
|
|
<use xlink:href="#inbox"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>inbox</h2>
|
|
</li>
|
|
<li title="isvg-chat">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-chat -->
|
|
<svg class="svg-isvg-chat-icon">
|
|
<use xlink:href="#isvg-chat"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-chat</h2>
|
|
</li>
|
|
<li title="isvg-file-ai">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-file-ai -->
|
|
<svg class="svg-isvg-file-ai-icon">
|
|
<use xlink:href="#isvg-file-ai"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-file-ai</h2>
|
|
</li>
|
|
<li title="isvg-money">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-money -->
|
|
<svg class="svg-isvg-money-icon">
|
|
<use xlink:href="#isvg-money"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-money</h2>
|
|
</li>
|
|
<li title="isvg-package">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-package -->
|
|
<svg class="svg-isvg-package-icon">
|
|
<use xlink:href="#isvg-package"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-package</h2>
|
|
</li>
|
|
<li title="isvg-pin">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-pin -->
|
|
<svg class="svg-isvg-pin-icon">
|
|
<use xlink:href="#isvg-pin"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-pin</h2>
|
|
</li>
|
|
<li title="isvg-usd">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-usd -->
|
|
<svg class="svg-isvg-usd-icon">
|
|
<use xlink:href="#isvg-usd"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-usd</h2>
|
|
</li>
|
|
<li title="link">
|
|
<div class="icon-box">
|
|
|
|
<!-- link -->
|
|
<svg class="svg-link-icon">
|
|
<use xlink:href="#link"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>link</h2>
|
|
</li>
|
|
<li title="list">
|
|
<div class="icon-box">
|
|
|
|
<!-- list -->
|
|
<svg class="svg-list-icon">
|
|
<use xlink:href="#list"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>list</h2>
|
|
</li>
|
|
<li title="logout">
|
|
<div class="icon-box">
|
|
|
|
<!-- logout -->
|
|
<svg class="svg-logout-icon">
|
|
<use xlink:href="#logout"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>logout</h2>
|
|
</li>
|
|
<li title="media">
|
|
<div class="icon-box">
|
|
|
|
<!-- media -->
|
|
<svg class="svg-media-icon">
|
|
<use xlink:href="#media"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>media</h2>
|
|
</li>
|
|
<li title="monster">
|
|
<div class="icon-box">
|
|
|
|
<!-- monster -->
|
|
<svg class="svg-monster-icon">
|
|
<use xlink:href="#monster"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>monster</h2>
|
|
</li>
|
|
<li title="phone-call">
|
|
<div class="icon-box">
|
|
|
|
<!-- phone-call -->
|
|
<svg class="svg-phone-call-icon">
|
|
<use xlink:href="#phone-call"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>phone-call</h2>
|
|
</li>
|
|
<li title="pin">
|
|
<div class="icon-box">
|
|
|
|
<!-- pin -->
|
|
<svg class="svg-pin-icon">
|
|
<use xlink:href="#pin"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>pin</h2>
|
|
</li>
|
|
<li title="plus">
|
|
<div class="icon-box">
|
|
|
|
<!-- plus -->
|
|
<svg class="svg-plus-icon">
|
|
<use xlink:href="#plus"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>plus</h2>
|
|
</li>
|
|
<li title="post-editor-btn-camera">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-camera -->
|
|
<svg class="svg-post-editor-btn-camera-icon">
|
|
<use xlink:href="#post-editor-btn-camera"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-camera</h2>
|
|
</li>
|
|
<li title="post-editor-btn-code">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-code -->
|
|
<svg class="svg-post-editor-btn-code-icon">
|
|
<use xlink:href="#post-editor-btn-code"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-code</h2>
|
|
</li>
|
|
<li title="post-editor-btn-media">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-media -->
|
|
<svg class="svg-post-editor-btn-media-icon">
|
|
<use xlink:href="#post-editor-btn-media"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-media</h2>
|
|
</li>
|
|
<li title="post-editor-btn-stock">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-stock -->
|
|
<svg class="svg-post-editor-btn-stock-icon">
|
|
<use xlink:href="#post-editor-btn-stock"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-stock</h2>
|
|
</li>
|
|
<li title="refresh">
|
|
<div class="icon-box">
|
|
|
|
<!-- refresh -->
|
|
<svg class="svg-refresh-icon">
|
|
<use xlink:href="#refresh"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>refresh</h2>
|
|
</li>
|
|
<li title="search">
|
|
<div class="icon-box">
|
|
|
|
<!-- search -->
|
|
<svg class="svg-search-icon">
|
|
<use xlink:href="#search"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>search</h2>
|
|
</li>
|
|
<li title="search-gray">
|
|
<div class="icon-box">
|
|
|
|
<!-- search-gray -->
|
|
<svg class="svg-search-gray-icon">
|
|
<use xlink:href="#search-gray"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>search-gray</h2>
|
|
</li>
|
|
<li title="send">
|
|
<div class="icon-box">
|
|
|
|
<!-- send -->
|
|
<svg class="svg-send-icon">
|
|
<use xlink:href="#send"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>send</h2>
|
|
</li>
|
|
<li title="smile">
|
|
<div class="icon-box">
|
|
|
|
<!-- smile -->
|
|
<svg class="svg-smile-icon">
|
|
<use xlink:href="#smile"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>smile</h2>
|
|
</li>
|
|
<li title="sun">
|
|
<div class="icon-box">
|
|
|
|
<!-- sun -->
|
|
<svg class="svg-sun-icon">
|
|
<use xlink:href="#sun"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>sun</h2>
|
|
</li>
|
|
<li title="user">
|
|
<div class="icon-box">
|
|
|
|
<!-- user -->
|
|
<svg class="svg-user-icon">
|
|
<use xlink:href="#user"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user</h2>
|
|
</li>
|
|
<li title="user-add">
|
|
<div class="icon-box">
|
|
|
|
<!-- user-add -->
|
|
<svg class="svg-user-add-icon">
|
|
<use xlink:href="#user-add"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user-add</h2>
|
|
</li>
|
|
<li title="user-heart">
|
|
<div class="icon-box">
|
|
|
|
<!-- user-heart -->
|
|
<svg class="svg-user-heart-icon">
|
|
<use xlink:href="#user-heart"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user-heart</h2>
|
|
</li>
|
|
<li title="user-sm">
|
|
<div class="icon-box">
|
|
|
|
<!-- user-sm -->
|
|
<svg class="svg-user-sm-icon">
|
|
<use xlink:href="#user-sm"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user-sm</h2>
|
|
</li>
|
|
<li title="video-play">
|
|
<div class="icon-box">
|
|
|
|
<!-- video-play -->
|
|
<svg class="svg-video-play-icon">
|
|
<use xlink:href="#video-play"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>video-play</h2>
|
|
</li>
|
|
<li title="views">
|
|
<div class="icon-box">
|
|
|
|
<!-- views -->
|
|
<svg class="svg-views-icon">
|
|
<use xlink:href="#views"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>views</h2>
|
|
</li>
|
|
<li title="weather-1">
|
|
<div class="icon-box">
|
|
|
|
<!-- weather-1 -->
|
|
<svg class="svg-weather-1-icon">
|
|
<use xlink:href="#weather-1"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>weather-1</h2>
|
|
</li>
|
|
<li title="weather-2">
|
|
<div class="icon-box">
|
|
|
|
<!-- weather-2 -->
|
|
<svg class="svg-weather-2-icon">
|
|
<use xlink:href="#weather-2"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>weather-2</h2>
|
|
</li>
|
|
<li title="weather-3">
|
|
<div class="icon-box">
|
|
|
|
<!-- weather-3 -->
|
|
<svg class="svg-weather-3-icon">
|
|
<use xlink:href="#weather-3"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>weather-3</h2>
|
|
</li>
|
|
</ul>
|
|
|
|
<!--
|
|
====================================================================================================
|
|
-->
|
|
|
|
</section>
|
|
<section>
|
|
|
|
<!--
|
|
|
|
B) Inline SVG with external sprite (IE 9-11 with polyfill only)
|
|
====================================================================================================
|
|
These SVG images make use of an URL + fragment identifiers (IDs) and refer to the regular external
|
|
SVG sprite. They may be styled via CSS. (IE 9-11 with polyfill only)
|
|
|
|
-->
|
|
|
|
<h3>B) Inline SVG with external sprite (IE 9-11 with polyfill only)</h3>
|
|
<ul>
|
|
|
|
<li title="arrow-right">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrow-right -->
|
|
<svg class="svg-arrow-right-icon">
|
|
<use xlink:href="sprite.svg#arrow-right"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrow-right</h2>
|
|
</li>
|
|
<li title="arrow-up">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrow-up -->
|
|
<svg class="svg-arrow-up-icon">
|
|
<use xlink:href="sprite.svg#arrow-up"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrow-up</h2>
|
|
</li>
|
|
<li title="arrows-bold-right">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-bold-right -->
|
|
<svg class="svg-arrows-bold-right-icon">
|
|
<use xlink:href="sprite.svg#arrows-bold-right"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-bold-right</h2>
|
|
</li>
|
|
<li title="arrows-stre-left">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-stre-left -->
|
|
<svg class="svg-arrows-stre-left-icon">
|
|
<use xlink:href="sprite.svg#arrows-stre-left"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-stre-left</h2>
|
|
</li>
|
|
<li title="arrows-stre-right">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-stre-right -->
|
|
<svg class="svg-arrows-stre-right-icon">
|
|
<use xlink:href="sprite.svg#arrows-stre-right"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-stre-right</h2>
|
|
</li>
|
|
<li title="arrows-up-down">
|
|
<div class="icon-box">
|
|
|
|
<!-- arrows-up-down -->
|
|
<svg class="svg-arrows-up-down-icon">
|
|
<use xlink:href="sprite.svg#arrows-up-down"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>arrows-up-down</h2>
|
|
</li>
|
|
<li title="bell">
|
|
<div class="icon-box">
|
|
|
|
<!-- bell -->
|
|
<svg class="svg-bell-icon">
|
|
<use xlink:href="sprite.svg#bell"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>bell</h2>
|
|
</li>
|
|
<li title="brand-img">
|
|
<div class="icon-box">
|
|
|
|
<!-- brand-img -->
|
|
<svg class="svg-brand-img-icon">
|
|
<use xlink:href="sprite.svg#brand-img"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>brand-img</h2>
|
|
</li>
|
|
<li title="bug">
|
|
<div class="icon-box">
|
|
|
|
<!-- bug -->
|
|
<svg class="svg-bug-icon">
|
|
<use xlink:href="sprite.svg#bug"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>bug</h2>
|
|
</li>
|
|
<li title="calendar">
|
|
<div class="icon-box">
|
|
|
|
<!-- calendar -->
|
|
<svg class="svg-calendar-icon">
|
|
<use xlink:href="sprite.svg#calendar"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>calendar</h2>
|
|
</li>
|
|
<li title="calendar-grid">
|
|
<div class="icon-box">
|
|
|
|
<!-- calendar-grid -->
|
|
<svg class="svg-calendar-grid-icon">
|
|
<use xlink:href="sprite.svg#calendar-grid"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>calendar-grid</h2>
|
|
</li>
|
|
<li title="caret">
|
|
<div class="icon-box">
|
|
|
|
<!-- caret -->
|
|
<svg class="svg-caret-icon">
|
|
<use xlink:href="sprite.svg#caret"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>caret</h2>
|
|
</li>
|
|
<li title="chart">
|
|
<div class="icon-box">
|
|
|
|
<!-- chart -->
|
|
<svg class="svg-chart-icon">
|
|
<use xlink:href="sprite.svg#chart"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>chart</h2>
|
|
</li>
|
|
<li title="chat">
|
|
<div class="icon-box">
|
|
|
|
<!-- chat -->
|
|
<svg class="svg-chat-icon">
|
|
<use xlink:href="sprite.svg#chat"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>chat</h2>
|
|
</li>
|
|
<li title="chat-bubble">
|
|
<div class="icon-box">
|
|
|
|
<!-- chat-bubble -->
|
|
<svg class="svg-chat-bubble-icon">
|
|
<use xlink:href="sprite.svg#chat-bubble"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>chat-bubble</h2>
|
|
</li>
|
|
<li title="check-circle">
|
|
<div class="icon-box">
|
|
|
|
<!-- check-circle -->
|
|
<svg class="svg-check-circle-icon">
|
|
<use xlink:href="sprite.svg#check-circle"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>check-circle</h2>
|
|
</li>
|
|
<li title="cog">
|
|
<div class="icon-box">
|
|
|
|
<!-- cog -->
|
|
<svg class="svg-cog-icon">
|
|
<use xlink:href="sprite.svg#cog"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>cog</h2>
|
|
</li>
|
|
<li title="coins">
|
|
<div class="icon-box">
|
|
|
|
<!-- coins -->
|
|
<svg class="svg-coins-icon">
|
|
<use xlink:href="sprite.svg#coins"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>coins</h2>
|
|
</li>
|
|
<li title="comments">
|
|
<div class="icon-box">
|
|
|
|
<!-- comments -->
|
|
<svg class="svg-comments-icon">
|
|
<use xlink:href="sprite.svg#comments"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>comments</h2>
|
|
</li>
|
|
<li title="email">
|
|
<div class="icon-box">
|
|
|
|
<!-- email -->
|
|
<svg class="svg-email-icon">
|
|
<use xlink:href="sprite.svg#email"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>email</h2>
|
|
</li>
|
|
<li title="envelope">
|
|
<div class="icon-box">
|
|
|
|
<!-- envelope -->
|
|
<svg class="svg-envelope-icon">
|
|
<use xlink:href="sprite.svg#envelope"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>envelope</h2>
|
|
</li>
|
|
<li title="euro">
|
|
<div class="icon-box">
|
|
|
|
<!-- euro -->
|
|
<svg class="svg-euro-icon">
|
|
<use xlink:href="sprite.svg#euro"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>euro</h2>
|
|
</li>
|
|
<li title="eye">
|
|
<div class="icon-box">
|
|
|
|
<!-- eye -->
|
|
<svg class="svg-eye-icon">
|
|
<use xlink:href="sprite.svg#eye"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>eye</h2>
|
|
</li>
|
|
<li title="eye-2">
|
|
<div class="icon-box">
|
|
|
|
<!-- eye-2 -->
|
|
<svg class="svg-eye-2-icon">
|
|
<use xlink:href="sprite.svg#eye-2"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>eye-2</h2>
|
|
</li>
|
|
<li title="files">
|
|
<div class="icon-box">
|
|
|
|
<!-- files -->
|
|
<svg class="svg-files-icon">
|
|
<use xlink:href="sprite.svg#files"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>files</h2>
|
|
</li>
|
|
<li title="inbox">
|
|
<div class="icon-box">
|
|
|
|
<!-- inbox -->
|
|
<svg class="svg-inbox-icon">
|
|
<use xlink:href="sprite.svg#inbox"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>inbox</h2>
|
|
</li>
|
|
<li title="isvg-chat">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-chat -->
|
|
<svg class="svg-isvg-chat-icon">
|
|
<use xlink:href="sprite.svg#isvg-chat"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-chat</h2>
|
|
</li>
|
|
<li title="isvg-file-ai">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-file-ai -->
|
|
<svg class="svg-isvg-file-ai-icon">
|
|
<use xlink:href="sprite.svg#isvg-file-ai"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-file-ai</h2>
|
|
</li>
|
|
<li title="isvg-money">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-money -->
|
|
<svg class="svg-isvg-money-icon">
|
|
<use xlink:href="sprite.svg#isvg-money"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-money</h2>
|
|
</li>
|
|
<li title="isvg-package">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-package -->
|
|
<svg class="svg-isvg-package-icon">
|
|
<use xlink:href="sprite.svg#isvg-package"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-package</h2>
|
|
</li>
|
|
<li title="isvg-pin">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-pin -->
|
|
<svg class="svg-isvg-pin-icon">
|
|
<use xlink:href="sprite.svg#isvg-pin"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-pin</h2>
|
|
</li>
|
|
<li title="isvg-usd">
|
|
<div class="icon-box">
|
|
|
|
<!-- isvg-usd -->
|
|
<svg class="svg-isvg-usd-icon">
|
|
<use xlink:href="sprite.svg#isvg-usd"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>isvg-usd</h2>
|
|
</li>
|
|
<li title="link">
|
|
<div class="icon-box">
|
|
|
|
<!-- link -->
|
|
<svg class="svg-link-icon">
|
|
<use xlink:href="sprite.svg#link"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>link</h2>
|
|
</li>
|
|
<li title="list">
|
|
<div class="icon-box">
|
|
|
|
<!-- list -->
|
|
<svg class="svg-list-icon">
|
|
<use xlink:href="sprite.svg#list"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>list</h2>
|
|
</li>
|
|
<li title="logout">
|
|
<div class="icon-box">
|
|
|
|
<!-- logout -->
|
|
<svg class="svg-logout-icon">
|
|
<use xlink:href="sprite.svg#logout"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>logout</h2>
|
|
</li>
|
|
<li title="media">
|
|
<div class="icon-box">
|
|
|
|
<!-- media -->
|
|
<svg class="svg-media-icon">
|
|
<use xlink:href="sprite.svg#media"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>media</h2>
|
|
</li>
|
|
<li title="monster">
|
|
<div class="icon-box">
|
|
|
|
<!-- monster -->
|
|
<svg class="svg-monster-icon">
|
|
<use xlink:href="sprite.svg#monster"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>monster</h2>
|
|
</li>
|
|
<li title="phone-call">
|
|
<div class="icon-box">
|
|
|
|
<!-- phone-call -->
|
|
<svg class="svg-phone-call-icon">
|
|
<use xlink:href="sprite.svg#phone-call"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>phone-call</h2>
|
|
</li>
|
|
<li title="pin">
|
|
<div class="icon-box">
|
|
|
|
<!-- pin -->
|
|
<svg class="svg-pin-icon">
|
|
<use xlink:href="sprite.svg#pin"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>pin</h2>
|
|
</li>
|
|
<li title="plus">
|
|
<div class="icon-box">
|
|
|
|
<!-- plus -->
|
|
<svg class="svg-plus-icon">
|
|
<use xlink:href="sprite.svg#plus"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>plus</h2>
|
|
</li>
|
|
<li title="post-editor-btn-camera">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-camera -->
|
|
<svg class="svg-post-editor-btn-camera-icon">
|
|
<use xlink:href="sprite.svg#post-editor-btn-camera"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-camera</h2>
|
|
</li>
|
|
<li title="post-editor-btn-code">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-code -->
|
|
<svg class="svg-post-editor-btn-code-icon">
|
|
<use xlink:href="sprite.svg#post-editor-btn-code"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-code</h2>
|
|
</li>
|
|
<li title="post-editor-btn-media">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-media -->
|
|
<svg class="svg-post-editor-btn-media-icon">
|
|
<use xlink:href="sprite.svg#post-editor-btn-media"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-media</h2>
|
|
</li>
|
|
<li title="post-editor-btn-stock">
|
|
<div class="icon-box">
|
|
|
|
<!-- post-editor-btn-stock -->
|
|
<svg class="svg-post-editor-btn-stock-icon">
|
|
<use xlink:href="sprite.svg#post-editor-btn-stock"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>post-editor-btn-stock</h2>
|
|
</li>
|
|
<li title="refresh">
|
|
<div class="icon-box">
|
|
|
|
<!-- refresh -->
|
|
<svg class="svg-refresh-icon">
|
|
<use xlink:href="sprite.svg#refresh"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>refresh</h2>
|
|
</li>
|
|
<li title="search">
|
|
<div class="icon-box">
|
|
|
|
<!-- search -->
|
|
<svg class="svg-search-icon">
|
|
<use xlink:href="sprite.svg#search"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>search</h2>
|
|
</li>
|
|
<li title="search-gray">
|
|
<div class="icon-box">
|
|
|
|
<!-- search-gray -->
|
|
<svg class="svg-search-gray-icon">
|
|
<use xlink:href="sprite.svg#search-gray"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>search-gray</h2>
|
|
</li>
|
|
<li title="send">
|
|
<div class="icon-box">
|
|
|
|
<!-- send -->
|
|
<svg class="svg-send-icon">
|
|
<use xlink:href="sprite.svg#send"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>send</h2>
|
|
</li>
|
|
<li title="smile">
|
|
<div class="icon-box">
|
|
|
|
<!-- smile -->
|
|
<svg class="svg-smile-icon">
|
|
<use xlink:href="sprite.svg#smile"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>smile</h2>
|
|
</li>
|
|
<li title="sun">
|
|
<div class="icon-box">
|
|
|
|
<!-- sun -->
|
|
<svg class="svg-sun-icon">
|
|
<use xlink:href="sprite.svg#sun"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>sun</h2>
|
|
</li>
|
|
<li title="user">
|
|
<div class="icon-box">
|
|
|
|
<!-- user -->
|
|
<svg class="svg-user-icon">
|
|
<use xlink:href="sprite.svg#user"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user</h2>
|
|
</li>
|
|
<li title="user-add">
|
|
<div class="icon-box">
|
|
|
|
<!-- user-add -->
|
|
<svg class="svg-user-add-icon">
|
|
<use xlink:href="sprite.svg#user-add"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user-add</h2>
|
|
</li>
|
|
<li title="user-heart">
|
|
<div class="icon-box">
|
|
|
|
<!-- user-heart -->
|
|
<svg class="svg-user-heart-icon">
|
|
<use xlink:href="sprite.svg#user-heart"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user-heart</h2>
|
|
</li>
|
|
<li title="user-sm">
|
|
<div class="icon-box">
|
|
|
|
<!-- user-sm -->
|
|
<svg class="svg-user-sm-icon">
|
|
<use xlink:href="sprite.svg#user-sm"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>user-sm</h2>
|
|
</li>
|
|
<li title="video-play">
|
|
<div class="icon-box">
|
|
|
|
<!-- video-play -->
|
|
<svg class="svg-video-play-icon">
|
|
<use xlink:href="sprite.svg#video-play"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>video-play</h2>
|
|
</li>
|
|
<li title="views">
|
|
<div class="icon-box">
|
|
|
|
<!-- views -->
|
|
<svg class="svg-views-icon">
|
|
<use xlink:href="sprite.svg#views"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>views</h2>
|
|
</li>
|
|
<li title="weather-1">
|
|
<div class="icon-box">
|
|
|
|
<!-- weather-1 -->
|
|
<svg class="svg-weather-1-icon">
|
|
<use xlink:href="sprite.svg#weather-1"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>weather-1</h2>
|
|
</li>
|
|
<li title="weather-2">
|
|
<div class="icon-box">
|
|
|
|
<!-- weather-2 -->
|
|
<svg class="svg-weather-2-icon">
|
|
<use xlink:href="sprite.svg#weather-2"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>weather-2</h2>
|
|
</li>
|
|
<li title="weather-3">
|
|
<div class="icon-box">
|
|
|
|
<!-- weather-3 -->
|
|
<svg class="svg-weather-3-icon">
|
|
<use xlink:href="sprite.svg#weather-3"></use>
|
|
</svg>
|
|
|
|
</div>
|
|
<h2>weather-3</h2>
|
|
</li>
|
|
</ul>
|
|
|
|
<!--
|
|
====================================================================================================
|
|
-->
|
|
|
|
</section>
|
|
<footer>
|
|
<p>Generated at Mon, 06 Mar 2017 06:01:07 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|