goldfinch / icon-field
Advanced Icon Field for Silverstripe
Installs: 275
Dependents: 1
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Type:silverstripe-vendormodule
Requires
- php: >=8.0
- goldfinch/silverstripe-jsontext: ^2.1
- goldfinch/taz: ^2.0
- silverstripe/admin: ^2.0
- silverstripe/framework: ^5.0
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
- Copy json set of all current bootstrap icons
cp vendor/goldfinch/icon-field/examples/icon-bootstrap.json app/_schema/icon-bootstrap.json
- 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'
- 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 toassets
dir, (eg:public/assets/my-icons
) and updatesource
parameter in config file.
License
The MIT License (MIT)