2021-03-03 17:35:03 -05:00
# Heroicons
2022-09-21 14:14:58 +10:00
[Heroicons ](https://heroicons.com ) are "a set of free MIT-licensed high-quality SVG icons for you to use in your web projects". This package gives you Elixir functions to drop Heroicons into your HTML, styled with arbitrary classes.
2021-03-03 17:35:03 -05:00
2022-09-15 11:58:46 -04:00
This library provides optimized svgs for each Heroicon packaged as a Phoenix Component.
2022-09-02 13:49:03 -04:00
2021-03-06 17:10:54 -05:00
Heroicons are designed by [Steve Schoger ](https://twitter.com/steveschoger )
2022-12-13 15:47:16 -05:00
Current Heroicons Version: **2.0.13** .
2022-02-21 12:02:04 -05:00
2021-03-06 17:10:54 -05:00
## Installation
Add Heroicons to your `mix.exs` :
2021-11-12 12:08:11 -05:00
```elixir
2021-03-06 17:10:54 -05:00
defp deps do
[
2022-09-15 11:58:46 -04:00
{:heroicons, "~> 0.5.0"}
2021-03-06 17:10:54 -05:00
]
end
2021-11-12 12:08:11 -05:00
```
2021-03-06 17:10:54 -05:00
After that, run `mix deps.get` .
## Usage
2022-09-20 12:08:23 -04:00
The components are provided by the `Heroicons` module. Each icon is a Phoenix Component you can use in your HEEx templates.
2022-09-15 11:58:46 -04:00
2022-09-21 23:05:54 +01:00
By default, the icon components will use the outline style, but the `solid` or
`mini` attributes may be passed to select styling, for example:
2021-03-06 17:10:54 -05:00
```eex
2022-09-21 23:05:54 +01:00
< Heroicons.cake / >
< Heroicons.cake solid / >
< Heroicons.cake mini / >
2021-03-06 17:10:54 -05:00
```
2022-09-27 23:01:10 -04:00
You can also pass arbitrary HTML attributes to the components, such as classes:
2021-03-06 17:10:54 -05:00
2022-09-21 23:05:54 +01:00
```eex
< Heroicons.cake class = "w-2 h-2" / >
2022-09-27 23:01:10 -04:00
< Heroicons.cake solid class = "w-2 h-2 text-gray-500" / >
2021-03-10 14:30:12 -05:00
```
2021-03-06 17:10:54 -05:00
For a full list of icons see [the docs ](https://hexdocs.pm/heroicons/api-reference.html ) or [heroicons.com ](https://heroicons.com/ ).