Craft.ui.icon()

Author: brandonkelly

CHANGELOG-WIP.md

@@ -58,9 +58,11 @@
 - Added `craft\services\Elements::getBulkOpKeys()`.
 - Added `craft\services\Search::indexElementIfQueued()`.
 - Added `craft\services\Search::queueIndexElement()`.
+- Added `craft\web\View::registerIcon()`.
 - Added `craft\web\assets\codemirror\CodeMirrorAsset`.
 - Added `Craft.ui.createIconPicker()`.
 - Added `Craft.ui.createIconPickerField()`.
+- Added `Craft.ui.icon()`.
 - `craft\base\Element::fieldLayoutFields()` now has an `$editableOnly` argument.
 
 ### System

src/controllers/AppController.php

@@ -131,6 +131,22 @@ public function actionResourceJs(string $url): Response
         return $this->asRaw($response->getBody());
     }
 
+    /**
+     * Returns the HTML for a control panel icon.
+     *
+     * @return Response
+     * @since 5.7.0
+     */
+    public function actionIconSvg(): Response
+    {
+        $this->requireCpRequest();
+        $this->requireAcceptsJson();
+
+        return $this->asJson([
+            'iconSvg' => Cp::iconSvg($this->request->getRequiredParam('icon')),
+        ]);
+    }
+
     /**
      * Returns the latest Craftnet API headers.
      *

src/web/View.php

@@ -309,7 +309,6 @@ class View extends \yii\web\View
      */
     private array $_assetBundleBuffers = [];
 
-
     /**
      * @var array
      * @see startJsImportBuffer()
@@ -335,6 +334,12 @@ class View extends \yii\web\View
      */
     private array $_jsImports = [];
 
+    /**
+     * @var string[] The icons that should be registered to the page.
+     * @see registerIcons()
+     */
+    private array $_icons = [];
+
     /**
      * @var callable[][]
      */
@@ -1609,6 +1614,20 @@ public function registerTranslations(string $category, array $messages): void
         $this->registerJs($js, self::POS_BEGIN);
     }
 
+    /**
+     * Registers icons for `Craft.ui.icon()`.
+     *
+     * @param string[] $icons The icons to be registered
+     * @since 5.7.0
+     */
+    public function registerIcons(array $icons): void
+    {
+        $this->_icons = [
+            ...$this->_icons,
+            ...array_flip($icons),
+        ];
+    }
+
     /**
      * Returns the active namespace.
      *
@@ -2256,6 +2275,18 @@ protected function renderBodyEndHtml($ajaxMode): string
             $lines[] = implode("\n", $this->_html[self::POS_END]);
         }
 
+        if (!empty($this->_icons)) {
+            $icons = [];
+            foreach (array_keys($this->_icons) as $icon) {
+                $icons[$icon] = Cp::iconSvg($icon);
+            }
+            $iconsJs = Json::encode($icons);
+            $this->js[self::POS_END][] = <<<JS
+Craft.icons = $iconsJs;
+JS;
+            $this->_icons = [];
+        }
+
         $html = parent::renderBodyEndHtml($ajaxMode);
 
         return empty($lines) ? $html : implode("\n", $lines) . $html;

src/web/assets/cp/CpAsset.php

@@ -449,6 +449,30 @@ private function _registerTranslations(View $view): void
             '{attribute} should contain at least {min, number} {min, plural, one{character} other{characters}}.',
             '{attribute} should contain at most {max, number} {max, plural, one{character} other{characters}}.',
         ]);
+
+        $view->registerIcons([
+            'alert',
+            'arrow-down',
+            'arrow-left',
+            'arrow-right',
+            'arrow-up',
+            'arrows-rotate',
+            'asterisk',
+            'asterisk-slash',
+            'check',
+            'clipboard',
+            'edit',
+            'gear',
+            'image',
+            'image-slash',
+            'info',
+            'pencil',
+            'plus',
+            'remove',
+            'share',
+            'trash',
+            'xmark',
+        ]);
     }
 
     private function _craftData(): array

src/web/assets/cp/dist/cp.js

@@ -427,12 +427,14 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
       if (this.settings.sortable) {
         const axis = this.getElementSortAxis();
         actions.push({
-          icon:
-            axis === 'y'
-              ? 'arrow-up'
-              : Craft.orientation === 'ltr'
-                ? 'arrow-left'
-                : 'arrow-right',
+          icon: async () =>
+            await Craft.ui.icon(
+              axis === 'y'
+                ? 'arrow-up'
+                : Craft.orientation === 'ltr'
+                  ? 'arrow-left'
+                  : 'arrow-right'
+            ),
           label:
             axis === 'y'
               ? Craft.t('app', 'Move up')
@@ -445,12 +447,14 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
           },
         });
         actions.push({
-          icon:
-            axis === 'y'
-              ? 'arrow-down'
-              : Craft.orientation === 'ltr'
-                ? 'arrow-right'
-                : 'arrow-left',
+          icon: async () =>
+            await Craft.ui.icon(
+              axis === 'y'
+                ? 'arrow-down'
+                : Craft.orientation === 'ltr'
+                  ? 'arrow-right'
+                  : 'arrow-left'
+            ),
           label:
             axis === 'y'
               ? Craft.t('app', 'Move down')
@@ -467,7 +471,7 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
       if (this.settings.allowRemove) {
         if (this.settings.elementType) {
           actions.push({
-            icon: 'arrows-rotate',
+            icon: async () => await Craft.ui.icon('arrows-rotate'),
             label: Craft.t('app', 'Replace'),
             callback: () => {
               this._$replaceElement = $element;
@@ -477,7 +481,7 @@ Craft.BaseElementSelectInput = Garnish.Base.extend(
         }
 
         actions.push({
-          icon: 'remove',
+          icon: async () => await Craft.ui.icon('remove'),
           label: Craft.t('app', 'Remove'),
           callback: () => {
             // If the element is selected, remove *all* the selected elements

src/web/assets/cp/dist/cp.js.map

@@ -310,12 +310,14 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
       if (this.settings.sortable) {
         const axis = this.getComponentSortAxis();
         actions.push({
-          icon:
-            axis === 'y'
-              ? 'arrow-up'
-              : Craft.orientation === 'ltr'
-                ? 'arrow-left'
-                : 'arrow-right',
+          icon: async () =>
+            await Craft.ui.icon(
+              axis === 'y'
+                ? 'arrow-up'
+                : Craft.orientation === 'ltr'
+                  ? 'arrow-left'
+                  : 'arrow-right'
+            ),
           label:
             axis === 'y'
               ? Craft.t('app', 'Move up')
@@ -328,12 +330,14 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
           },
         });
         actions.push({
-          icon:
-            axis === 'y'
-              ? 'arrow-down'
-              : Craft.orientation === 'ltr'
-                ? 'arrow-right'
-                : 'arrow-left',
+          icon: async () =>
+            await Craft.ui.icon(
+              axis === 'y'
+                ? 'arrow-down'
+                : Craft.orientation === 'ltr'
+                  ? 'arrow-right'
+                  : 'arrow-left'
+            ),
           label:
             axis === 'y'
               ? Craft.t('app', 'Move down')
@@ -348,7 +352,7 @@ Craft.ComponentSelectInput = Garnish.Base.extend(
       }
 
       actions.push({
-        icon: 'remove',
+        icon: async () => await Craft.ui.icon('remove'),
         label: Craft.t('app', 'Remove'),
         callback: () => {
           this.removeComponent($component);

src/web/assets/cp/src/js/BaseElementSelectInput.js

@@ -652,12 +652,12 @@ Craft.EditableTable = Garnish.Base.extend(
 
         menu.addItems([
           {
-            icon: 'arrow-up',
+            icon: async () => await Craft.ui.icon('arrow-up'),
             label: Craft.t('app', 'Move up'),
             attributes: {'data-action': 'moveUp'},
           },
           {
-            icon: 'arrow-down',
+            icon: async () => await Craft.ui.icon('arrow-down'),
             label: Craft.t('app', 'Move down'),
             attributes: {'data-action': 'moveDown'},
           },

src/web/assets/cp/src/js/ComponentSelectInput.js

@@ -953,7 +953,7 @@ Craft.ElementEditor = Garnish.Base.extend(
       const button = menu.addItem(
         {
           type: 'button',
-          icon: 'edit',
+          icon: async () => await Craft.ui.icon('edit'),
           label: Craft.t('app', 'Edit draft settings'),
         },
         group