Files
phosphoricons/README.md

43 lines
1.0 KiB
Markdown
Raw Normal View History

2021-03-03 17:35:03 -05:00
# Heroicons
[Heroicons](https://github.com/tailwindlabs/heroicons) 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-06 17:10:54 -05:00
Heroicons are designed by [Steve Schoger](https://twitter.com/steveschoger)
## 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-02-15 23:47:54 -05:00
{:heroicons, "~> 0.3.1"}
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
2021-11-12 12:08:11 -05:00
The components are in `Heroicons.Solid` and `Heroicons.Outline`. Each icon is a Phoenix Component you can use in your HEEx templates.
2021-03-06 17:10:54 -05:00
```eex
2021-11-12 12:08:11 -05:00
<Heroicons.Solid.cake />
2021-03-06 17:10:54 -05:00
```
and style it with some classes
```eex
2021-11-12 12:08:11 -05:00
<Heroicons.Solid.cake class="h-6 w-6 text-gray-500" />
2021-03-06 17:10:54 -05:00
```
There are also function versions of each component:
2021-11-12 12:08:11 -05:00
```eex
<%= Heroicons.Solid.cake() %>
2021-11-12 12:08:11 -05:00
<%= Heroicons.Solid.cake(class: "h-6 w-6 text-gray-500") %>
```
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/).