Skip to content

Instantly share code, notes, and snippets.

@domjtalbot

domjtalbot/Icon.cs

Created January 19, 2017 12:38
Show Gist options
  • Save domjtalbot/d9ca1e3604adb720e3e9ceb952f81772 to your computer and use it in GitHub Desktop.
Save domjtalbot/d9ca1e3604adb720e3e9ceb952f81772 to your computer and use it in GitHub Desktop.
Download ZIP
SVG icon class for c# mvc.net env. Specifically intended for Icons8 to allow easy Icon injection, without copying and pasting embed code in mulitple places.
Raw
_Icon.cshtml
@using Test.Models;
@{
var icon = new Icon()
{
Name = (string)ViewData["iconName"]
};
}
<svg xmlns="http://www.w3.org/2000/svg"
class="icon"
data-heicon="@icon.Name.ToLower()"
width="44"
height="44"
viewBox="0 0 50 50"
>
@Html.Raw(icon.getSVG())
</svg>
Raw
_Layout.cshtml
<html>
<head>
</head>
<body>
@Html.Partial("_Icon", new ViewDataDictionary { { "iconName", "search" } })
</body>
</html>
Raw
Icon.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Xml;
namespace Test.Models
{
/// <summary>
/// Inject SVG icon into the page
/// </summary>
public class Icon
{
/// <summary>
/// Initializes a new instance of <see cref="Icon" /> class.
/// </summary>
/// <remarks>Icon constructor</remarks>
private Icon()
{
this.Folder = "~/Assets/icons/";
this.Extension = ".svg";
}
/// <summary>
/// Folder containing icons.
/// </summary>
/// <value>The Folder property gets/sets the folder path</value>
public string Folder { get; set; }
/// <summary>
/// Extension used by icons.
/// </summary>
/// <value>The Extension property gets/sets the extension used for icons</value>
public string Extension { get; set; }
/// <summary>
/// Icon name
/// </summary>
/// <value>The Name property gets/sets the name of requested icon.</value>
public string Name { get; set; }
/// <summary>
/// The full path to the requested icon file.
/// </summary>
/// <value>The Path property gets the full file path</value>
private string Path
{
get
{
var path = Folder + Name + Extension;
return HttpContext.Current.Server.MapPath(Path);
}
}
/// <summary>
/// Get the SVG contents of the requested icon.
/// </summary>
/// <returns>Inner SVG XML</returns>
/// <example>
/// This shows how to call the <see cref="getSVG"/> method.
/// <code>
/// var icon = new Icon()
/// {
/// Name = "menu"
/// };
/// var svg = icon.getSVG();
/// </code>
/// </example>
public string getSVG()
{
string svg = File.ReadAllText(Path);
XmlDocument contents = new XmlDocument();
contents.LoadXml(svg);
XmlNodeList rootNode = contents.GetElementsByTagName("svg");
return rootNode[0].InnerXml;
}
}
}
Display the source blob
Display the rendered blob
Raw
Search.svg
<svg xmlns="http://www.w3.org/2000/svg" width="528" height="528" viewBox="0 0 50 50" style="fill: rgb(102, 102, 102);">
<path style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans"
d="icons8 path code"
color="#000"
overflow="visible"
enable-background="accumulate"
font-family="Bitstream Vera Sans"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment