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
• Tailwind UI
• Heroicons

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 that contains already this gem.

1. Add this to Gemfile:

gem 'jekyll-heroicons'

2. Add this to your jekyll _config.yml:

plugins:
  - jekyll-heroicons

{% 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:

heroicons:
  variant: 'solid'

Another way to provide variant and override defaults defined in config is to pass 'variant' to liquid tag:

{% heroicon bell variant: "mini" %}

It's also possible to provide classes to the icon:

{% heroicon bell class: "text-red-500" %}

Any other attributes will be passed to the SVG tag as well. As example:

{% heroicon bell class: "text-red-500" aria-hidden: true height:32 aria-label:hi %}

Besides variants, it's also possible to define default classes for each variant. Here is a recommended default configuration for _config.yml:

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.

{% heroicon bell disable_default_class: true %}

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.

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.

The gem is available as open source under the terms of the MIT License.

Everyone interacting in the Jekyll::Heroicons project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.