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-servicestack"> <i class="fab fa-servicestack"></i> </button>

Button Icons

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

Image Sizes

<i class="svg-servicestack 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="{{'servicestack'.svgDataUri()}}">
<img src="{{'servicestack'.svgDataUri('#e33')}}">
{{ 'servicestack'.svgImage('#e33') }}
{{ 'servicestack'.svgImage() }}
.svg-bg { {{'servicestack'.svgBackgroundImageCss()}} }

Razor

<img src="@Html.SvgDataUri("servicestack")">
<img src="@Html.SvgDataUri("servicestack","#e33")">
@Html.SvgImage("servicestack")
@Html.SvgImage("servicestack", "#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 servicestack.svg servicestack.svg?fill=#e33
CSS servicestack.css servicestack.css?fill=#e33
Data URI servicestack.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-color"> <i class="fab fa-male-color"></i> </button>

Button Icons

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

Image Sizes

<i class="svg-male-color 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-color'.svgDataUri()}}">
<img src="{{'male-color'.svgDataUri('#e33')}}">
{{ 'male-color'.svgImage('#e33') }}
{{ 'male-color'.svgImage() }}
.svg-bg { {{'male-color'.svgBackgroundImageCss()}} }

Razor

<img src="@Html.SvgDataUri("male-color")">
<img src="@Html.SvgDataUri("male-color","#e33")">
@Html.SvgImage("male-color")
@Html.SvgImage("male-color", "#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-color.svg male-color.svg?fill=#e33
CSS male-color.css male-color.css?fill=#e33
Data URI male-color.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.