Partystreusel

All Icons 

<!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 &lt;symbol&gt; 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-icon--arrow-left-dims {
            width: 24px;
            height: 24px;
        }

        .svg-icon--arrow-right-dims {
            width: 24px;
            height: 24px;
        }

        .svg-icon--close-dims {
            width: 24px;
            height: 24px;
        }

        .svg-icon--download-dims {
            width: 24px;
            height: 24px;
        }

        .svg-icon--folder-dims {
            width: 24px;
            height: 24px;
        }

        .svg-icon--menu-dims {
            width: 30px;
            height: 30px;
        }

        .svg-icon--search-dims {
            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 24 24" id="icon--arrow-left" xmlns="http://www.w3.org/2000/svg">
            <path d="M20 11H7.8l5.6-5.6h-2.8L4 12l6.6 6.6h2.8L7.8 13H20v-2z" />
        </symbol>
        <symbol viewBox="0 0 24 24" id="icon--arrow-right" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 13h12.2l-5.6 5.6h2.8L20 12l-6.6-6.6h-2.8l5.6 5.6H4v2z" />
        </symbol>
        <symbol viewBox="0 0 24 24" id="icon--close" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z" />
        </symbol>
        <symbol viewBox="0 0 24 24" id="icon--download" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 5h-9.6L9.7 3.3C9.5 3.1 9.3 3 9 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 13l-5-5h3V9h4v4h3l-5 5z" />
        </symbol>
        <symbol viewBox="0 0 24 24" id="icon--folder" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.4 4.1h-6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-10c0-1.1-.9-2-2-2h-8l-2-2z" />
        </symbol>
        <symbol viewBox="0 0 30 30" id="icon--menu" xmlns="http://www.w3.org/2000/svg">
            <path d="M6 8h18v2H6zm0 6h18v2H6zm0 6h18v2H6z" />
        </symbol>
        <symbol viewBox="0 0 24 24" id="icon--search" xmlns="http://www.w3.org/2000/svg">
            <path d="M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z" />
        </symbol>
    </svg>

    <!--
====================================================================================================
-->

    <header>
        <h1>SVG <code>&lt;symbol&gt;</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="icon--arrow-left">
                <div class="icon-box">

                    <!-- icon--arrow-left -->
                    <svg class="icon svg-icon--arrow-left-dims">
                        <use xlink:href="#icon--arrow-left"></use>
                    </svg>

                </div>
                <h2>icon--arrow-left</h2>
            </li>
            <li title="icon--arrow-right">
                <div class="icon-box">

                    <!-- icon--arrow-right -->
                    <svg class="icon svg-icon--arrow-right-dims">
                        <use xlink:href="#icon--arrow-right"></use>
                    </svg>

                </div>
                <h2>icon--arrow-right</h2>
            </li>
            <li title="icon--close">
                <div class="icon-box">

                    <!-- icon--close -->
                    <svg class="icon svg-icon--close-dims">
                        <use xlink:href="#icon--close"></use>
                    </svg>

                </div>
                <h2>icon--close</h2>
            </li>
            <li title="icon--download">
                <div class="icon-box">

                    <!-- icon--download -->
                    <svg class="icon svg-icon--download-dims">
                        <use xlink:href="#icon--download"></use>
                    </svg>

                </div>
                <h2>icon--download</h2>
            </li>
            <li title="icon--folder">
                <div class="icon-box">

                    <!-- icon--folder -->
                    <svg class="icon svg-icon--folder-dims">
                        <use xlink:href="#icon--folder"></use>
                    </svg>

                </div>
                <h2>icon--folder</h2>
            </li>
            <li title="icon--menu">
                <div class="icon-box">

                    <!-- icon--menu -->
                    <svg class="icon svg-icon--menu-dims">
                        <use xlink:href="#icon--menu"></use>
                    </svg>

                </div>
                <h2>icon--menu</h2>
            </li>
            <li title="icon--search">
                <div class="icon-box">

                    <!-- icon--search -->
                    <svg class="icon svg-icon--search-dims">
                        <use xlink:href="#icon--search"></use>
                    </svg>

                </div>
                <h2>icon--search</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="icon--arrow-left">
                <div class="icon-box">

                    <!-- icon--arrow-left -->
                    <svg class="icon svg-icon--arrow-left-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--arrow-left"></use>
                    </svg>

                </div>
                <h2>icon--arrow-left</h2>
            </li>
            <li title="icon--arrow-right">
                <div class="icon-box">

                    <!-- icon--arrow-right -->
                    <svg class="icon svg-icon--arrow-right-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--arrow-right"></use>
                    </svg>

                </div>
                <h2>icon--arrow-right</h2>
            </li>
            <li title="icon--close">
                <div class="icon-box">

                    <!-- icon--close -->
                    <svg class="icon svg-icon--close-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--close"></use>
                    </svg>

                </div>
                <h2>icon--close</h2>
            </li>
            <li title="icon--download">
                <div class="icon-box">

                    <!-- icon--download -->
                    <svg class="icon svg-icon--download-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--download"></use>
                    </svg>

                </div>
                <h2>icon--download</h2>
            </li>
            <li title="icon--folder">
                <div class="icon-box">

                    <!-- icon--folder -->
                    <svg class="icon svg-icon--folder-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--folder"></use>
                    </svg>

                </div>
                <h2>icon--folder</h2>
            </li>
            <li title="icon--menu">
                <div class="icon-box">

                    <!-- icon--menu -->
                    <svg class="icon svg-icon--menu-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--menu"></use>
                    </svg>

                </div>
                <h2>icon--menu</h2>
            </li>
            <li title="icon--search">
                <div class="icon-box">

                    <!-- icon--search -->
                    <svg class="icon svg-icon--search-dims">
                        <use xlink:href="../../../public/images/icon-sprite.svg#icon--search"></use>
                    </svg>

                </div>
                <h2>icon--search</h2>
            </li>
        </ul>

        <!--
====================================================================================================
-->

    </section>
</body>

</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 &lt;symbol&gt; 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-icon--arrow-left-dims { width: 24px; height: 24px; }
	.svg-icon--arrow-right-dims { width: 24px; height: 24px; }
	.svg-icon--close-dims { width: 24px; height: 24px; }
	.svg-icon--download-dims { width: 24px; height: 24px; }
	.svg-icon--folder-dims { width: 24px; height: 24px; }
	.svg-icon--menu-dims { width: 30px; height: 30px; }
	.svg-icon--search-dims { 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 24 24" id="icon--arrow-left" xmlns="http://www.w3.org/2000/svg"><path d="M20 11H7.8l5.6-5.6h-2.8L4 12l6.6 6.6h2.8L7.8 13H20v-2z"/></symbol>
		<symbol viewBox="0 0 24 24" id="icon--arrow-right" xmlns="http://www.w3.org/2000/svg"><path d="M4 13h12.2l-5.6 5.6h2.8L20 12l-6.6-6.6h-2.8l5.6 5.6H4v2z"/></symbol>
		<symbol viewBox="0 0 24 24" id="icon--close" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4l5.6 5.6L5 17.6 6.4 19l5.6-5.6 5.6 5.6 1.4-1.4-5.6-5.6z"/></symbol>
		<symbol viewBox="0 0 24 24" id="icon--download" xmlns="http://www.w3.org/2000/svg"><path d="M21 5h-9.6L9.7 3.3C9.5 3.1 9.3 3 9 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 13l-5-5h3V9h4v4h3l-5 5z"/></symbol>
		<symbol viewBox="0 0 24 24" id="icon--folder" xmlns="http://www.w3.org/2000/svg"><path d="M10.4 4.1h-6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-10c0-1.1-.9-2-2-2h-8l-2-2z"/></symbol>
		<symbol viewBox="0 0 30 30" id="icon--menu" xmlns="http://www.w3.org/2000/svg"><path d="M6 8h18v2H6zm0 6h18v2H6zm0 6h18v2H6z"/></symbol>
		<symbol viewBox="0 0 24 24" id="icon--search" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 14h-.8l-.3-.3c1-1.1 1.6-2.6 1.6-4.2C16 5.9 13.1 3 9.5 3S3 5.9 3 9.5 5.9 16 9.5 16c1.6 0 3.1-.6 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14z"/></symbol>
</svg>

<!--
====================================================================================================
-->

    <header>
      <h1>SVG <code>&lt;symbol&gt;</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="icon--arrow-left">
          <div class="icon-box">

            <!-- icon--arrow-left -->
            <svg class="icon svg-icon--arrow-left-dims">
              <use xlink:href="#icon--arrow-left"></use>
            </svg>

          </div>
          <h2>icon--arrow-left</h2>
        </li>
				<li title="icon--arrow-right">
          <div class="icon-box">

            <!-- icon--arrow-right -->
            <svg class="icon svg-icon--arrow-right-dims">
              <use xlink:href="#icon--arrow-right"></use>
            </svg>

          </div>
          <h2>icon--arrow-right</h2>
        </li>
				<li title="icon--close">
          <div class="icon-box">

            <!-- icon--close -->
            <svg class="icon svg-icon--close-dims">
              <use xlink:href="#icon--close"></use>
            </svg>

          </div>
          <h2>icon--close</h2>
        </li>
				<li title="icon--download">
          <div class="icon-box">

            <!-- icon--download -->
            <svg class="icon svg-icon--download-dims">
              <use xlink:href="#icon--download"></use>
            </svg>

          </div>
          <h2>icon--download</h2>
        </li>
				<li title="icon--folder">
          <div class="icon-box">

            <!-- icon--folder -->
            <svg class="icon svg-icon--folder-dims">
              <use xlink:href="#icon--folder"></use>
            </svg>

          </div>
          <h2>icon--folder</h2>
        </li>
				<li title="icon--menu">
          <div class="icon-box">

            <!-- icon--menu -->
            <svg class="icon svg-icon--menu-dims">
              <use xlink:href="#icon--menu"></use>
            </svg>

          </div>
          <h2>icon--menu</h2>
        </li>
				<li title="icon--search">
          <div class="icon-box">

            <!-- icon--search -->
            <svg class="icon svg-icon--search-dims">
              <use xlink:href="#icon--search"></use>
            </svg>

          </div>
          <h2>icon--search</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="icon--arrow-left">
          <div class="icon-box">

            <!-- icon--arrow-left -->
            <svg class="icon svg-icon--arrow-left-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--arrow-left"></use>
            </svg>

          </div>
          <h2>icon--arrow-left</h2>
        </li>
				<li title="icon--arrow-right">
          <div class="icon-box">

            <!-- icon--arrow-right -->
            <svg class="icon svg-icon--arrow-right-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--arrow-right"></use>
            </svg>

          </div>
          <h2>icon--arrow-right</h2>
        </li>
				<li title="icon--close">
          <div class="icon-box">

            <!-- icon--close -->
            <svg class="icon svg-icon--close-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--close"></use>
            </svg>

          </div>
          <h2>icon--close</h2>
        </li>
				<li title="icon--download">
          <div class="icon-box">

            <!-- icon--download -->
            <svg class="icon svg-icon--download-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--download"></use>
            </svg>

          </div>
          <h2>icon--download</h2>
        </li>
				<li title="icon--folder">
          <div class="icon-box">

            <!-- icon--folder -->
            <svg class="icon svg-icon--folder-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--folder"></use>
            </svg>

          </div>
          <h2>icon--folder</h2>
        </li>
				<li title="icon--menu">
          <div class="icon-box">

            <!-- icon--menu -->
            <svg class="icon svg-icon--menu-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--menu"></use>
            </svg>

          </div>
          <h2>icon--menu</h2>
        </li>
				<li title="icon--search">
          <div class="icon-box">

            <!-- icon--search -->
            <svg class="icon svg-icon--search-dims">
              <use xlink:href="../../../public/images/icon-sprite.svg#icon--search"></use>
            </svg>

          </div>
          <h2>icon--search</h2>
        </li>
			</ul>

<!--
====================================================================================================
-->

    </section>
  </body>
</html>
 
/* No context defined for this component. */

There are no notes for this item.