# catkinfox/iconpicker architecture

> Architecture diagram of the GitHub repository catkinfox/iconpicker, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/catkinfox/iconpicker
- Repository: https://github.com/catkinfox/iconpicker
- Video tour (about a minute): https://gitdiagram.com/catkinfox/iconpicker/video

## Overview

This OctoberCMS plugin registers an icon-picker form widget for backend forms and Tailor blueprints. The widget loads its icon catalog, renders a form partial, and loads the picker’s browser assets; users search and select an icon, which the widget normalizes for saving. Search and preview capabilities are documented in the README, but the JavaScript and partial contents were not sampled, so their internal behavior is not detailed here.

Main entry points: [`formwidgets/IconPicker.php`](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/IconPicker.php) (Icon picker widget), [`formwidgets/iconpicker/assets/js/iconpicker.js`](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/assets/js/iconpicker.js) (Picker behavior), [`formwidgets/iconpicker/partials/_iconpicker.htm`](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/partials/_iconpicker.htm) (Picker partial), [`Plugin.php`](https://github.com/catkinfox/iconpicker/blob/main/Plugin.php) (Plugin registration)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_integration["OctoberCMS Integration"]
  node_plugin["Plugin registration<br/>[Plugin.php]"]
end

subgraph group_widget["Picker Widget"]
  node_picker["Icon picker widget<br/>[IconPicker.php]"]
  node_catalog["Icon catalog"]
end

subgraph group_assets["Picker Interface"]
  node_partial["Picker partial<br/>[_iconpicker.htm]"]
  node_javascript["Picker behavior<br/>[iconpicker.js]"]
  node_stylesheet["Picker styling<br/>[iconpicker.css]"]
end

node_form_author(("Form author"))
node_october["OctoberCMS form system"]

node_form_author -->|"configures field"| node_october
node_plugin -->|"registers widget"| node_october
node_october -->|"dispatches widget"| node_picker
node_picker -->|"reads icons"| node_catalog
node_picker -->|"renders partial"| node_partial
node_picker -->|"loads script"| node_javascript
node_picker -->|"loads styles"| node_stylesheet
node_picker -->|"returns saved value"| node_october
node_javascript -->|"enhances interface"| node_partial

click node_plugin "https://github.com/catkinfox/iconpicker/blob/main/Plugin.php"
click node_picker "https://github.com/catkinfox/iconpicker/blob/main/formwidgets/IconPicker.php"
click node_catalog "https://github.com/catkinfox/iconpicker/blob/main/data/fontawesome-icons.json"
click node_partial "https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/partials/_iconpicker.htm"
click node_javascript "https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/assets/js/iconpicker.js"
click node_stylesheet "https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/assets/css/iconpicker.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_plugin toneBlue
class node_picker,node_catalog toneAmber
class node_partial,node_javascript,node_stylesheet toneMint
class node_form_author,node_october toneIndigo
```

## Components

### OctoberCMS Integration

- [Plugin registration](https://github.com/catkinfox/iconpicker/blob/main/Plugin.php): `Plugin.php`

### Picker Widget

- [Icon picker widget](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/IconPicker.php): `formwidgets/IconPicker.php`
- [Icon catalog](https://github.com/catkinfox/iconpicker/blob/main/data/fontawesome-icons.json): `data/fontawesome-icons.json`

### Picker Interface

- [Picker partial](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/partials/_iconpicker.htm): `formwidgets/iconpicker/partials/_iconpicker.htm`
- [Picker behavior](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/assets/js/iconpicker.js): `formwidgets/iconpicker/assets/js/iconpicker.js`
- [Picker styling](https://github.com/catkinfox/iconpicker/blob/main/formwidgets/iconpicker/assets/css/iconpicker.css): `formwidgets/iconpicker/assets/css/iconpicker.css`

### Other components

- **Form author**
- **OctoberCMS form system**

## Connections

- Form author → OctoberCMS form system: configures field
- Plugin registration → OctoberCMS form system: registers widget
- OctoberCMS form system → Icon picker widget: dispatches widget
- Icon picker widget → Icon catalog: reads icons
- Icon picker widget → Picker partial: renders partial
- Icon picker widget → Picker behavior: loads script
- Icon picker widget → Picker styling: loads styles
- Icon picker widget → OctoberCMS form system: returns saved value
- Picker behavior → Picker partial: enhances interface