loadsys / cakephp-svg-icon
SvgIcon plugin for CakePHP
Installs: 502
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 4
Forks: 0
Open Issues: 0
Type:cakephp-plugin
Requires
- php: >=8.2
- cakephp/cakephp: ^5.0
Requires (Dev)
- cakephp/cakephp-codesniffer: ^5.0
- phpstan/phpstan: ^1.10
- phpunit/phpunit: ^10.1
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.