README.md in heroicon-0.4.0 vs README.md in heroicon-1.0.0
- old
+ new
@@ -3,11 +3,11 @@
[](https://github.com/bharget/heroicon/actions)
[](https://github.com/testdouble/standard)
Ruby on Rails view helpers for the beautiful hand-crafted SVG icons, Heroicons.
-Used in production at [Morning Brew ☕](https://www.morningbrew.com/?utm_source=bharget_github)
+Used in production at [beehiiv 🐝](https://www.beehiiv.com/?utm_source=bharget_github)
This gem has no official affiliation with Tailwind CSS or the Heroicon team (yet!). Check out their sites:
- [Tailwind CSS](https://tailwindcss.com/?utm_source=bharget_github)
- [Tailwind UI](https://tailwindui.com/?utm_source=bharget_github)
@@ -39,11 +39,11 @@
```rb
<%= heroicon "search" %>
```
-Heroicon comes with two variants, `:outline` and `:solid`. The default variant is `:solid`. This can be changed in `config/initializers/heroicon.rb`, which is generated during installation (See [Configuration](#configuration)). To overwrite this in the view, use
+Heroicon comes with 3 variants, `:outline`, `:solid` and `:mini`. The default variant is `:solid`. This can be changed in `config/initializers/heroicon.rb`, which is generated during installation (See [Configuration](#configuration)). To overwrite this in the view, use
```rb
<%= heroicon "search", variant: :outline %>
```
@@ -51,11 +51,11 @@
```rb
<%= heroicon "search", options: { class: "text-primary-500" } %>
```
-Heroicon currently supports icons up to [`Version 1.0.1`](https://github.com/tailwindlabs/heroicons/releases/tag/v1.0.1). If there is a icon that is missing, feel free to contribute by following our contributing guide below.
+Heroicon currently supports icons matching [`Version 2.0.10`](https://github.com/tailwindlabs/heroicons/releases/tag/v2.0.10). If there is an icon that is missing or a new version released, feel free to contribute by following our contributing guide below.
# Configuration
After running `rails g heroicon:install` in the installation step, a configuration file will be created at `config/initializers/heroicon.rb`.
@@ -64,24 +64,38 @@
- `variant`: The default variant to use if no variant is specified in the view.
- You can set this to either `:outline` or `:solid`. Defaults to `:solid`.
- `default_class`: A default class that gets applied to every icon.
- This accepts either a String to apply to every icon, or a Hash, which applies the class based on the variant of the icon (see the example below).
- You can disable this on a per-icon basis by passing `disable_default_class: true` in the options hash within the view.
- - _Note: If you use the `default_class` option with PurgeCSS (or something similar), make sure you add the classes you want to use to the generated CSS file. For PurgeCSS, you may want to add `config/intializers/heroicon.rb` to the list of purged paths._
+**Note:** If you enable the `default_class` config, make sure to include `config/intializers/heroicon.rb` in the list of purged paths. For TailwindCSS 3.0+, you should have something like this in your `tailwind.config.js`:
+
+```js
+module.exports = {
+ //...
+ content: [
+ './app/helpers/**/*.rb',
+ './app/javascript/**/*.js',
+ './app/views/**/*',
+ './config/initializers/heroicon.rb', // 👈
+ ],
+ //...
+}
+```
+
An example configuration looks like this:
```ruby
Heroicon.configure do |config|
config.variant = :solid
- config.default_class = {solid: "h-5 w-5", outline: "h-6 w-6"}
+ config.default_class = {solid: "h-5 w-5", outline: "h-6 w-6", mini: "h-4 w-4"}
end
```
Disabling the default class in the view:
```rb
-<%= heroicon "search", options: { class: "custom-class" disable_default_class: true } %>
+<%= heroicon "search", options: { class: "custom-class", disable_default_class: true } %>
```
## Contributing
Anyone is encouraged to help improve this project. Here are a few ways you can help: