Icon Button Fieldtypes - a Statamic Addon

Icon-only button fieldtypes for compact toggles and switches.

Installation

Install the addon via Composer:

composer require daun/statamic-icon-button-fieldtypes

Fieldtypes

The addon ships with three fieldtypes, each extending a native Statamic fieldtype:

Single-choice Icon Group extends the native Button Group
Multi-Choice Icon Toggles extends the Checkboxes fieldtype
Boolean Icon Toggle extends the Toggle fieldtype

Icon Group

The Icon Group fieldtype extends the native Button Group fieldtype and allows selecting a single option from a predefined set of options.

align:
  display: Align
- type: button_group
+ type: icon_group
  options:
    -
      value: Left
      key: left
+     icon: align-start-vertical
    -
      value: Right
      key: right
+     icon: align-end-vertical

Icon Toggles

The Icon Toggles fieldtype extends the native Checkboxes fieldtype and allows selecting one or more options from a predefined set of options.

playback:
  display: Playback options
- type: checkboxes
+ type: icon_toggles
  options:
    -
      value: sound
      key: sound
+     icon: volume
    -
      value: Loop
      key: loop
+     icon: repeat
    -
      value: Captions
      key: captions
+     icon: captions

Icon Toggle

The Icon Toggle fieldtype extends the native Toggle fieldtype and allows switching a single value on or off.

featured:
  display: Featured
- type: toggle
+ type: icon_toggle
+ icon: star

Optionally, show a different icon while the toggle is on:

featured:
  display: Featured
  type: icon_toggle
  icon: star
+ icon_when_true: star-filled

Note: These options were called button_icon and button_icon_when_true, as icon was reserved by Statamic 6.32 and below. The old keys are still read and get rewritten the next time the field is saved in the control panel.

Custom Icon Sets

Icons are pulled from the built-in icon set. To use icons from a different set, register a custom icon set and change the set option of each field to the desired set.

Example: Lucide

Install and use the Lucide icon set, used in the examples above.

npm install lucide-static

use Statamic\Facades\Icon;
 
class AppServiceProvider extends ServiceProvider {
  public function register() {
    Icon::register('lucide', base_path('node_modules/lucide-static/icons'));
  }
}

Switch the field to use the custom icon set.

featured:
  display: Featured
  type: icon_toggle
  icon: star
+ set: lucide

Example: Local SVGs

You can also use local SVG icons in your resources folder.

Icon::register('payments', resource_path('icons/payments'));

License

MIT