Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
swapnilsarwe committed Mar 8, 2021
1 parent 8512f1b commit 946cac6
Show file tree
Hide file tree
Showing 4 changed files with 30 additions and 54 deletions.
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
This changelog follows [the Keep a Changelog standard](https://keepachangelog.com).


## 0.1.0 (2021-03-05)
## 0.1.0 (2021-03-08)

Initial release.
Current package support [Material Icons 4.0.0](https://github.com/google/material-design-icons/releases/tag/4.0.0)
Current package support [SimpleIcons 4.14.0](https://github.com/simple-icons/simple-icons/releases/tag/4.14.0)
62 changes: 19 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
<p align="center">
<img src="https://banners.beyondco.de/Blade%20Google%20Material%20Design%20Icons.png?theme=light&packageManager=composer+require&packageName=codeat3%2Fblade-google-material-design-icons&pattern=architect&style=style_1&description=A+package+to+use+Google+Fonts+Material+Icons+in+your+Laravel+Blade+views&md=1&showWatermark=1&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg" width="1280" title="Social Card Blade Google Material Design Icons">
<img src="https://banners.beyondco.de/Blade%20Simple%20Icons.png?theme=light&packageManager=composer+require&packageName=codeat3%2Fblade-simple-icons&pattern=architect&style=style_1&description=A+package+to+use+Simple+Icons+in+your+Laravel+Blade+views&md=1&showWatermark=1&fontSize=100px&images=https%3A%2F%2Flaravel.com%2Fimg%2Flogomark.min.svg" width="1280" title="Social Card Blade Simple Icons">
</p>

# Blade Google Material Design Icons
# Blade Simple Icons

<a href="https://github.com/codeat3/blade-google-material-design-icons/actions?query=workflow%3ATests">
<img src="https://github.com/codeat3/blade-google-material-design-icons/workflows/Tests/badge.svg" alt="Tests">
<a href="https://github.com/codeat3/blade-simple-icons/actions?query=workflow%3ATests">
<img src="https://github.com/codeat3/blade-simple-icons/workflows/Tests/badge.svg" alt="Tests">
</a>
<a href="https://github.styleci.io/repos/258753939">
<img src="https://github.styleci.io/repos/258753939/shield?style=flat" alt="Code Style">
</a>
<a href="https://packagist.org/packages/codeat3/blade-google-material-design-icons">
<img src="https://img.shields.io/packagist/v/codeat3/blade-google-material-design-icons" alt="Latest Stable Version">
<a href="https://packagist.org/packages/codeat3/blade-simple-icons">
<img src="https://img.shields.io/packagist/v/codeat3/blade-simple-icons" alt="Latest Stable Version">
</a>
<a href="https://packagist.org/packages/codeat3/blade-google-material-design-icons">
<img src="https://img.shields.io/packagist/dt/codeat3/blade-google-material-design-icons" alt="Total Downloads">
<a href="https://packagist.org/packages/codeat3/blade-simple-icons">
<img src="https://img.shields.io/packagist/dt/codeat3/blade-simple-icons" alt="Total Downloads">
</a>

A package to easily make use of [Google Material Design Icons](https://github.com/google/material-design-icons) in your Laravel Blade views.
A package to easily make use of [Simple Icons](https://github.com/simple-icons/simple-icons) in your Laravel Blade views.

For a full list of available icons see [the SVG directory](resources/svg) or preview them at [fonts.google.com](https://fonts.google.com/icons).
For a full list of available icons see [the SVG directory](resources/svg) or preview them at [fonts.google.com](https://simpleicons.org/).

## Requirements

Expand All @@ -29,7 +29,7 @@ For a full list of available icons see [the SVG directory](resources/svg) or pre
## Installation

```bash
composer require codeat3/blade-google-material-design-icons
composer require codeat3/blade-simple-icons
```

## Updating
Expand All @@ -41,71 +41,47 @@ Please refer to [`the upgrade guide`](UPGRADE.md) when updating the library.
Icons can be used as self-closing Blade components which will be compiled to SVG icons:

```blade
<x-gmdi-backup/>
<x-si-laravelnova/>
```

You can also pass classes to your icon components:

```blade
<x-gmdi-backup class="w-6 h-6 text-gray-500"/>
<x-si-laravelnova class="w-6 h-6 text-gray-500"/>
```

And even use inline styles:

```blade
<x-gmdi-backup style="color: #555"/>
```

The outlined icons can be referenced like this:

```blade
<x-gmdi-backup-o/>
```

The round icons can be referenced like this:

```blade
<x-gmdi-backup-r/>
```

The sharp icons can be referenced like this:

```blade
<x-gmdi-backup-s/>
```

The two tone icons can be referenced like this:

```blade
<x-gmdi-backup-tt/>
<x-si-laravelnova style="color: #555"/>
```

### Raw SVG Icons

If you want to use the raw SVG icons as assets, you can publish them using:

```bash
php artisan vendor:publish --tag=blade-gmdi --force
php artisan vendor:publish --tag=blade-si --force
```

Then use them in your views like:

```blade
<img src="{{ asset('vendor/blade-gmdi/gmdi-1k.svg') }}" width="10" height="10"/>
<img src="{{ asset('vendor/blade-si/si-laravel-nova.svg') }}" width="10" height="10"/>
```

### Blade Icons

Blade Google Material Design Icons uses Blade Icons under the hood. Please refer to [the Blade Icons readme](https://github.com/blade-ui-kit/blade-icons) for additional functionality.
Blade Simple Icons uses Blade Icons under the hood. Please refer to [the Blade Icons readme](https://github.com/blade-ui-kit/blade-icons) for additional functionality.

## Changelog

Check out the [CHANGELOG](CHANGELOG.md) in this repository for all the recent changes.

## Maintainers

Blade Google Material Design Icons is developed and maintained by [Swapnil Sarwe](https://swapnilsarwe.com).
Blade Simple Icons is developed and maintained by [Swapnil Sarwe](https://swapnilsarwe.com).

## License

Blade Google Material Design Icons is open-sourced software licensed under [the MIT license](LICENSE.md).
Blade Simple Icons is open-sourced software licensed under [the MIT license](LICENSE.md).
4 changes: 2 additions & 2 deletions UPGRADE.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ If you're upgrading from the original Blade Icons package there's very little st
If you were using the raw exported icons you'll need to re-publish them with:

```bash
php artisan vendor:publish --tag=blade-gmdi --force
php artisan vendor:publish --tag=blade-si --force
```

The new way to reference them is:

```blade
<img src="{{ asset('vendor/blade-gmdi/o-adjustments.svg') }}" width="10" height="10"/>
<img src="{{ asset('vendor/blade-si/laravelnova.svg') }}" width="10" height="10"/>
```
14 changes: 7 additions & 7 deletions tests/CompilesIconsTest.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@

namespace Tests;

use Orchestra\Testbench\TestCase;
use BladeUI\Icons\BladeIconsServiceProvider;
use Codeat3\BladeSimpleIcons\BladeSimpleIconsServiceProvider;
use Orchestra\Testbench\TestCase;

class CompilesIconsTest extends TestCase
{
/** @test */
public function it_compiles_a_single_anonymous_component()
{
$result = svg('gmdi-backup')->toHtml();
$result = svg('si-laravelnova')->toHtml();

// Note: the empty class here seems to be a Blade components bug.
$expected = <<<'SVG'
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Laravel Nova icon</title><path d="M21.333 4.319C16.56.386 9.453.632 4.973 5.057a7.571 7.571 0 0 0 0 10.8c3.018 2.982 7.912 2.982 10.931 0a3.245 3.245 0 0 0 0-4.628 3.342 3.342 0 0 0-4.685 0 1.114 1.114 0 0 1-1.561 0 1.082 1.082 0 0 1 0-1.543 5.57 5.57 0 0 1 7.808 0 5.408 5.408 0 0 1 0 7.714c-3.881 3.834-10.174 3.834-14.055 0a9.734 9.734 0 0 1-.015-13.87C5.596 1.35 8.638 0 12 0c3.75 0 7.105 1.68 9.333 4.319zm-.714 16.136A12.184 12.184 0 0 1 12 24a12.18 12.18 0 0 1-9.333-4.319c4.772 3.933 11.88 3.687 16.36-.738a7.571 7.571 0 0 0 0-10.8c-3.018-2.982-7.912-2.982-10.931 0a3.245 3.245 0 0 0 0 4.628 3.342 3.342 0 0 0 4.685 0 1.114 1.114 0 0 1 1.561 0 1.082 1.082 0 0 1 0 1.543 5.57 5.57 0 0 1-7.808 0 5.408 5.408 0 0 1 0-7.714c3.881-3.834 10.174-3.834 14.055 0a9.734 9.734 0 0 1 .03 13.855z"/></svg>
SVG;

$this->assertSame($expected, $result);
Expand All @@ -26,10 +26,10 @@ public function it_compiles_a_single_anonymous_component()
/** @test */
public function it_can_add_classes_to_icons()
{
$result = svg('gmdi-backup', 'w-6 h-6 text-gray-500')->toHtml();
$result = svg('si-laravelnova', 'w-6 h-6 text-gray-500')->toHtml();

$expected = <<<'SVG'
<svg class="w-6 h-6 text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
<svg class="w-6 h-6 text-gray-500" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Laravel Nova icon</title><path d="M21.333 4.319C16.56.386 9.453.632 4.973 5.057a7.571 7.571 0 0 0 0 10.8c3.018 2.982 7.912 2.982 10.931 0a3.245 3.245 0 0 0 0-4.628 3.342 3.342 0 0 0-4.685 0 1.114 1.114 0 0 1-1.561 0 1.082 1.082 0 0 1 0-1.543 5.57 5.57 0 0 1 7.808 0 5.408 5.408 0 0 1 0 7.714c-3.881 3.834-10.174 3.834-14.055 0a9.734 9.734 0 0 1-.015-13.87C5.596 1.35 8.638 0 12 0c3.75 0 7.105 1.68 9.333 4.319zm-.714 16.136A12.184 12.184 0 0 1 12 24a12.18 12.18 0 0 1-9.333-4.319c4.772 3.933 11.88 3.687 16.36-.738a7.571 7.571 0 0 0 0-10.8c-3.018-2.982-7.912-2.982-10.931 0a3.245 3.245 0 0 0 0 4.628 3.342 3.342 0 0 0 4.685 0 1.114 1.114 0 0 1 1.561 0 1.082 1.082 0 0 1 0 1.543 5.57 5.57 0 0 1-7.808 0 5.408 5.408 0 0 1 0-7.714c3.881-3.834 10.174-3.834 14.055 0a9.734 9.734 0 0 1 .03 13.855z"/></svg>
SVG;

$this->assertSame($expected, $result);
Expand All @@ -38,10 +38,10 @@ public function it_can_add_classes_to_icons()
/** @test */
public function it_can_add_styles_to_icons()
{
$result = svg('gmdi-backup', ['style' => 'color: #555'])->toHtml();
$result = svg('si-laravelnova', ['style' => 'color: #555'])->toHtml();

$expected = <<<'SVG'
<svg style="color: #555" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
<svg style="color: #555" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Laravel Nova icon</title><path d="M21.333 4.319C16.56.386 9.453.632 4.973 5.057a7.571 7.571 0 0 0 0 10.8c3.018 2.982 7.912 2.982 10.931 0a3.245 3.245 0 0 0 0-4.628 3.342 3.342 0 0 0-4.685 0 1.114 1.114 0 0 1-1.561 0 1.082 1.082 0 0 1 0-1.543 5.57 5.57 0 0 1 7.808 0 5.408 5.408 0 0 1 0 7.714c-3.881 3.834-10.174 3.834-14.055 0a9.734 9.734 0 0 1-.015-13.87C5.596 1.35 8.638 0 12 0c3.75 0 7.105 1.68 9.333 4.319zm-.714 16.136A12.184 12.184 0 0 1 12 24a12.18 12.18 0 0 1-9.333-4.319c4.772 3.933 11.88 3.687 16.36-.738a7.571 7.571 0 0 0 0-10.8c-3.018-2.982-7.912-2.982-10.931 0a3.245 3.245 0 0 0 0 4.628 3.342 3.342 0 0 0 4.685 0 1.114 1.114 0 0 1 1.561 0 1.082 1.082 0 0 1 0 1.543 5.57 5.57 0 0 1-7.808 0 5.408 5.408 0 0 1 0-7.714c3.881-3.834 10.174-3.834 14.055 0a9.734 9.734 0 0 1 .03 13.855z"/></svg>
SVG;

$this->assertSame($expected, $result);
Expand Down

0 comments on commit 946cac6

Please sign in to comment.