Skip to content

Latest commit

 

History

History
96 lines (68 loc) · 4.11 KB

README.md

File metadata and controls

96 lines (68 loc) · 4.11 KB

heroicons-tag-helper

CI build status NuGet Package GitHub Package Registry Project license

ASP.NET tag helper for adding Heroicons to your razor views.

Installation

Note

This package's version is aligned with the heroicons NPM package so you always know which version you're using.

dotnet add package HeroiconsTagHelper

CI builds can be downloaded from the packages page or the GitHub feed. They're also available as build artifacts on every PR.

Setup

In your _ViewImports.cshtml add:

@addTagHelper *, HeroiconsTagHelper

In your Startup.cs add:

public void ConfigureServices(IServiceCollection services)
{
    services.AddHeroicons(Configuration);
}

In your appsettings.json add:

{
  "Heroicons": {
    "IncludeComments": true,
    "SetAccessibilityAttributes": true,
    "SetFocusableAttribute": true
  }
}

Settings

Name Default Value Description
IncludeComments false Add an html comment before the svg tag with the style and name of the icon to help make development/debugging easier.
SetAccessibilityAttributes false Adds various accessibility attributes based on the default state of the tag.
SetFocusableAttribute false Adds the focusable attribute set to false to prevent the icon from receiving focus in Internet Explorer and Edge Legacy.

SetAccessibilityAttributes

If aria-label or aria-labeledby are set then the icon is being used as an image so role="img" will be added to the svg tag, otherwise aria-hidden="true" will be added.

Note: If the element already contains an aria-hidden or role attribute then it will not be modified.

Usage

There are two versions of the tag helper which are used to pick between the outline and solid icon styles.

<heroicon-outline icon="Sun" class="h-6 w-6 text-orange-500" />

will output

<svg class="h-6 w-6 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<heroicon-solid icon="Sun" class="h-6 w-6 text-orange-500" />

will output

<svg class="h-6 w-6 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
</svg>

Development

This project uses the run-script dotnet tool to manage its build and test scripts. To use this you'll need to run dotnet tool install and then dotnet r to see the available commands or look at the scripts section in the global.json.