Skip to content

Commit

Permalink
FEATURE: Render Heroicons using PHP
Browse files Browse the repository at this point in the history
  • Loading branch information
roelmagdaleno committed Jul 28, 2021
0 parents commit 32f486b
Show file tree
Hide file tree
Showing 466 changed files with 1,903 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.idea
vendor
composer.lock
161 changes: 161 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
# PHP Heroicons

A package to render [Heroicons](https://github.com/tailwindlabs/heroicons) in your PHP application.

Preview the icons at [heroicons.com](https://heroicons.com), developed by [Steve Schoger](https://twitter.com/steveschoger) and [Adam Wathan](https://twitter.com/adamwathan).

## Installation

### Composer (recommended)

```shell
composer require roelmagdaleno/php-heroicons
```

### Manual

[Download](https://github.com/roelmagdaleno/php-heroicons/zipball/master) this repo, or the [latest release](https://github.com/roelmagdaleno/php-heroicons/releases), and put it somewhere in your project. Then do:

```php
require_once __DIR__ . '/vendor/autoload.php';
```

## Usage

You can render a Heroicon using multiple ways:

### Helper

Return the SVG by using the `heroicon()` helper function:

```php
$text = heroicon('check-circle', ['width' => 60]);
echo "<p>My icon is: $text</p>";
```

Print the SVG directly:

```php
echo heroicon('check-circle', ['width' => 60]);
```

### Constructor

Instantiate an `Icon` class with parameters and print it directly:

```php
use PHPHeroIcons\Icon;

echo new Icon('check-circle', ['width' => 60]);
```

Instantiate an `Icon` class with parameters and call the `render()` method.

```php
use PHPHeroIcons\Icon;

$icon = new Icon('academic-cap', ['width' => 60]);
$icon->render();
```

Instantiate an `Icon` class with parameters and call the `return()` method.

```php
use PHPHeroIcons\Icon;

$icon = new Icon('academic-cap', ['width' => 60]);
$text = $icon->return();

echo "<p>My icon is: $text</p>";
```

### Render Method

If you want to render multiples icons and only use one `Icon` instance:

```php
use PHPHeroIcons\Icon;

$icon = new Icon();

$icon->render('check-circle', ['width' => 60]);
$icon->render('academic-cap', ['width' => 60]);
$icon->render('library', ['width' => 60]);
```

### Return Method

If you want to return multiples icons and only use one `Icon` instance:

```php
use PHPHeroIcons\Icon;

$icon = new Icon();

$first = $icon->return('check-circle', ['width' => 60]);
$second = $icon->return('academic-cap', ['width' => 60]);
$third = $icon->return('library', ['width' => 60]);

echo "My first icon is: $first then use the $second and $third";
```

## Parameters

The `Icon` constructor, `heroicon()`, `render()` and `return()` methods accepts these attributes in this order:

- $icon
- $attributes
- $type

Example:

```php
heroicon($icon, $attributes, $type);
```

The `$icon` accepts any [Heroicon](https://heroicons.com) slug and if you insert an icon that doesn't exist it won't return anything.

For `$attributes` (optional) you can pass only these attributes as array key/value format:

- `width`
- `height`
- `class`
- `id`

If you pass an attribute that is not listed previously it won't be attached to the SVG HTML.

And last, but not least, you can specify the Heroicon `$type`:

- `solid`
- `outline`

By default the icons will be printed in `solid` type.

Example:

```php
heroicon(
'library',
[
'width' => 60,
'height' => 60,
'class' => 'my-custom-css-class',
'id' => 'my-custom-id',
]
); // Print solid icon with multiple attributes.

heroicon(
'check-circle',
[
'width' => 60,
'height' => 60,
'class' => 'my-custom-css-class',
'id' => 'my-custom-id',
],
'outline'
); // Print outline icon with multiple attributes.
```

## Examples

For more usage examples visit the `examples/index.php` file.
26 changes: 26 additions & 0 deletions composer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
{
"name": "roelmagdaleno/php-heroicons",
"description": "Render Heroicons from PHP.",
"keywords": ["Icons", "Heroicons", "PHP"],
"version": "1.0.0",
"license": "MIT",
"authors": [
{
"name": "Roel Magdaleno",
"homepage": "https://roelmagdaleno.com",
"email": "roelmagdaleno@gmail.com"
}
],
"require": {
"php": "^7.2",
"meyfa/php-svg": "^0.11.2"
},
"autoload": {
"psr-4": {
"PHPHeroIcons\\": "src/"
},
"files": [
"src/Helpers.php"
]
}
}
54 changes: 54 additions & 0 deletions examples/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<?php

require_once '../vendor/autoload.php';

use PHPHeroIcons\Icon;

$icon = new Icon();

echo '<h2>Solid Icons</h2>';

$icon->render('check-circle', ['width' => 60]);
$icon->render('academic-cap', ['width' => 60]);
$icon->render('library', [
'width' => 60,
'height' => 60,
'class' => 'my-custom-css-class',
'id' => 'my-custom-id',
]);

echo '<br>';
echo '<h2>Outline Icons</h2>';

$icon->render('check-circle', ['width' => 60], 'outline');
$icon->render('academic-cap', ['width' => 60], 'outline');
$icon->render('library', ['width' => 60], 'outline');

echo '<br>';
echo '<h2>Render using helper function</h2>';

echo heroicon('check-circle', ['width' => 60]);
echo heroicon('academic-cap', ['width' => 60]);
echo heroicon('library', ['width' => 60]);

echo '<br>';
echo '<h2>Render icon from constructor</h2>';

echo new Icon('check-circle', ['width' => 60]);

$new_icon = new Icon('academic-cap', ['width' => 60]);
$new_icon->render();

$new_icon_two = new Icon('library', ['width' => 60]);
echo $new_icon_two->return();

echo '<br>';
echo '<h2>Render icon from return method</h2>';

$icon = new Icon();

$first = $icon->return('check-circle', ['width' => 60]);
$second = $icon->return('academic-cap', ['width' => 60]);
$third = $icon->return('library', ['width' => 60]);

echo "My first icon is: $first then use the $second and $third";
5 changes: 5 additions & 0 deletions resources/svg/heroicons/outline/academic-cap.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/adjustments.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/annotation.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/archive.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-circle-down.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-circle-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-circle-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-circle-up.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-down.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-narrow-down.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-narrow-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-narrow-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-narrow-up.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-sm-down.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-sm-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-sm-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-sm-up.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrow-up.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/arrows-expand.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/at-symbol.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/backspace.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/badge-check.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/ban.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/beaker.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/bell.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/book-open.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/bookmark-alt.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/bookmark.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/briefcase.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/cake.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/calculator.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/calendar.svg
4 changes: 4 additions & 0 deletions resources/svg/heroicons/outline/camera.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/cash.svg
3 changes: 3 additions & 0 deletions resources/svg/heroicons/outline/chart-bar.svg
Loading

0 comments on commit 32f486b

Please sign in to comment.