https://github.com/xt0rted/heroicons-tag-helper
ASP.NET tag helper for adding Heroicons to your razor views
https://github.com/xt0rted/heroicons-tag-helper
hacktoberfest heroicons taghelper taghelpers tailwindcss
Last synced: over 1 year ago
JSON representation
ASP.NET tag helper for adding Heroicons to your razor views
- Host: GitHub
- URL: https://github.com/xt0rted/heroicons-tag-helper
- Owner: xt0rted
- License: mit
- Created: 2020-10-20T20:04:47.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-29T07:54:21.000Z (about 2 years ago)
- Last Synced: 2024-05-01T21:50:23.189Z (about 2 years ago)
- Topics: hacktoberfest, heroicons, taghelper, taghelpers, tailwindcss
- Language: C#
- Homepage: https://www.nuget.org/packages/HeroiconsTagHelper
- Size: 659 KB
- Stars: 13
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 
heroicons-tag-helper
[](https://github.com/xt0rted/heroicons-tag-helper/actions?query=workflow%3ACI)
[](https://www.nuget.org/packages/HeroiconsTagHelper)
[](https://nuget.pkg.github.com/xt0rted/index.json)
[](LICENSE)
ASP.NET tag helper for adding [Heroicons](https://heroicons.com/) to your razor views.
## Installation
> [!NOTE]
> This package's version is aligned with the [heroicons NPM package](https://www.npmjs.com/package/heroicons) so you always know which version you're using.
```terminal
dotnet add package HeroiconsTagHelper
```
CI builds can be downloaded from the [packages page](https://github.com/xt0rted/heroicons-tag-helper/packages/473445) or the GitHub feed.
They're also available as build artifacts on every PR.
## Setup
In your `_ViewImports.cshtml` add:
```html
@addTagHelper *, HeroiconsTagHelper
```
In your `Startup.cs` add:
```csharp
public void ConfigureServices(IServiceCollection services)
{
services.AddHeroicons(Configuration);
}
```
In your `appsettings.json` add:
```json
{
"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"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img#svg_and_roleimg) will be added to the svg tag, otherwise [`aria-hidden="true"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute) 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.
```html
```
will output
```xml
```
```html
```
will output
```xml
```
## Development
This project uses the [run-script](https://github.com/xt0rted/dotnet-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](global.json).