s&box

Generate SVGs dynamically within your razor!

SVG data can be generated dynamically through code, then passed as a string to the SvgGenerator to generate at runtime. The code is based heavily on the already existing Sandbox.SvgPanel.

Example use:

@using Sandbox;
@using Sandbox.UI;
@using JBG.UI;
@using Sandbox.UI.Navigation
@inherits PanelComponent

<div class="root">
    <SvgGenerator SvgAsString=@SvgString [email protected] class="icon" />
</div>

<style>
    .root {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .icon {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 250px;
        height: 250px;
        transform: translate(-50%, -50%);
    }
</style>

@code
{
    public string SvgString = @"<svg xmlns=""http://www.w3.org/2000/svg"">
                              <path d = ""M12 0C5.39 0 .004 5.388.004 12S5.39 24 12 24s11.996-5.388 11.996-12S18.627 0 12 0zm0 21.314c-5.131 
                              0-9.294-4.164-9.294-9.297C2.706 6.884 6.869 2.72 12 2.72s9.294 4.164 9.294 9.297c0 5.133-4.163 9.297-9.294 
                              9.297zm-.561-10.725-1.92-1.904-1.41 1.411L6.75 8.719l-1.92 1.904L6.206 12l-1.444 1.445 1.92 1.921 1.427-1.445L9.587 
                              15.4l1.92-1.921L10.029 12l1.41-1.411zm7.748-.051-1.41 1.411 1.478 1.479-1.92 1.904-1.478-1.479-1.444 1.445-1.903-1.921 
                              1.444-1.428-1.376-1.377 1.903-1.921 1.376 1.377 1.41-1.411 1.92 1.921z""/></svg >";
    
    protected override int BuildHash() => System.HashCode.Combine(SvgString);
}

Package

Tags