README

Ein flexibles Icon-Auswahl-Feld für SilverStripe CMS mit Unterstützung für verschiedene Icon-Bibliotheken.

Features

Visueller Icon-Picker: Ansprechendes Grid-Layout mit Icon-Vorschau
Suchfunktion: Schnelles Filtern von Icons nach Name
Erweiterbar: Unterstützung für verschiedene Icon-Bibliotheken durch das IconProviderInterface
Bootstrap Icons: Standardmäßig mit Bootstrap Icons (2000+ Icons)
Automatisches Parsing: Icons werden automatisch aus der CSS-Datei geparst
Intelligentes Caching: Geparste Icons werden für 1 Woche gecached
Responsive: Funktioniert auf allen Bildschirmgrößen

Installation

Das Modul ist als lokales Modul im Projekt eingebunden.

composer update

Nach der Installation:

vendor/bin/sake dev/build flush=all

Verwendung

In DataObjects oder Pages

use MoritzSauer\IconField\Forms\IconField;

class MyPage extends Page
{
    private static $db = [
        'Icon' => 'Varchar(100)',
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();
        
        $fields->addFieldToTab(
            'Root.Main',
            IconField::create('Icon', 'Icon auswählen')
        );
        
        return $fields;
    }
}

Im Template

<% if $Icon %>
    <i class="bi $Icon"></i>
<% end_if %>

Automatisches Icon-Parsing

Der BootstrapIconProvider lädt die Icons automatisch aus der Bootstrap Icons CSS-Datei. Die Icons werden geparst und für 1 Woche gecached, um die Performance zu optimieren.

Cache manuell aktualisieren

Falls Sie den Icon-Cache manuell aktualisieren möchten:

use MoritzSauer\IconField\IconProvider\BootstrapIconProvider;

$provider = new BootstrapIconProvider();
$provider->refreshCache();

Eigene Icon-Provider erstellen

Sie können eigene Icon-Provider erstellen, indem Sie das IconProviderInterface implementieren:

namespace MyVendor\MyModule\IconProvider;

use MoritzSauer\IconField\IconProvider\IconProviderInterface;

class FontAwesomeProvider implements IconProviderInterface
{
    public function getIcons(): array
    {
        return [
            'fa-home' => 'Home',
            'fa-user' => 'User',
            // ...
        ];
    }

    public function getIconPrefix(): string
    {
        return 'fa';
    }

    public function getCdnUrl(): ?string
    {
        return 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
    }

    public function getName(): string
    {
        return 'Font Awesome';
    }

    public function renderIcon(string $iconIdentifier): string
    {
        return sprintf('<i class="%s %s"></i>', $this->getIconPrefix(), $iconIdentifier);
    }
}

Provider in der Konfiguration registrieren

# app/_config/iconfield.yml
SilverStripe\Core\Injector\Injector:
  MoritzSauer\IconField\IconProvider\IconProviderInterface:
    class: MyVendor\MyModule\IconProvider\FontAwesomeProvider

Konfiguration

Standard-Provider ändern

In app/_config/iconfield.yml:

SilverStripe\Core\Injector\Injector:
  MoritzSauer\IconField\IconProvider\IconProviderInterface:
    class: MoritzSauer\IconField\IconProvider\BootstrapIconProvider

Cache-Konfiguration

Der Icon-Cache ist bereits konfiguriert. Falls Sie die Cache-Einstellungen anpassen möchten:

# app/_config/iconfield.yml
SilverStripe\Core\Injector\Injector:
  Psr\SimpleCache\CacheInterface.iconfield:
    factory: SilverStripe\Core\Cache\CacheFactory
    constructor:
      namespace: 'iconfield'

Lizenz

BSD-3-Clause

moritz-sauer-13 / silverstripe-iconfield

Maintainers

Details