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
+ button_icon: star

Note that the option here is called button_icon because icon key is a reserved key by Statamic.

Custom Icon Sets

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

Example: Lucide

The example steps below will install and use icons from the Lucide icon set, used in the examples above.

Install icon set:

npm install lucide-static

// resource/js/cp.js
 
import { registerIconSet } from '@statamic/cms/ui';
 
Statamic.booting(() => {
    registerIconSet('lucide', import.meta.glob(
        '../../node_modules/lucide-static/icons/*.svg',
        { query: '?raw', import: 'default' }
    ));
});

Switch field to use icon set:

visibility:
  type: icon_group
  display: Visibility
+ set: lucide
  options:
    -
      value: Public
      key: public
      icon: eye
    -
      value: Private
      key: private
      icon: eye-off

License

MIT