README

Advanced Icon Field for Silverstripe. It can handle up to 4 different types of icon sources:

• font icons (css file)
• directory (icons within specific folder)
• upload folder (folder through SilverStripe assets module)
• json (source file)

Install

composer require goldfinch/icon-field

Available Taz commands

If you haven't used Taz🌪️ before, taz file must be presented in your root project folder cp vendor/goldfinch/taz/taz taz

Add new icon set

php taz iconset

Publish icon templates

php taz vendor:icon-field:templates

Quick Bootstrap icon set setup

1. Copy json set of all current bootstrap icons

cp vendor/goldfinch/icon-field/examples/icon-bootstrap.json app/_schema/icon-bootstrap.json

1. Add config for this set

Goldfinch\IconField\Forms\IconField:
  icons_sets:
    bootstrap:
      type: font
      source: 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css'

1. Use field with this set

use Goldfinch\IconField\Forms\IconField;

IconField::create('bootstrap', 'Icon');

Usage

use Goldfinch\IconField\Forms\IconField;

class Page
{
    private static $db = [
        'Icon' => 'Icon',
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->insertBefore('Content', IconField::create('icon_set_name', 'Icon'));
    }
}

<!-- template.ss -->

$Icon
$Icon.Key
$Icon.Size(100).Color(green)
$Icon.URL
$Icon.Title
$Icon.IconSetName
$Icon.IconType

Vite support

If you use Vite as a front-end build tool, you might want to include a dynamic vite link as a source for your icons. Easy, just use prefix vite: followed by relative path to the file of your build, as you have it in your vite.config.js.

example:

Goldfinch\IconField\Forms\IconField:
  icons_sets:
    my_icons_set:
      type: font
      source: 'vite:themes/main/src/icons.scss'

Previews

Icon (unloaded sets)

Icon (loaded sets)

Demo output (all types)

Sidenotes

• If your set contains icons as PNG files, make sure to set property vector: false in your set configuration

• When using dir set type, direct folder for icons in public (eg: public/my-icons) might have access issues due to rules in .htaccess. If that's your case, just move your dir with icons to assets dir, (eg: public/assets/my-icons) and update source parameter in config file.

License

The MIT License (MIT)