loadsys/cakephp-svg-icon

SvgIcon plugin for CakePHP

v2.0.0 2024-02-11 15:34 UTC

Requires

• php: >=8.2
• cakephp/cakephp: ^5.0

Requires (Dev)

• cakephp/cakephp-codesniffer: ^5.0
• phpstan/phpstan: ^1.10
• phpunit/phpunit: ^10.1

MIT

README

This plugin offers an easy way to display SVG icons, with options to customize and/or cache them. It's packaged as a trait that can be used anywhere in your app, with a helper (using the trait) for convenience and caching.

Installation

You can install this plugin into your CakePHP application using composer.

The recommended way to install composer packages is:

composer require loadsys/cakephp-svg-icon

Versions

• Tags 1.x are for CakePHP v4.x.
• Tags 2.x are for CakePHP v5.x.

Configuration

Icons should be added to config/app_svg_icon.php - see the example included in config directory for the expected format. Any SVG icon should work, such as heroicons or Bootstrap Icons.

Icons will be cached using the default cache config. This can be changed by supplying a different cache config when loading the helper:

/*
 * src/View/AppView.php
 */
public function initialize(): void
{
    $this->loadHelper('SvgIcon.SvgIcon', [
        'cacheConfig' => 'svg_icon',
    ]);
}

This example would use the svg_icon cache config, which can be set in config/app/php:

/*
 * Optional configuration settings for the SvgIcon plugin cache
 */
'svg_icon' => [
    'className' => FileEngine::class,
    'prefix' => 'svg_icon_',
    'path' => CACHE . 'views' . DS,
    'duration' => '+1 years',
    'url' => env('CACHE_DEFAULT_URL', null),
]

Usage

Configured icons can be displayed by name - here's an example based on the names used in the sample config/app_svg_icon.php.

<?= $this->SvgIcon->get('heroicon.home') ?>
<?= $this->SvgIcon->get('bootstrap.bi-house') ?>

To change default icon attributes, options can be provided:

<?= $this->SvgIcon->get('heroicon.home', [
  'class' => 'text-gray-300 h-9 w-9',
  'stroke-width' => '2',
]) ?>

Note that attribute overrides apply only to the svg tag and not it's child path tag.