Blade Akar Icons

https://github.com/codeat3/blade-akar-icons
Admin
A package that provides easy integration of Akar Icons into Laravel Blade views, allowing icons to...
Tokens:9,914
Snippets:75
Trust Score:6.5
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install via Composer

Source: https://github.com/codeat3/blade-akar-icons/blob/main/README.md

Install the package with Composer. Requires PHP 7.4+ and Laravel 8.0+.

```bash
composer require codeat3/blade-akar-icons
```

--------------------------------

### Composer installation and auto-discovery comment

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/blade-akar-icons-service-provider.md

Shows how the package is installed and auto-discovered via Laravel's package discovery. No manual registration is needed.

```php
// composer.json (in the consuming Laravel application) — the package is installed
// with:
//   composer require codeat3/blade-akar-icons
//
// Laravel reads "extra.laravel.providers" from the installed package's composer.json
// and registers the provider automatically. No manual registration is required.
```

--------------------------------

### Published config with defaults

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/configuration.md

Example of the published configuration file with default values. The 'attributes' array includes commented-out example entries for width and height.

```php
<?php

return [

    'prefix' => 'akar',

    'fallback' => '',

    'class' => '',

    'attributes' => [
        // 'width' => 50,
        // 'height' => 50,
    ],

];
```

--------------------------------

### Clear view cache after upgrade

Source: https://github.com/codeat3/blade-akar-icons/blob/main/UPGRADE.md

Run this Artisan command to clear the compiled views after updating the package.

```bash
php artisan view:clear
```

--------------------------------

### Set default class for icons

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/configuration.md

Configuration example that sets a default CSS class for all icons in the set. The class is applied to every icon, and passed classes are merged after it.

```php
<?php

return [

    'prefix' => 'akar',

    'fallback' => '',

    'class' => 'w-6 h-6 text-gray-500',

    'attributes' => [],

];
```

```blade
{{-- renders <svg class="w-6 h-6 text-gray-500" ...> --}}
<x-akar-bluetooth/>
```

--------------------------------

### Republish raw icons with vendor:publish

Source: https://github.com/codeat3/blade-akar-icons/blob/main/UPGRADE.md

Re-publish the raw exported icons when upgrading from the original Blade Icons package. Use the --force flag to overwrite existing files.

```bash
php artisan vendor:publish --tag=blade-akar-icons --force
```

--------------------------------

### Reference raw icon in Blade template

Source: https://github.com/codeat3/blade-akar-icons/blob/main/UPGRADE.md

New way to reference a raw icon in a Blade view using the asset() helper. Replace 'bluetooth.svg' with the desired icon filename.

```blade
<img src="{{ asset('vendor/blade-akar-icons/bluetooth.svg') }}" width="10" height="10"/>
```

--------------------------------

### Basic rendering with svg()

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Renders the 'akar-bluetooth' icon to HTML. The output is an SVG element with default attributes.

```php
$html = svg('akar-bluetooth')->toHtml();
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 7L17 17L11 22V2L17 7L5 17" .../></svg>
```

--------------------------------

### Adding classes with svg()

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Renders the icon with CSS classes applied to the SVG element.

```php
$html = svg('akar-bluetooth', 'w-6 h-6 text-gray-500')->toHtml();
// <svg class="w-6 h-6 text-gray-500" xmlns="..." ...></svg>
```

--------------------------------

### Config default class merging

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

With Config::set('blade-akar-icons.class', 'awesome'), this renders class="awesome w-6 h-6".

```php
$html = svg('akar-bluetooth', 'w-6 h-6')->toHtml();
```

--------------------------------

### Adding styles via array form

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Renders the icon with an inline style attribute using the array form for classes.

```php
$html = svg('akar-bluetooth', ['style' => 'color: #555'])->toHtml();
// <svg style="color: #555" xmlns="..." ...></svg>
```

--------------------------------

### svg()

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Resolves an icon from the registered 'akar' set by its prefixed name and returns a BladeUI\Icons\Svg instance. The returned instance's toHtml() method renders the icon markup.

```APIDOC
## [FUNCTION] svg()

### Description
Resolves an icon from the registered 'akar' set by its prefixed name and returns a BladeUI\Icons\Svg instance. The returned instance's toHtml() method renders the icon markup.

### Signature
```php
svg(string $name, string|array $classes = '', array $attributes = [])
```

### Parameters
- **$name** (string) - Required - Fully prefixed icon name, e.g. `'akar-bluetooth'` (set prefix `'akar'` + icon identifier)
- **$classes** (string|array) - Optional - CSS classes; an array form maps attribute names to values (e.g. `['style' => 'color: #555']`)
- **$attributes** (array) - Optional - Additional attributes applied to the `<svg>` element

### Return Value
Returns a `BladeUI\Icons\Svg` instance whose `toHtml()` method renders the icon markup.

### Examples

Basic rendering:
```php
$html = svg('akar-bluetooth')->toHtml();
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M5 7L17 17L11 22V2L17 7L5 17" .../></svg>
```

Adding classes:
```php
$html = svg('akar-bluetooth', 'w-6 h-6 text-gray-500')->toHtml();
// <svg class="w-6 h-6 text-gray-500" xmlns="..." ...></svg>
```

Adding styles via the array form:
```php
$html = svg('akar-bluetooth', ['style' => 'color: #555'])->toHtml();
// <svg style="color: #555" xmlns="..." ...></svg>
```

Config default class merging — with `Config::set('blade-akar-icons.class', 'awesome')`, this renders `class="awesome w-6 h-6"`:
```php
$html = svg('akar-bluetooth', 'w-6 h-6')->toHtml();
```
```

--------------------------------

### Blade component signature for akar icons

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Generic usage pattern for any icon component. Replace {icon-name} with an icon identifier from the icon index and provide any HTML/SVG attributes to apply to the rendered <svg> root element.

```blade
<x-akar-{icon-name} {attribute}="{value}" ... />
```

--------------------------------

### Publish config file

Source: https://github.com/codeat3/blade-akar-icons/blob/main/README.md

Publish the blade-akar-icons.php config file to customize default classes and attributes.

```bash
php artisan vendor:publish --tag=blade-akar-icons-config
```

--------------------------------

### svg() helper signature

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Signature of the global svg() helper as consumed by this package. It resolves icons from registered sets by their prefixed name and returns a BladeUI\Icons\Svg instance.

```php
svg(string $name, string|array $classes = '', array $attributes = [])
```

--------------------------------

### Combining config default class with passed class

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

When blade-akar-icons.class is set to 'awesome', this renders class="awesome w-6 h-6" on the <svg>. The config class is merged first, then the passed class.

```blade
<x-akar-bluetooth class="w-6 h-6"/>
```

--------------------------------

### Manual provider registration in config/app.php or bootstrap/providers.php

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/blade-akar-icons-service-provider.md

Manual registration of the Blade Akar Icons service provider, needed only if auto-discovery is disabled. Place in config/app.php for Laravel < 11 or bootstrap/providers.php for Laravel 11+.

```php
// config/app.php (Laravel < 11) or bootstrap/providers.php (Laravel 11+)
'providers' => [
    // ...
    BladeUI\Icons\BladeIconsServiceProvider::class,
    Codeat3\BladeAkarIcons\BladeAkarIconsServiceProvider::class,
],
```

--------------------------------

### Rendered SVG root attributes for akar icons

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Baseline root attributes preserved in the rendered output for every bundled SVG. Paths draw with stroke or fill set to currentColor, so the icon color follows the CSS color property.

```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
```

--------------------------------

### <x-akar-{icon-name}>

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/icon-components.md

Anonymous Blade component that renders an Akar icon as an inline SVG. The component name is derived from the icon identifier (e.g., bluetooth.svg → akar-bluetooth) and accepts any HTML/SVG attributes to apply to the root <svg> element.

```APIDOC
## [BLADE] <x-akar-{icon-name}>

### Description
Renders an Akar icon as an inline SVG element. The component name is derived from the icon identifier (e.g., `bluetooth.svg` → `akar-bluetooth`). Attributes are applied to the root `<svg>` element.

### Signature
```blade
<x-akar-{icon-name} {attribute}="{value}" ... />
```

### Parameters
#### Attributes
- **class** (string) - Optional - CSS classes applied to the rendered `<svg>`. When the config default class is set, both are merged: config class first, then the passed class.
- **style** (string) - Optional - Inline CSS styles applied to the rendered `<svg>` root element.
- **any other attribute** (string) - Optional - Passed through to the rendered `<svg>` root element (e.g., `width`, `height`, `viewbox`, `fill`, `stroke`).

### Examples
Basic usage (self-closing component):
```blade
<x-akar-bluetooth/>
```

Passing classes (renders `class="w-6 h-6 text-gray-500"` on the `<svg>`):
```blade
<x-akar-bluetooth class="w-6 h-6 text-gray-500"/>
```

Inline styling:
```blade
<x-akar-bluetooth style="color: #555"/>
```

Combined with a config default class — with `blade-akar-icons.class` set to `'awesome'`, the following renders `class="awesome w-6 h-6"`:
```blade
<x-akar-bluetooth class="w-6 h-6"/>
```

### Rendered Markup
Each bundled SVG has the following baseline root attributes, which are preserved in the rendered output:
```html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
```
Paths inside the icon draw with `stroke="currentColor"` (fill-style icons use `fill="currentColor"` on their paths), so the color follows the `color` CSS property of the element or any passed style/class.
```

--------------------------------

### Set default dimensions for icons

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/configuration.md

Configuration snippet that sets default width and height attributes for all icons in the set. These attributes are applied to every icon unless overridden.

```php
'attributes' => [
    'width' => 24,
    'height' => 24,
],
```

--------------------------------

### Use inline styles on icon component

Source: https://github.com/codeat3/blade-akar-icons/blob/main/README.md

Apply inline styles directly to the icon component.

```blade
<x-akar-bluetooth style="color: #555"/>
```

--------------------------------

### BladeAkarIconsServiceProvider class declaration

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/api-reference/blade-akar-icons-service-provider.md

The final service provider class that registers the Akar Icons SVG set with the Blade Icons Factory. It merges configuration, adds the icon set with a default path, and publishes assets and config when running in console.

```php
<?php

declare(strict_types=1);

namespace Codeat3\BladeAkarIcons;

use BladeUI\Icons\Factory;
use Illuminate\Contracts\Container\Container;
use Illuminate\Support\ServiceProvider;

final class BladeAkarIconsServiceProvider extends ServiceProvider
{
    public function register(): void
    {
        $this->registerConfig();

        $this->callAfterResolving(Factory::class, function (Factory $factory, Container $container) {
            $config = $container->make('config')->get('blade-akar-icons', []);

            $factory->add('akar-icons', array_merge(['path' => __DIR__ . '/../resources/svg'], $config));
        });
    }

    private function registerConfig(): void
    {
        $this->mergeConfigFrom(__DIR__ . '/../config/blade-akar-icons.php', 'blade-akar-icons');
    }

    public function boot(): void
    {
        if ($this->app->runningInConsole()) {
            $this->publishes([
                __DIR__ . '/../resources/svg' => public_path('vendor/blade-akar-icons'),
            ], 'blade-akar-icons');

            $this->publishes([
                __DIR__ . '/../config/blade-akar-icons.php' => $this->app->configPath('blade-akar-icons.php'),
            ], 'blade-akar-icons-config');
        }
    }
}
```

--------------------------------

### Pass classes to icon component

Source: https://github.com/codeat3/blade-akar-icons/blob/main/README.md

Add CSS classes to the icon component for styling.

```blade
<x-akar-bluetooth class="w-6 h-6 text-gray-500"/>
```

--------------------------------

### Register icon set with factory

Source: https://github.com/codeat3/blade-akar-icons/blob/main/_autodocs/configuration.md

Adds the 'akar-icons' icon set to the Blade Icons factory, merging the package's default path with user configuration. The 'path' key is always set to the bundled resources/svg directory, and user config values override the default.

```php
$factory->add('akar-icons', array_merge(['path' => __DIR__ . '/../resources/svg'], $config));
```

--------------------------------

### Use icon as self-closing Blade component

Source: https://github.com/codeat3/blade-akar-icons/blob/main/README.md

Use the icon component in a Blade view. It compiles to an SVG.

```blade
<x-akar-bluetooth/>
```
Tokens:
Raw