Skip to content

Commit 7ae833c

Browse files
committed
chore: update README
1 parent 9ec6917 commit 7ae833c

File tree

1 file changed

+11
-7
lines changed

1 file changed

+11
-7
lines changed

README.md

+11-7
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ A package to easily make use of Heroicons in your Statamic sites. This package i
1010

1111
For a full list of available icons see [the SVG directory](https://github.com/blade-ui-kit/blade-heroicons/tree/main/resources/svg) from the [`blade-ui-kit/blade-heroicons`](https://github.com/blade-ui-kit/blade-heroicons) repository or preview them at [heroicons.com](https://heroicons.com/). Heroicons are originally developed by [Steve Schoger](https://twitter.com/steveschoger) and [Adam Wathan](https://twitter.com/adamwathan).
1212

13+
If you're looking to use Heroicons v1, please use the v1 version of the package.
14+
1315
## Requirements
1416

15-
- PHP 7.4 or higher
16-
- Laravel 8.0 or higher
17+
- PHP 8.1 or higher
18+
- Laravel 9.0 or higher
1719
- Statamic 3.3 or higher
1820

1921
Apart from the requirements above, it is required that you use Statamic's new Runtime Antlers engine. Read more about it and how to enable it in [Statamic's official documentation](https://statamic.dev/new-antlers-parser#about).
@@ -33,11 +35,13 @@ If you need additional options, you can publish the [`blade-ui-kit/blade-heroico
3335
### Usage
3436

3537
```antlers
36-
{{ heroicon:solid:menu }}
38+
{{ heroicon:mini:bars-3 }}
39+
40+
{{ heroicon:solid:bars-3 }}
3741
38-
{{ heroicon:outline:menu }}
42+
{{ heroicon:outline:bars-3 }}
3943
40-
{{ heroicon:outline:menu class="text-gray-500" }}
44+
{{ heroicon:outline:bars-3 class="text-gray-500" }}
4145
4246
{{ heroicon :variant="variant" :icon="icon" }}
4347
```
@@ -47,9 +51,9 @@ Apart from a couple of reserved prop names (`as`, `scope`, `variant`, `icon`), a
4751
The `{{ heroicon }}` tag also allows you to pass dynamically binded attributes like you would use in a JavaScript framework like Alpine.js. The only gotcha is that you cannot use the shorthand syntax `:class="condition ? 'text-red-500' : 'text-green-500'"`. You must use the full binding (e.g. `x-bind:class`, `v-bind:class`). Example:
4852

4953
```antlers
50-
{{ heroicon:solid:menu class="w-5 h-5" title="Main menu" }}
54+
{{ heroicon:solid:bars-3 class="w-5 h-5" title="Main menu" }}
5155
52-
{{ heroicon:solid:menu class="w-5 h-5" x-bind:class="condition ? 'text-red-500' : 'text-green-500'" }}
56+
{{ heroicon:solid:bars-3 class="w-5 h-5" x-bind:class="condition ? 'text-red-500' : 'text-green-500'" }}
5357
```
5458

5559
### Testing

0 commit comments

Comments
 (0)