/css/{{it.Key}}.css

{{ it.Key |> cssIncludes }} {{#each name in it.Value}} {{/each}} {{#if it.Value.Count > 0}} {{ var name = (id && it.Value.contains(id) ? id : it.Value[0]) }} {{ var sizes = ['lg','md','sm','xs'] }}

Buttons <button class="btn btn-block btn-social btn-{{name}}"> <i class="fab fa-{{name}}"></i> </button> {{#each size in sizes}} btn-{{size}} {{/each}} Button Icons <button class="btn btn-social-icon btn-{{name}}"> <i class="fab fa-{{name}}"></i> </button> {{#each size in sizes}} btn-{{size}} {{/each}} Image Sizes <i class="svg-{{name}} svg-{size}"></i> {{#each size in ['5x','4x','3x','2x','lg','md','sm','xs'].reverse()}} svg-{{size}} {{/each}} Sizes: xs sm md lg 2x 3x 4x 5x ... 14x

#Script <img src="{{#raw}}{{{{/raw}}{{`'${name}'`}}.svgDataUri(){{#raw}}}}{{/raw}}"> <img src="{{#raw}}{{{{/raw}}{{`'${name}'`}}.svgDataUri('#e33'){{#raw}}}}{{/raw}}"> {{#raw}} {{ {{/raw}} {{ `'${name}'` }}.svgImage('#e33') {{#raw}} }} {{/raw}} {{#raw}} {{ {{/raw}} {{ `'${name}'` }}.svgImage() {{#raw}} }} {{/raw}} .svg-bg { {{#raw}}{{{{/raw}}{{`'${name}'`}}.svgBackgroundImageCss(){{#raw}}}}{{/raw}} }

Razor <img src="@Html.SvgDataUri("{{ `${name}` }}")"> <img src="@Html.SvgDataUri("{{ `${name}` }}","#e33")"> @Html.SvgImage("{{ `${name}` }}") @Html.SvgImage("{{ `${name}` }}", "#e33") .svg-bg-example { width: 150px; height: 150px; background-size: 142px 142px; background-position: 4px 4px; background-repeat: no-repeat; @Html.SvgBackgroundImageCss("female") }

Click to copy to clipboard {{/if}}