CakePHP Sandbox App: TemplatingExamples

SVG Icons

Icon sets can be rendered as inline SVG instead of using icon fonts or data attributes. This provides better customization, accessibility, and consistent rendering across browsers.

Why SVG is Better Than Classic Font Icons

Advantages of SVG Icons:

More Consistent Rendering: SVG icons render identically across all devices and browsers, without anti-aliasing issues that can affect font icons
Greater Customization: You can style individual parts of an SVG icon, apply gradients, and use CSS transformations more effectively
Better Accessibility: SVG icons can include proper ARIA labels and descriptions, making them more accessible to screen readers
No Font Loading Required: SVG icons don't require loading separate font files, reducing HTTP requests and potential FOUT (Flash of Unstyled Text)
Scalability: True vector graphics that scale perfectly at any size without pixelation
CSS Styling: Can be styled with CSS properties like fill, stroke, and currentColor for dynamic theming
Multi-color Support: Unlike icon fonts, SVG can display multiple colors in a single icon

Configuration: JSON Map Mode (Recommended)

The recommended approach is to use JSON map mode, where all icon definitions are loaded from a single JSON file. This provides the best performance.

JSON Map Benefits: Single file load, no per-icon I/O, better performance, automatically cached in memory

Configure Feather icons with JSON map in your app.php:

    'Icon' => [
        'sets' => [
            'feather' => [
                'class' => \Templating\View\Icon\FeatherIcon::class,
                'svgPath' => WWW_ROOT . 'assets/feather-icons/dist/icons.json',
            ],
        ],
    ],

When svgPath ends with .json, the plugin automatically uses JSON map mode.

Alternative: Individual Files Mode

You can also load icons from individual SVG files (useful for development or when using only a few icons):

    'Icon' => [
        'sets' => [
            'bs' => [
                'class' => \Templating\View\Helper\Icon\BootstrapIcon::class,
                'svgPath' => WWW_ROOT . 'assets/bootstrap-icons/icons/', // directory path
                'cache' => 'default', // Recommended when using individual files
            ],
        ],
    ],

Basic Usage (JSON Map Mode)


		<?php echo $this->Icon->render('heart'); ?>

results in:

(rendered as inline SVG from JSON map)

Customization Examples

Custom Colors and Stroke

Feather icons use strokes, which can be customized with CSS:


		<?php echo $this->Icon->render('heart', [], ['style' => 'stroke: #e74c3c; width: 2em; height: 2em;']); ?>

<?php echo $this->Icon->render('star', [], ['style' => 'stroke: #f39c12; fill: #f39c12; width: 2em; height: 2em;']); ?>

<?php echo $this->Icon->render('shield', [], ['style' => 'stroke: #27ae60; width: 2em; height: 2em;']); ?>

results in:

Custom CSS Classes

You can add custom CSS classes for advanced styling:


		// CSS
.icon-hover {
    stroke: #3498db;
    transition: all 0.3s ease;
    cursor: pointer;
}
.icon-hover:hover {
    stroke: #e74c3c;
    transform: scale(1.2) rotate(15deg);
}

// Template
<?php echo $this->Icon->render('smile', [], ['class' => 'icon-hover', 'style' => 'width: 2em; height: 2em;']); ?>

results in (hover over the icon):

Animated Icons


		<?php echo $this->Icon->render('refresh-cw', [], ['class' => 'icon-pulse', 'style' => 'stroke: #9b59b6; width: 2em; height: 2em;']); ?>

results in:

Accessibility


		<?php echo $this->Icon->render('info', [], [

	'role' => 'img',

	'aria-label' => 'Information icon',

	'style' => 'stroke: #3498db; width: 1.5em; height: 1.5em;',

]); ?>

results in:

Information with accessible icon

Performance Comparison

JSON Map Mode

✓ Single file read
✓ All icons loaded at once
✓ In-memory caching
✓ No per-icon I/O
✓ Best for production

Individual Files Mode

• Separate file per icon
• File I/O per icon
• Cache recommended
• Good for few icons
• Good for development

For individual files mode, enable CakePHP caching to reduce file I/O:

    'Icon' => [
        'sets' => [
            'bs' => [
                'class' => \Templating\View\Helper\Icon\BootstrapIcon::class,
                'svgPath' => WWW_ROOT . 'assets/bootstrap-icons/icons/',
                'cache' => 'default', // Highly recommended for individual files
            ],
        ],
    ],

More Examples (JSON Map Mode)

Various Feather icons rendered as SVG from JSON map with custom styling:

All icons loaded from a single JSON file for optimal performance!

Supported Icon Sets with SVG Mode

Bootstrap Icons: 1800+ icons (individual files mode)
Feather Icons: 280+ icons (JSON map mode) ✓ Recommended
Lucide: 1000+ icons (JSON map mode) - Modern Feather fork
Heroicons: 300+ icons (multiple styles)
FontAwesome: 2000+ icons (v4/v5/v6)
Material Icons: Google's icon set

Show all icon sets