SVG Images

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

Button Icons

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

Image Sizes

<i class="svg-google 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="{{'google'.svgDataUri()}}">

<img src="{{'google'.svgDataUri('#e33')}}">

{{ 'google'.svgImage('#e33') }}

{{ 'google'.svgImage() }}

.svg-bg {
  {{'google'.svgBackgroundImageCss()}} 
}

Razor

<img src="@Html.SvgDataUri("google")">

<img src="@Html.SvgDataUri("google","#e33")">

@Html.SvgImage("google")

@Html.SvgImage("google", "#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	google.svg google.svg?fill=#e33
CSS	google.css google.css?fill=#e33
Data URI	google.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

SVG Images

/css/svg-auth.css

Buttons

Button Icons

Image Sizes

#Script

Razor

Reference all svg images using .css

Individual SVG Links

/css/svg-icons.css

Buttons

Button Icons

Image Sizes

#Script

Razor

Reference all svg images using .css

Individual SVG Links

Find out more