SVG Images

<back

/css/svg-auth.css

servicestack
.svg-servicestack
twitter
.svg-twitter
github
.svg-github
google
.svg-google
facebook
.svg-facebook
microsoft
.svg-microsoft
linkedin
.svg-linkedin

Buttons

<button class="btn btn-block btn-social btn-facebook"> <i class="fab fa-facebook"></i> </button>

Button Icons

<button class="btn btn-social-icon btn-facebook"> <i class="fab fa-facebook"></i> </button>

Image Sizes

<i class="svg-facebook svg-{size}"></i>
svg-xs svg-sm svg-md svg-lg svg-2x svg-3x svg-4x svg-5x
Sizes: xs sm md lg 2x 3x 4x 5x ... 14x

#Script

<img src="{{'facebook'.svgDataUri()}}">
<img src="{{'facebook'.svgDataUri('#e33')}}">
{{ 'facebook'.svgImage('#e33') }}
{{ 'facebook'.svgImage() }}
.svg-bg { {{'facebook'.svgBackgroundImageCss()}} }

Razor

<img src="@Html.SvgDataUri("facebook")">
<img src="@Html.SvgDataUri("facebook","#e33")">
@Html.SvgImage("facebook")
@Html.SvgImage("facebook", "#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/svg-auth.css">
#Script inline style {{ 'buttons,svg-auth' |> cssIncludes }}
Razor inline style @Html.CssIncludes("buttons","svg-auth")

Individual SVG Links

Image facebook.svg facebook.svg?fill=#e33
CSS facebook.css facebook.css?fill=#e33
Data URI facebook.datauri copy for url

/css/svg-icons.css

male
.svg-male
female
.svg-female
male-business
.svg-male-business
female-business
.svg-female-business
male-color
.svg-male-color
female-color
.svg-female-color
users
.svg-users

Buttons

<button class="btn btn-block btn-social btn-male"> <i class="fab fa-male"></i> </button>

Button Icons

<button class="btn btn-social-icon btn-male"> <i class="fab fa-male"></i> </button>

Image Sizes

<i class="svg-male svg-{size}"></i>
svg-xs svg-sm svg-md svg-lg svg-2x svg-3x svg-4x svg-5x
Sizes: xs sm md lg 2x 3x 4x 5x ... 14x

#Script

<img src="{{'male'.svgDataUri()}}">
<img src="{{'male'.svgDataUri('#e33')}}">
{{ 'male'.svgImage('#e33') }}
{{ 'male'.svgImage() }}
.svg-bg { {{'male'.svgBackgroundImageCss()}} }

Razor

<img src="@Html.SvgDataUri("male")">
<img src="@Html.SvgDataUri("male","#e33")">
@Html.SvgImage("male")
@Html.SvgImage("male", "#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/svg-icons.css">
#Script inline style {{ 'buttons,svg-icons' |> cssIncludes }}
Razor inline style @Html.CssIncludes("buttons","svg-icons")

Individual SVG Links

Image male.svg male.svg?fill=#e33
CSS male.css male.css?fill=#e33
Data URI male.datauri copy for url

Find out more

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