Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skatkov/jekyll-heroicons
Heroicons as a liquid tag for Jekyll.
https://github.com/skatkov/jekyll-heroicons
heroicons jekyll tailwindcss
Last synced: 3 months ago
JSON representation
Heroicons as a liquid tag for Jekyll.
- Host: GitHub
- URL: https://github.com/skatkov/jekyll-heroicons
- Owner: skatkov
- License: mit
- Created: 2024-09-20T23:34:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-26T11:26:05.000Z (3 months ago)
- Last Synced: 2024-10-01T15:49:38.098Z (3 months ago)
- Topics: heroicons, jekyll, tailwindcss
- Language: Ruby
- Homepage:
- Size: 407 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Jekyll-heroicons
Jekyll liquid tags for the beautiful hand-crafted SVG icons, Heroicons.
This gem has no official affiliation with Tailwind CSS or the Heroicons team. Check out their sites:
- [Tailwind CSS](https://tailwindcss.com/)
- [Tailwind UI](https://tailwindui.com/)
- [Heroicons](https://heroicons.com/)
This is heavily inspired by https://github.com/jclusso/heroicons
If you are looking to build a Jekyll website with Tailwind and no-build, take a look at [Jekyll CLI Template](https://github.com/skatkov/jekyll-tailwind-cli-template) that contains already this gem.
## Installation
1. Add this to `Gemfile`:
```ruby
gem 'jekyll-heroicons'
```
2. Add this to your jekyll `_config.yml`:
```yaml
plugins:
- jekyll-heroicons
```
## Usage
```liquid
{% heroicon bell %}
```
Heroicons comes in 4 variants: `solid`, `outline`, `mini`, and `micro`. The default variant is `solid`.
This can be changed through configuration in `_config.yml`:
```ruby
heroicons:
variant: 'solid'
```
Another way to provide variant and override defaults defined in config is to pass 'variant' to liquid tag:
```liquid
{% heroicon bell variant: "mini" %}
```
It's also possible to provide classes to the icon:
```liquid
{% heroicon bell class: "text-red-500" %}
```
Any other attributes will be passed to the SVG tag as well. As example:
```liquid
{% heroicon bell class: "text-red-500" aria-hidden: true height:32 aria-label:hi %}
```
## Configuration
Besides variants, it's also possible to define default classes for each variant. Here is a recommended default configuration for `_config.yml`:
```ruby
heroicons:
variant: 'solid'
default_class: {
solid: "size-6",
outline: "size-6",
mini: "size-5",
micro: "size-4",
}
```
This default class will be applied to every icon. You can disable this on a per-icon basis by passing `disable_default_class: true`.
```liquid
{% heroicon bell disable_default_class: true %}
```
## Development
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
## Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/skatkov/jekyll-heroicons. 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/skatkov/jekyll-heroicons/blob/master/CODE_OF_CONDUCT.md).
## 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 Jekyll::Heroicons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/skatkov/jekyll-heroicons/blob/master/CODE_OF_CONDUCT.md).