HeroiconsTagHelper 2.0.10

There is a newer version of this package available.
See the version list below for details.
dotnet add package HeroiconsTagHelper --version 2.0.10                
NuGet\Install-Package HeroiconsTagHelper -Version 2.0.10                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="HeroiconsTagHelper" Version="2.0.10" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add HeroiconsTagHelper --version 2.0.10                
#r "nuget: HeroiconsTagHelper, 2.0.10"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install HeroiconsTagHelper as a Cake Addin
#addin nuget:?package=HeroiconsTagHelper&version=2.0.10

// Install HeroiconsTagHelper as a Cake Tool
#tool nuget:?package=HeroiconsTagHelper&version=2.0.10                

<img src="assets/logo.svg" align="left" height="45"> 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

ℹī¸ 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>

Note: The stroke-width attribute is now deprecated and will be removed in a future release

The outline style also lets you set the stroke-width attribute which will be passed down to any paths that support it. The Heroicons default is 1.5 (in v1 it was 2), but this will let you adjust it as needed.

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

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="1" 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>

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.

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp3.1 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.
  • .NETCoreApp 3.1

    • No dependencies.
  • net6.0

    • No dependencies.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on HeroiconsTagHelper:

Package Downloads
Pines.TagHelpers

Adds ASP.NET Core tag helpers to make use of the Pines Alpine.js + Tailwind CSS UI components library.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
2.1.3 3,313 4/7/2024
2.1.2 112 4/7/2024
2.1.1 105 4/7/2024
2.1.0 104 4/7/2024
2.0.18 4,631 7/2/2023
2.0.17 162 7/2/2023
2.0.16 172 7/2/2023
2.0.15 3,769 2/14/2023
2.0.14 256 2/14/2023
2.0.13 1,942 11/13/2022
2.0.12 912 10/12/2022
2.0.11 416 10/12/2022
2.0.10 408 10/12/2022
2.0.9 445 10/11/2022
2.0.8 599 10/11/2022
2.0.7 415 10/11/2022
2.0.6 404 10/11/2022
2.0.5 394 10/11/2022
2.0.4 409 10/11/2022
2.0.3 516 10/11/2022
1.0.6 2,225 3/15/2022
1.0.5 1,578 11/7/2021
1.0.4 469 8/19/2021
1.0.2 385 7/23/2021
1.0.1 506 4/21/2021
1.0.0 360 4/21/2021
0.4.2 378 4/21/2021
0.4.2-beta.61 145 4/21/2021
0.4.2-beta.42 746 12/4/2020
0.4.2-beta.38 282 11/14/2020
0.4.2-beta.30 231 10/28/2020