This site provides a machine-readable index at /llms.txt.

Skip to main content Skip to navigation

Built-in SocialIcons RenderFragments

SocialIcons is a Razor component with no render body whose only surface is four public static readonly RenderFragment fields, each a self-contained inline SVG for use as the Icon property on a SocialLink. It lives in namespace Pennington.BlogSite.Components and is consumed by BlogSiteOptions.Socials via the SocialLink record in namespace Pennington.BlogSite.

Declaration

@code {
    public static readonly RenderFragment GithubIcon = @<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none">
        <path d="M6.51734 17.1132C6.91177 17.6905 8.10883 18.9228 9.74168 19.2333M9.86428 22C8.83582 21.8306 2 19.6057 2 12.0926C2 5.06329 8.0019 2 12.0008 2C15.9996 2 22 5.06329 22 12.0926C22 19.6057 15.1642 21.8306 14.1357 22C14.1357 22 13.9267 18.5826 14.0487 17.9969C14.1706 17.4113 13.7552 16.4688 13.7552 16.4688C14.7262 16.1055 16.2043 15.5847 16.7001 14.1874C17.0848 13.1032 17.3268 11.5288 16.2508 10.0489C16.2508 10.0489 16.5318 7.65809 15.9996 7.56548C15.4675 7.47287 13.8998 8.51192 13.8998 8.51192C13.4432 8.38248 12.4243 8.13476 12.0018 8.17939C11.5792 8.13476 10.5568 8.38248 10.1002 8.51192C10.1002 8.51192 8.53249 7.47287 8.00036 7.56548C7.46823 7.65809 7.74917 10.0489 7.74917 10.0489C6.67316 11.5288 6.91516 13.1032 7.2999 14.1874C7.79575 15.5847 9.27384 16.1055 10.2448 16.4688C10.2448 16.4688 9.82944 17.4113 9.95135 17.9969C10.0733 18.5826 9.86428 22 9.86428 22Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>;
  
    public static readonly RenderFragment LinkedInIcon = @<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none">
        <path d="M7 10V17" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M11 13V17M11 13C11 11.3431 12.3431 10 14 10C15.6569 10 17 11.3431 17 13V17M11 13V10" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M7.00801 7L6.99902 7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        <path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z" stroke-width="1.5" stroke-linejoin="round"></path>
    </svg>;
  
    public static readonly RenderFragment BlueskyIcon = @<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none">
        <path d="M12 11.4963C11.8936 11.2963 7.45492 3 3.50417 3C1.33647 3 2.00456 8 2.50443 10.5C2.70653 11.5108 3.50417 14.5 8.003 14C8.003 14 4.00404 14.5 4.00404 17C4.00404 18.5 6.50339 21 8.50287 21C10.4606 21 11.9391 16.6859 12 16.5058C12.0609 16.6859 13.5394 21 15.4971 21C17.4966 21 19.996 18.5 19.996 17C19.996 14.5 15.997 14 15.997 14C20.4958 14.5 21.2935 11.5108 21.4956 10.5C21.9954 8 22.6635 3 20.4958 3C16.5451 3 12.1064 11.2963 12 11.4963Z" stroke-width="1.5" stroke-linejoin="round"></path>
    </svg>;
  
    public static readonly RenderFragment MastodonIcon = @<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none">
        <path d="M17 13.5V8C17 6.61929 15.8807 5.5 14.5 5.5C13.1193 5.5 12 6.61929 12 8M12 8V11.5M12 8C12 6.61929 10.8807 5.5 9.5 5.5C8.11929 5.5 7 6.61929 7 8V13.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M13 16.9954C15.0099 16.9954 16.89 16.6876 18.4949 16.1525C20.1275 15.6081 21 13.9512 21 12.2302V7.52349C21 5.34784 19.8297 3.2779 17.7281 2.715C16.0259 2.25905 14.0744 2 12 2C9.9256 2 7.97414 2.25905 6.27189 2.715C4.17033 3.2779 3 5.34785 3 7.52349V14.4961C3 22.4937 11 21.9938 11 21.9938C13.5 21.9938 15 21 15 21V20C15 20 13.5 20.4943 11 20.4943C5.68009 20.4943 7.06011 15.9957 7.06011 15.9957C8.75781 16.627 10.8012 16.9954 13 16.9954Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>;
}

The declaration exposes four static readonly RenderFragment fields; there is no class body and no constructor.

Icons

All four fragments share viewBox="0 0 24 24", stroke="currentColor", and fill="none"; color and size are inherited from the surrounding anchor or container. Inner <path> elements use stroke-width="1.5", stroke-linecap="round", and stroke-linejoin="round" where present.

Name viewBox stroke fill Notes
GithubIcon 0 0 24 24 currentColor none Single-path Octocat silhouette.
LinkedInIcon 0 0 24 24 currentColor none Four-path "in" glyph inside a rounded square.
BlueskyIcon 0 0 24 24 currentColor none Single-path butterfly silhouette using the same stroke-only, currentColor convention as the other icons.
MastodonIcon 0 0 24 24 currentColor none Two-path elephant-trunk mark using stroke-width="1.5" and rounded joins.

Reference from SocialLink.Icon

/// <summary>Icon and URL for a social media link.</summary>
/// <param name="Icon">Rendered icon markup.</param>
/// <param name="Url">Target URL.</param>
public record SocialLink(RenderFragment Icon, string Url);

SocialLink is a record SocialLink(RenderFragment Icon, string Url); pass the static field directly — SocialIcons.GithubIcon — not as a component tag <SocialIcons.GithubIcon />.

One-line syntax:

new SocialLink(SocialIcons.GithubIcon, "https://github.com/example")

Example

Excerpt from BlogSiteHeroProjectsSocialsExample.Stage3.Run, which populates BlogSiteOptions.Socials with all four built-in fragments.

var builder = WebApplication.CreateBuilder(args);
  
builder.Services.AddBlogSite(() => new BlogSiteOptions
{
    SiteTitle = "Hero Blog",
    Description = "A BlogSite tutorial app demonstrating hero, projects, and social links.",
    CanonicalBaseUrl = "https://example.com",
  
    AuthorName = "Author Name",
    AuthorBio = "Writing about software, tools, and the occasional side project.",
  
    HeroContent = new HeroContent(
        Title: "Field notes from a weekend content engine",
        Description: "I build small tools for small problems. This is where I write about them."),
  
    MyWork =
    [
        new Project(
            Title: "Pennington",
            Description: "A tiny .NET content engine for docs and blogs.",
            Url: "https://github.com/example/pennington"),
        new Project(
            Title: "MonorailCSS",
            Description: "Utility-first CSS generation for Razor.",
            Url: "https://github.com/example/monorailcss"),
        new Project(
            Title: "Mdazor",
            Description: "Inline Razor components inside Markdown.",
            Url: "https://github.com/example/mdazor"),
    ],
  
    Socials =
    [
        new SocialLink(SocialIcons.GithubIcon, "https://github.com/example"),
        new SocialLink(SocialIcons.BlueskyIcon, "https://bsky.app/profile/example.bsky.social"),
        new SocialLink(SocialIcons.LinkedInIcon, "https://www.linkedin.com/in/example"),
        new SocialLink(SocialIcons.MastodonIcon, "https://hachyderm.io/@example"),
    ],
  
    MainSiteLinks =
    [
        new HeaderLink("Home", "/"),
        new HeaderLink("Archive", "/archive"),
        new HeaderLink("Tags", "/tags"),
    ],
});
  
var app = builder.Build();
app.UseBlogSite();
app.RunBlogSiteAsync(args).GetAwaiter().GetResult();

See also

Previous
Next