Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abeidahmed/rails-heroicon
Ruby on Rails views helpers for the awesome heroicons by Steve Schoger.
https://github.com/abeidahmed/rails-heroicon
gem heroicons rails ruby svg-icons
Last synced: 8 days ago
JSON representation
Ruby on Rails views helpers for the awesome heroicons by Steve Schoger.
- Host: GitHub
- URL: https://github.com/abeidahmed/rails-heroicon
- Owner: abeidahmed
- License: mit
- Created: 2021-02-21T13:03:55.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-23T15:35:21.000Z (3 months ago)
- Last Synced: 2024-11-05T23:51:37.279Z (15 days ago)
- Topics: gem, heroicons, rails, ruby, svg-icons
- Language: Ruby
- Homepage: https://rubygems.org/gems/rails_heroicon
- Size: 1.61 MB
- Stars: 59
- Watchers: 1
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Rails Heroicon 
Ruby on Rails views helper for the awesome heroicons by Steve Schoger. To see
all the icons visit [heroicons](https://heroicons.com/).
The latest version of this gem is built with heroicons
[v2.1.5](https://github.com/tailwindlabs/heroicons/releases/tag/v2.1.5) (316 icons).
> This gem has no official affiliation with [Tailwind Labs](https://github.com/tailwindlabs),
> yet.
## Installation
Add this line to your application's Gemfile:
```ruby
gem "rails_heroicon"
```
And then execute:
```bash
bundle install
```
Or install it yourself as:
```bash
gem install rails_heroicon
```
## Usage
After installing the gem, call `<%= heroicon "user" %>` on your `erb` template.
The first argument is the icon name. All the icons are listed [here](https://heroicons.com/).
This will generate the following html:
```html
```
> Note: Indentation is for readability purpose.
### Variant
`rails_heroicon` provides 4 variants, `outline`, `solid`, `mini`, and `micro`, `outline` being
the default.
To change the variant `<%= heroicon "user", variant: "solid" %>`.
### HTML attributes
Any `html` and `eruby` attribute is supported, for eg:
```erb
<%= heroicon "user", class: "text-gray-500", aria: { label: "user-icon" } %>
```
### Handling the size of the icon
Normally, if you're just using vanilla heroicons with [Tailwind CSS](https://tailwindcss.com/),
you'd add `w-5 h-5` as classes on the svg element. With `rails_heroicon`, you just
need to set the `size` attribute on the helper method.
```erb
<%= heroicon "user", size: 20 %>
```
If the `variant` is set as `outline` or `solid`, `size` defaults to `24`,
if the `variant` is set as `mini`, `size` defaults to `20`, and if the `variant`
is set as `micro`, `size` defaults to `16`. However, this can be over-written with
the `size` attribute.
### Accessibility
`rails_heroicon` automatically sets `aria-hidden="true"` if `aria-label` is not
set, and if `aria-label` is set, then `role="img"` is set.
### Tooltip
You can provide tooltips on hover if you pass in a `title` option. Anything
passed into the `title` option will be rendered inside of a
`` tag within the rendered SVG, which modern browsers will lean on to
display a tooltip on hover.
## Development
- Clone the repo
- Run `bundle install`, or run `./bin/setup`
- Run `bundle exec rake` to run the tests to see if it passing
## Publishing
- `gem build rails_heroicon.gemspec`
- `gem push rails_heroicon-x.x.x.gem`
## Contributing
Bug reports and pull requests are welcome. This project is intended to be a
safe, welcoming space for collaboration, and contributors are expected to adhere
to the [code of conduct](https://github.com/abeidahmed/rails-heroicon/blob/main/CODE_OF_CONDUCT.md).
Please read the [CONTRIBUTING.md](https://github.com/abeidahmed/rails-heroicon/blob/main/CONTRIBUTING.md)
on how to make pull requests.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
## Code of Conduct
Everyone interacting in the Rails Heroicon project's codebases, issue trackers,
chat rooms and mailing lists is expected to follow the
[code of conduct](https://github.com/abeidahmed/rails-heroicon/blob/main/CODE_OF_CONDUCT.md).
## Similar projects
- [rails_feather](https://github.com/abeidahmed/rails_feather) - Ruby on Rails
views helper method for rendering beautiful feather icons.