Svg

{{ 'id' |> importRequestParams }} {{ 'buttons' |> cssIncludes }} <back

{{#each svgCssFiles}}

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

{{ it.Key |> cssIncludes }} {{#each name in it.Value}} {{name}} htmlClass }} href="?id={{name}}"> .svg-{{name}} {{/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

``

``

{{#raw}} {{ {{/raw}} {{ '${name}'}}.svgImage('#e33') {{#raw}} }} {{/raw}}

{{#raw}} {{ {{/raw}} {{ '${name}'}}.svgImage() {{#raw}} }} {{/raw}}

.svg-bg { {{#raw}}{{{{/raw}}{{'${name}'}}.svgBackgroundImageCss(){{#raw}}}}{{/raw}} } |

Razor

``

``

@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

Reference all svg images using .css

| Link stylesheet | <link rel="stylesheet" href="/css/buttons.css">
<link rel="stylesheet" href="/css/{{it.Key}}.css"> | | #Script inline style | {{#raw}} {{ {{/raw}} 'buttons,{{it.Key}}' |> cssIncludes{{#raw}} }} {{/raw}} | | Razor inline style | @Html.CssIncludes("buttons","{{it.Key}}") |

Individual SVG Links

| Image | {{name}}.svg {{name}}.svg?fill=#e33 | | CSS | {{name}}.css {{name}}.css?fill=#e33 | | Data URI | {{name}}.datauri {{name.svgDataUri()}} copy for url |

{{/if}} {{/each}}

Find out more

See the SVG documentation to find out how to register your own SVG images and see more usage examples.