HeroiconsTagHelper 2.0.9
See the version list below for details.
dotnet add package HeroiconsTagHelper --version 2.0.9
NuGet\Install-Package HeroiconsTagHelper -Version 2.0.9
<PackageReference Include="HeroiconsTagHelper" Version="2.0.9" />
paket add HeroiconsTagHelper --version 2.0.9
#r "nuget: HeroiconsTagHelper, 2.0.9"
// Install HeroiconsTagHelper as a Cake Addin #addin nuget:?package=HeroiconsTagHelper&version=2.0.9 // Install HeroiconsTagHelper as a Cake Tool #tool nuget:?package=HeroiconsTagHelper&version=2.0.9
<img src="assets/logo.svg" align="left" height="45"> heroicons-tag-helper
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
orrole
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 | Versions 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. |
-
.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,440 | 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,775 | 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,231 | 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 | 147 | 4/21/2021 |
0.4.2-beta.42 | 748 | 12/4/2020 |
0.4.2-beta.38 | 284 | 11/14/2020 |
0.4.2-beta.30 | 233 | 10/28/2020 |
See https://github.com/xt0rted/heroicons-tag-helper/blob/main/CHANGELOG.md for more info