Problem/Motivation

Editors building pages in Drupal Canvas pick an icon from a select list of icon names. There is no preview and no way to search. On the Vartheme BS5 themes that list runs to thousands of entries.

Canvas Icon Picker replaces that select with a searchable, visual picker inside the Canvas editor. It builds on core's Icon API through UI Icons, which this recipe already installs. UI Icons on its own has no Drupal Canvas support; canvas_icon_picker is what adds it.

This recipe is the right home for it. It already installs ui_icons, so the picker sits next to the thing it depends on, and Varbase Starter, Educare, Horizon Aid and RightUp all inherit it from one file instead of each repeating the same four lines.

Today it is declared in the wrong place: varbase_starter installs it and requires it, so the three other site templates do not get it at all, and Starter carries a dependency that is not specific to Starter. That is handled in a companion issue.

Steps to reproduce

  1. Build a Varbase 11 site with any site template other than Varbase Starter, for example Educare or Horizon Aid.
  2. drush pm:list --status=enabled | grep canvas_icon_picker returns nothing.
  3. Open any Canvas page in the editor and select a Button, a Badge, an Icon or an Icon Card. The Icon field is a plain select list of names.

Proposed resolution

Install the module here, beside ui_icons, and set the packs every Vartheme BS5 theme ships.

recipe.yml:

install:
  # ...
  - ui_icons
  - canvas_icon_picker

config:
  actions:
    canvas_icon_picker.settings:
      simpleConfigUpdate:
        allowed_packs:
          - bootstrap_icons
          - vartheme_social

composer.json: "drupal/canvas_icon_picker": "~1.0.3".

The setting is allowed_packs, per the module's config/schema/canvas_icon_picker.schema.yml; its default is an empty map. bootstrap_icons and vartheme_social are the pack ids each Vartheme BS5 theme declares in its <theme>.icons.yml, so the same two values are correct for every current template.

1.0.3 is the first release carrying #3619510 and #3619785, which are what let a component prop keep its curated enum and still get the picker. Without those, a prop that curates its icons silently keeps the old select.

Installing the module is on its own not enough for an editor to see the picker. Each theme still has to opt its icon props in with x-canvas-icon, and each site template still has to re-export its Canvas component configs. Those are per-project and tracked separately:

What was verified

Two fresh Varbase 11 builds, each installing a different site template with this change in place and with the per-template declarations removed (Drupal core 11.4.5, PHP 8.4, Drupal Canvas 1.10.1, UI Icons 1.1.2, Canvas Icon Picker 1.0.3, Varbase Admin Base 1.0.0-rc1):

  • Educare (theme 1.0.0-alpha4) and Horizon Aid (theme 1.0.0-alpha3) both install green with drush site:install varbase installer_site_template_form.add_ons=<template>.
  • canvas_icon_picker is enabled on both, from this recipe alone, with neither site-template recipe declaring it.
  • canvas_icon_picker.settings:allowed_packs reads back as bootstrap_icons, vartheme_social on both.
  • Every Canvas page returns 200 anonymously on both (Educare 4 checked, Horizon Aid all 8). Anonymous requests to /canvas-icon-picker/index return 403 on both.
  • Zero log entries at Error or worse on either site.
  • Installing the module pulled no additional dependencies: Drupal Canvas is already present in Varbase 11.

Drafted with AI assistance (AI-Generated: Yes), per the Drupal AI policy. Every claim above was verified by running it.

Remaining tasks

  • ✅ File an issue
  • ❌ Addition/Change/Update/Fix
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support
  • ➖ User Guide Documentation support
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ❌ Reviewed by a human
  • ❌ Code review by maintainers
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes
  • ❌ Release

User interface changes

  • None from this recipe on its own. It makes the picker available; the Icon field only changes once a theme opts its props in.
  • Adds a settings page at /admin/config/content/canvas-icon-picker.
  • No change for site visitors.

API changes

  • N/A

Data model changes

  • Adds one module dependency, drupal/canvas_icon_picker ~1.0.3, and one config object, canvas_icon_picker.settings.

Release notes snippet

  • Varbase Admin Base now installs the Canvas Icon Picker and sets the default icon packs, so every Varbase site template inherits a searchable, visual icon picker in the Drupal Canvas editor from one place.
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

rajab natshah created an issue. See original summary.

rajab natshah’s picture

Title: Install the Canvas Icon Picker and set the default icon packs, so every Varbase site template inherits it » Add Canvas Icon Picker and set the default icon packs, so every Varbase site template inherits it

  • rajab natshah committed 3c721790 on 1.0.x
    feat: #3620064 Add Canvas Icon Picker and set the default icon packs
    
rajab natshah’s picture

Status: Active » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.