<!--
title: SVG Images
layout: _script-layout
-->

{{ 'id' |> importRequestParams }}

<style>
body {
    background: #eceff1;
}
code {
    color: #222;
}
.cssfile {
    width: 100%;
}
.cssfile .svg {
    display: inline-block;
    margin: 0 4px;
}
.cssfile .svg code, .cssfile .svg b {
    display: block;
    text-align: center;
}
.cssfile .svg code {
    border-radius: 6px;
    background: #cfd8dc;
}
.svg-icon {
    text-align: center;
    width: 150px;
    height: 150px;
}
.svg-icon img {
    height: 150px;
    max-width: 150px;
    max-height: 150px;
}
.svg-preview {
    text-align: center;
    vertical-align: middle;
    width: 250px;
    height: 220px;
}
.svg-preview img {
    max-width: 250px;
    height: 220px;
}

td, th {
    vertical-align: top;
}
table.usage {
    width: 100%;
}
table.ref-css th, table.single-css th {
    padding-right: 20px;
}

.tiptext {
    width: 250px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    margin: 0 0 20px 30px;
    display: inline-block;
    
    z-index: 1;
    opacity: .4;
    transition: opacity 0.3s;
}
button {
    user-select: auto !important;
}
.sel {
    cursor: pointer;
}
.svg a {
    display: block;
    border-radius: 6px;
}
.svg .active {
    background: #ffc907;
}
.usage td {
    width: 32%;
}
.usage td.buttons {
    width: 36%;
}
.btn-social, .btn-social-icon {
    border-color: #ffc907;
}
.btn i span, .svg-icons i span {
    opacity: 0;
}
.svg-icons i {
    vertical-align: bottom;
}
.usage code {
    display: block;
    font-size: 75%;
    white-space: pre-wrap;
}
.btn-buttons, .btn-icons {
    display: inline-block;
}
.btn-datauri {
    padding-left: 10px;
    max-height: 24px;
}
.btn-datauri small {
    padding-left: 10px;
    max-width: 100px;
    max-height: 24px;
}
.copy-datauri {
    position: absolute;
    margin-top: 3px;
    width: 85px;
    height: 24px;
    max-width: 85px;
    max-height: 24px;
    overflow: hidden;
    border-color: #ffc907;
}
.copy-datauri:hover {
}
.copy-datauri span {
    opacity: 0;
}
.single-css i {
    color: #666;
    padding: 0 .25em;
}
</style>

{{ 'buttons' |> cssIncludes }}

<a id="lnk-back" href="./">&lt;back</a>

<div class="container">
    <div class="row">
{{#each svgCssFiles}}
<div class="cssfile">
    
    <h3 class="my-4"><a href="{{ `/css/${it.Key}.css`.resolveUrl() }}" target="_blank">/css/{{it.Key}}.css</a></h3>
    
    {{ it.Key |> cssIncludes }}
    
    {{#each name in it.Value}}
    <div class="my-1 svg">
        <b>{{name}}</b>
        <a {{ {active:name == id} |> htmlClass }} href="?id={{name}}">
            <div class="svg-icon">
                <img src="{{ `${name}`.svgDataUri() }}">
            </div>
        </a>
        <code class="sel mt-1">.svg-{{name}}</code>
    </div>
    {{/each}}
    
{{#if it.Value.Count > 0}}
    
    {{ var name = (id && it.Value.contains(id) ? id : it.Value[0]) }}
    
    {{ var sizes = ['lg','md','sm','xs'] }}
    
    <table class="usage my-4">
        <tr>
            <td class="buttons">
                <div>
                    <h4>Buttons</h4>
<code class="sel">&lt;button class="btn btn-block btn-social btn-{{name}}"&gt;
  &lt;i class="fab fa-{{name}}"&gt;&lt;/i&gt;
&lt;/button&gt;</code>
                    <div class="btn-buttons mt-2">
                        {{#each size in sizes}}
                        <button class="sel btn btn-block btn-social btn-{{name}} btn-{{size}}">
                            <i class="fab fa-{{name}}"></i> btn-{{size}}
                        </button>
                        {{/each}}
                    </div>
                </div>
                <div class="mt-4">
                    <h4>Button Icons</h4>
<code class="sel">&lt;button class="btn btn-social-icon btn-{{name}}"&gt;
  &lt;i class="fab fa-{{name}}"&gt;&lt;/i&gt;
&lt;/button&gt;</code>
                    <div class="btn-icons mt-2">
                        {{#each size in sizes}}
                        <button class="btn btn-social-icon btn-{{name}} btn-{{size}}">
                            <i class="sel fab fa-{{name}}" title="btn-{{size}}"><span>btn-{{size}}</span></i>
                        </button>
                        {{/each}}
                    </div>
                </div>
                <div class="mt-4">
                    <h4>Image Sizes</h4>
<code class="sel">&lt;i class="svg-{{name}} svg-{size}"&gt;&lt;/i&gt;</code>
                    <div class="svg-icons mt-2">
                        {{#each size in ['5x','4x','3x','2x','lg','md','sm','xs'].reverse()}}
                        <i class="sel svg-{{size}} svg-{{name}}" title="svg-{{size}}"><span>svg-{{size}}</span></i>
                        {{/each}}
                    </div>
                    <div class="mt-2">
                        <b>Sizes:</b> xs sm md lg 2x 3x 4x 5x ... 14x
                    </div>
                </div>
            </td>
            <td class="script">
                <h4>#Script</h4>
                <div>
                    <div class="sel"><code>&lt;img src="{{#raw}}{{{{/raw}}{{`'${name}'`}}.svgDataUri(){{#raw}}}}{{/raw}}"&gt;</code></div>
                    <div class="mt-1">
                        <div class="svg-preview">
                            <img src="{{ `${name}`.svgDataUri() }}">
                        </div>
                    </div>
                </div>
                <div class="my-2">
                    <div class="sel"><code>&lt;img src="{{#raw}}{{{{/raw}}{{`'${name}'`}}.svgDataUri('#e33'){{#raw}}}}{{/raw}}"&gt;</code></div>
                    <div class="mt-1">
                        <div class="svg-preview">
                            <img src="{{ `${name}`.svgDataUri('#e33') }}">
                        </div>
                    </div>
                </div>
                <div class="sel"><code>{{#raw}} {{ {{/raw}} {{ `'${name}'` }}.svgImage('#e33') {{#raw}} }} {{/raw}} </code></div>
                <div class="sel"><code>{{#raw}} {{ {{/raw}} {{ `'${name}'` }}.svgImage() {{#raw}} }} {{/raw}} </code></div>
<div class="sel mt-2">
<code style="white-space: pre-wrap">.svg-bg {
  {{#raw}}{{{{/raw}}{{`'${name}'`}}.svgBackgroundImageCss(){{#raw}}}}{{/raw}} 
}
</code></div>
            </td>
            <td class="razor">
                <h4>Razor</h4>
                
                <div class="sel"><code>&lt;img src="@Html.SvgDataUri("{{ `${name}` }}")"&gt;</code></div>
                <div class="sel"><code>&lt;img src="@Html.SvgDataUri("{{ `${name}` }}","#e33")"&gt;</code></div>

                <div class="sel mt-2"><code>@Html.SvgImage("{{ `${name}` }}")</code></div>
                <div class="sel"><code>@Html.SvgImage("{{ `${name}` }}", "#e33")</code></div>

                <div class="sel mt-2">
<code>.svg-bg-example {
  width: 150px;
  height: 150px;
  background-size: 142px 142px;
  background-position: 4px 4px;
  background-repeat: no-repeat;
  @Html.SvgBackgroundImageCss("female")
}
</code>
                </div>
            </td>
        </tr>
    </table>

    <span class="tiptext">Click to copy to clipboard</span>
    

    <div class="row">
        <div class="col-6">
            <h4 class="mt-2">Reference all svg images using .css</h4>
            <table class="ref-css">
                <tr>
                    <th>Link stylesheet</th>
                    <td class="sel">
                        &lt;link rel="stylesheet" href="/css/buttons.css"&gt;<br>
                        &lt;link rel="stylesheet" href="/css/{{it.Key}}.css"&gt;
                    </td>
                </tr>
                <tr>
                    <th>#Script inline style</th>
                    <td class="sel">
                        {{#raw}} {{ {{/raw}} 'buttons,{{it.Key}}' |> cssIncludes{{#raw}} }} {{/raw}}
                    </td>
                </tr>
                <tr>
                    <th>Razor inline style</th>
                    <td class="sel">
                        @Html.CssIncludes("buttons","{{it.Key}}")
                    </td>
                </tr>
            </table>
        </div>
    
        <div class="col-6">
            <h4 class="mt-2">Individual SVG Links</h4>
            <table class="single-css">
                <tr>
                    <th>Image</th>
                    <td>
                        <a href="{{svgBaseUrl}}/{{name}}.svg" target="_blank">{{name}}.svg</a> 
                        <i></i> <a href="{{svgBaseUrl}}/{{name}}.svg?fill=%23e33" target="_blank">{{name}}.svg?fill=#e33</a>
                    </td>
                </tr>
                <tr>
                    <th>CSS</th>
                    <td>
                        <a href="{{svgBaseUrl}}/{{name}}.css" target="_blank">{{name}}.css</a>
                        <i></i> <a href="{{svgBaseUrl}}/{{name}}.css?fill=%23e33" target="_blank">{{name}}.css?fill=#e33</a>
                    </td>
                </tr>
                <tr>
                    <th>Data URI</th>
                    <td>
                        <a href="{{svgBaseUrl}}/{{name}}.datauri" target="_blank">{{name}}.datauri</a>
                        <span class="btn-datauri">
                            <button class="sel btn copy-datauri">
                                <span>{{name.svgDataUri()}}</span>
                            </button>
                            <small>copy for url</small>
                        </span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
{{/if}}

</div>
        
{{/each}}


<script>
let active = document.querySelector('.active');
if (active) {
    active.scrollIntoView();
}

let timeout;
document.querySelectorAll('.sel').forEach(function(sel) {
    sel.onclick = function(e) {
        let el = e.target;
        if (window.getSelection) {
            let selection = window.getSelection();
            let range = document.createRange();
            range.selectNodeContents(el);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand("copy");

            let tooltip;
            while (!tooltip|| !el) {
                tooltip = el.querySelector('.tiptext');
                el = el.parentElement; 
            }
            tooltip.innerHTML = 'Copied!';
            tooltip.style.opacity = 1;
            tooltip.style.visibility = 'visible';
            
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            } 
            
            timeout = setTimeout(function () {
                window.getSelection().removeAllRanges();
                tooltip.style.opacity = .4;
                tooltip.innerHTML = 'Click to copy to clipboard';
            }, 2000);
        }
    };
    
});
</script>

    </div>
    
    <div class="row">
        <div class="col my-5">
            <h3>Find out more</h3>

            See the <a href="https://docs.servicestack.net/svg">SVG documentation</a> to find out how to register
            your own SVG images and see more usage examples.
        </div>
    </div>
    
</div>

