Feature: Icon Mixins

.gitignore

@@ -28,6 +28,8 @@ node_modules
 public/swagger-ui
 tests/phpcs.cache.json
 themes/bootstrap5/scss/vendor/bootstrap
+themes/mixin-icons-fontawesome-6/css/vendor
+themes/mixin-icons-fontawesome-7/css/vendor
 local/DirLocations.ini
 local/config/vufind.bak
 local/config/vufind/*

module/VuFind/src/VuFind/View/Helper/Root/Icon.php

@@ -140,14 +140,20 @@ protected function mapIcon(string $name, $aliasTrail = []): array
         $rtl = $this->rtl ? '-rtl' : '';
         $icon = $this->iconMap[$name . $rtl] ?? $this->iconMap[$name] ?? $name;
         $set = $this->defaultSet;
-        $class = null;
 
         // Override set from config (ie. FontAwesome:icon)
         if (str_contains($icon, ':')) {
-            $parts = explode(':', $icon, 3);
+            $parts = explode(':', $icon, 2);
             $set = $parts[0];
             $icon = $parts[1];
-            $class = $parts[2] ?? null;
+        }
+
+        // Special case classes
+        $class = null;
+        if (str_contains($icon, ':')) {
+            $parts = explode(':', $icon, 2);
+            $icon = $parts[0];
+            $class = str_replace('.', ' ', $parts[1]);
         }
 
         // Special case: aliases:

module/VuFind/tests/unit-tests/src/VuFindTest/View/Helper/Root/IconTest.php

@@ -277,10 +277,10 @@ public function testUnicodeIcons(
         string|array $attrs
     ): void {
         $helper = $this->getIconHelper();
-        $expected = '<span class="icon icon--font icon--unicode'
+        $expected = '<span class="icon icon--text icon--unicode'
             . ($expectedClasses ? " $expectedClasses" : '') . '"'
             . ($expectedAttrs ? " $expectedAttrs" : '')
-            . ' role="img" aria-hidden="true" data-icon="&#x' . $expectedIcon . ';"></span>';
+            . ' role="img" aria-hidden="true">&#x' . $expectedIcon . ';</span>';
         $this->assertEquals($expected, trim($helper($icon, $attrs)));
     }
 
@@ -321,8 +321,7 @@ public function testImageIcon(): void
     {
         $plugins = ['imageLink' => $this->getMockImageLink('icons/baz.png')];
         $helper = $this->getIconHelper(null, null, $plugins);
-        $expected = '<img class="icon icon--img" src="baz.png" aria-hidden="true"'
-            . ' alt="">';
+        $expected = '<img class="icon icon--img" src="baz.png" aria-hidden="true" alt="">';
         $this->assertEquals($expected, $helper('bar'));
     }
 

themes/bootstrap5/scss/components/icons.scss

@@ -45,7 +45,7 @@ button .icon-link__label {
  * Styling by type
  */
 
-.icon--font {
+span.icon--font {
     display: inline-block;
     max-width: 1.25em;
     height: min-content; /* FF */
@@ -74,10 +74,6 @@ button .icon-link__label {
     vertical-align: text-bottom;
 }
 
-.icon--unicode:before {
-    content: attr(data-icon);
-}
-
 .show--closed,
 .collapsed .show--open {
     display: none;
@@ -141,4 +137,3 @@ button .icon-link__label {
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
-

themes/bootstrap5/templates/RecordDriver/DefaultRecord/explain-line.phtml

@@ -24,7 +24,7 @@
         $exactMatchClass = ($exactMatch ?? 'unknown') . '-match';
         echo '<span class="' . $exactMatchClass . '">"' . $this->escapeHtml($value) . '"</span> ' . $this->transEsc('in');
         echo ' <span class="field-name" title="' . $this->escapeHtmlAttr($description) . '">';
-        echo  $this->escapeHtml($name) . (!empty($description) ? $this->icon('question-circle') : '');
+        echo  $this->escapeHtml($name) . (!empty($description) ? $this->icon('explain') : '');
         echo '</span>';
         echo ($i < count($fieldName) - 1) ? ', ' : '';
       }

themes/bootstrap5/templates/RecordDriver/DefaultRecord/result-list-explain.phtml

@@ -21,7 +21,7 @@
       ></canvas>
     </span>
     <span title="<?=$this->transEscAttr('explain_result_list_hint')?>">
-      <?= $this->icon('question-circle') ?>
+      <?= $this->icon('explain') ?>
     </span>
   </a>
 <?php endif; ?>

themes/bootstrap5/templates/devtools/icon.phtml

@@ -2,7 +2,8 @@
   $title = $this->translate('Icons');
   $titleEsc = $this->escapeHtml($title);
   $this->headTitle($title);
-  $this->breadcrumbs()->set('Development Tools', $this->url('devtools-home'))
+  $this->breadcrumbs()
+    ->set('Development Tools', $this->url('devtools-home'))
     ->add($title, active: true);
 ?>
 <h1><?=$titleEsc?></h1>

themes/bootstrap5/templates/search/facet-list.phtml

@@ -41,7 +41,7 @@
       <?php if ($this->results->getParams()->supportsFacetFiltering($this->facet) === true): ?>
         <label id="facet-lightbox-filter-label" class="form-label" for="input-contains"><?=$this->transEsc('Filter') ?></label>
         <input id="input-contains" class="ajax_param form-control" data-name="contains" type="text" value="<?=htmlspecialchars($this->contains)?>" aria-label="<?=$this->transEscAttr('search_terms')?>">
-        <button id="btn-reset-contains" class="btn btn-default <?=strlen($this->contains) < 1 ? 'hidden' : ''?>" type="reset" aria-label="<?=$this->transEsc('searchform_reset_button')?>"><?=$this->icon('ui-reset-search')?></button>
+        <button id="btn-reset-contains" class="btn btn-default <?=strlen($this->contains) < 1 ? 'hidden' : ''?>" type="reset" aria-label="<?=$this->transEsc('searchform_reset_button')?>"><?=$this->icon('search-reset')?></button>
       <?php endif; ?>
 
       <?php $ajaxParams = ['facet' => $this->facet, 'facetexclude' => $this->exclude, 'facetop' => $this->operator, 'facetpage' => $this->page, 'facetsort' => $this->sort, 'urlBase' => $urlBase, 'searchAction' => $searchAction]; ?>

themes/bootstrap5/templates/search/searchbox.phtml

@@ -125,7 +125,7 @@
             type="button"
             title="<?=$this->transEscAttr('searchform_reset_button')?>"
             aria-label="<?=$this->transEscAttr('searchform_reset_button')?>"
-          ><?=$this->icon('ui-reset-search');?></button>
+          ><?=$this->icon('search-reset');?></button>
           <?php if (!empty($keyboardLayouts)): ?>
             <?php
             $this->assetManager()->appendScriptLink('vendor/js.cookie.js');
@@ -135,7 +135,7 @@
             ?>
             <div class="keyboard-selection dropdown">
               <button class="btn btn-primary dropdown-toggle" type="button" id="keyboard-selection-button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <?=$this->icon('keyboard-o') ?>
+                <?=$this->icon('keyboard') ?>
                 <?=$this->icon('dropdown-caret') ?>
               </button>
               <ul class="dropdown-menu" aria-labelledby="keyboard-selection-button">

themes/bootstrap5/theme.config.php

@@ -1,6 +1,9 @@
 <?php
 return [
     'extends' => 'root',
+    'mixins' => [
+        'mixin-icons-fontawesome-6',
+    ],
     'css' => [
         /**
          * Entries in this section can either be specified as array or as string.
@@ -115,249 +118,7 @@
         ],
     ],
     'icons' => [
-        'defaultSet' => 'FontAwesome',
-        'sets' => [
-            /**
-             * Define icon sets here.
-             *
-             * All sets need:
-             * - 'template': which template the icon renders with
-             * - 'src': the location of the relevant resource (font, css, images)
-             * - 'prefix': prefix to place before each icon name for convenience
-             *             (ie. fa fa- for FontAwesome, default "")
-             */
-            'FontAwesome' => [
-                // Specifically Font Awesome 4.7
-                'template' => 'font',
-                'prefix' => 'fa fa-',
-                // Right now, FontAwesome is bundled into compiled.css; when we no
-                // longer globally rely on FA (by managing all icons through the
-                // helper), we should change this to 'vendor/font-awesome.min.css'
-                // so it only loads conditionally when icons are used.
-                'src' => 'compiled.css',
-            ],
-            'Collapse' => [
-                'template' => 'collapse',
-            ],
-            // Unicode symbol characters. Icons are defined as hex code points.
-            'Unicode' => [
-                'template' => 'unicode',
-            ],
-            /* For an example of an images set, see Bootprint's theme.config.php. */
-        ],
-        'aliases' => [
-            /**
-             * Icons can be assigned or overridden here
-             *
-             * Format: 'icon' => [set:]icon[:extra_classes]
-             * Icons assigned without set will use the defaultSet.
-             * In order to specify extra CSS classes, you must also specify a set.
-             *
-             * All of the items below have been specified with FontAwesome to allow
-             * for a strong inheritance safety net but this is not required.
-             */
-            'barcode' => 'FontAwesome:barcode',
-            'browzine-best' => 'FontAwesome:file-lines',
-            'browzine-concern' => 'FontAwesome:exclamation',
-            'browzine-delivery' => 'FontAwesome:paper-plane',
-            'browzine-issue' => 'Alias:format-serial',
-            'browzine-link-resolver' => 'FontAwesome:file',
-            'browzine-pdf' => 'FontAwesome:file-pdf-o',
-            'browzine-retraction' => 'FontAwesome:exclamation',
-            'browzine-view' => 'FontAwesome:file',
-            'cart' => 'FontAwesome:suitcase',
-            'cart-add' => 'FontAwesome:plus',
-            'cart-empty' => 'FontAwesome:times',
-            'cart-remove' => 'FontAwesome:minus-circle',
-            'cite' => 'FontAwesome:asterisk',
-            'cites' => 'Unicode:275D',
-            'cited-by' => 'Unicode:275E',
-            'collapse' => 'Collapse:_', // uses the icons below
-            'collapse-close' => 'FontAwesome:chevron-up',
-            'collapse-open' => 'FontAwesome:chevron-down',
-            'user-content' => 'FontAwesome:comment',
-            'cover-replacement' => 'FontAwesome:question',
-            'currency-eur' => 'FontAwesome:eur',
-            'currency-gbp' => 'FontAwesome:gbp',
-            'currency-inr' => 'FontAwesome:inr',
-            'currency-jpy' => 'FontAwesome:jpy',
-            'currency-krw' => 'FontAwesome:krw',
-            'currency-rmb' => 'FontAwesome:rmb',
-            'currency-rub' => 'FontAwesome:rub',
-            'currency-try' => 'FontAwesome:try',
-            'currency-usd' => 'FontAwesome:usd',
-            'currency-won' => 'FontAwesome:won',
-            'currency-yen' => 'FontAwesome:yen',
-            'dropdown-caret' => 'FontAwesome:caret-down',
-            'export' => 'FontAwesome:external-link',
-            'external-link' => 'FontAwesome:link',
-            'facet-applied' => 'FontAwesome:check',
-            'facet-checked' => 'FontAwesome:check-square-o',
-            'facet-collapse' => 'FontAwesome:caret-down',
-            'facet-exclude' => 'FontAwesome:times',
-            'facet-expand' => 'FontAwesome:caret-right',
-            'facet-noncollapsible' => 'FontAwesome:none',
-            'facet-unchecked' => 'FontAwesome:square-o',
-            'feedback' => 'FontAwesome:envelope',
-            'format-atlas' => 'FontAwesome:compass',
-            'format-book' => 'FontAwesome:book',
-            'format-braille' => 'FontAwesome:hand-o-up',
-            'format-cdrom' => 'FontAwesome:laptop',
-            'format-chart' => 'FontAwesome:signal',
-            'format-chipcartridge' => 'FontAwesome:laptop',
-            'format-collage' => 'FontAwesome:picture-o',
-            'format-default' => 'FontAwesome:book',
-            'format-disccartridge' => 'FontAwesome:laptop',
-            'format-drawing' => 'FontAwesome:picture-o',
-            'format-ebook' => 'FontAwesome:file-text-o',
-            'format-electronic' => 'FontAwesome:file-archive-o',
-            'format-file' => 'FontAwesome:file-o',
-            'format-filmstrip' => 'FontAwesome:film',
-            'format-flashcard' => 'FontAwesome:bolt',
-            'format-floppydisk' => 'FontAwesome:save',
-            'format-folder' => 'FontAwesome:folder',
-            'format-globe' => 'FontAwesome:globe',
-            'format-journal' => 'FontAwesome:file-text-o',
-            'format-kit' => 'FontAwesome:briefcase',
-            'format-manuscript' => 'FontAwesome:file-text-o',
-            'format-map' => 'FontAwesome:compass',
-            'format-microfilm' => 'FontAwesome:film',
-            'format-motionpicture' => 'FontAwesome:video-camera',
-            'format-musicalscore' => 'FontAwesome:music',
-            'format-musicrecording' => 'FontAwesome:music',
-            'format-newspaper' => 'FontAwesome:file-text-o',
-            'format-online' => 'FontAwesome:laptop',
-            'format-painting' => 'FontAwesome:picture-o',
-            'format-photo' => 'FontAwesome:picture-o',
-            'format-photonegative' => 'FontAwesome:picture-o',
-            'format-physicalobject' => 'FontAwesome:archive',
-            'format-print' => 'FontAwesome:picture-o',
-            'format-sensorimage' => 'FontAwesome:picture-o',
-            'format-serial' => 'FontAwesome:file-text-o',
-            'format-slide' => 'FontAwesome:film',
-            'format-software' => 'FontAwesome:laptop',
-            'format-soundcassette' => 'FontAwesome:headphones',
-            'format-sounddisc' => 'FontAwesome:laptop',
-            'format-soundrecording' => 'FontAwesome:headphones',
-            'format-tapecartridge' => 'FontAwesome:laptop',
-            'format-tapecassette' => 'FontAwesome:headphones',
-            'format-tapereel' => 'FontAwesome:film',
-            'format-transparency' => 'FontAwesome:film',
-            'format-unknown' => 'FontAwesome:question',
-            'format-video' => 'FontAwesome:video-camera',
-            'format-videocartridge' => 'FontAwesome:video-camera',
-            'format-videocassette' => 'FontAwesome:video-camera',
-            'format-videodisc' => 'FontAwesome:laptop',
-            'format-videoreel' => 'FontAwesome:video-camera',
-            'hierarchy-collapse' => 'Alias:facet-collapse',
-            'hierarchy-collection' => 'FontAwesome:folder-open-o',
-            'hierarchy-expand' => 'Alias:facet-expand',
-            'hierarchy-noncollapsible' => 'Alias:facet-noncollapsible',
-            'hierarchy-record' => 'FontAwesome:file-o',
-            'hierarchy-tree' => 'FontAwesome:sitemap',
-            'lightbox-close' => 'FontAwesome:times',
-            'more' => 'FontAwesome:chevron-circle-right',
-            'more-rtl' => 'FontAwesome:chevron-circle-left',
-            'my-account' => 'FontAwesome:user-circle-o',
-            'my-account-notification' => 'Alias:notification',
-            'my-account-warning' => 'Alias:warning',
-            'notification' => 'FontAwesome:bell',
-            'offcanvas-hide-left' => 'FontAwesome:angle-right',
-            'offcanvas-hide-right' => 'FontAwesome:angle-left',
-            'offcanvas-show-left' => 'FontAwesome:angle-double-left',
-            'offcanvas-show-right' => 'FontAwesome:angle-double-right',
-            'options' => 'FontAwesome:gear',
-            'overdrive' => 'FontAwesome:download',
-            'overdrive-cancel-hold' => 'Alias:ui-cancel',
-            'overdrive-checkout' => 'FontAwesome:arrow-left',
-            'overdrive-checkout-rtl' => 'FontAwesome:arrow-right',
-            'overdrive-download' => 'FontAwesome:download',
-            'overdrive-edit-hold' => 'Alias:ui-edit',
-            'overdrive-edit-hold-suspension' => 'FontAwesome:calendar',
-            'overdrive-help' => 'FontAwesome:question-circle',
-            'overdrive-place-hold' => 'Alias:place-hold',
-            'overdrive-return' => 'FontAwesome:undo',
-            'overdrive-return-rtl' => 'FontAwesome:undo',
-            'overdrive-sign-in' => 'FontAwesome:sign-in',
-            'overdrive-success' => 'FontAwesome:check',
-            'overdrive-suspend-hold' => 'Alias:place-hold',
-            'overdrive-warning' => 'Alias:warning',
-            'page-first' => 'FontAwesome:angle-double-left',
-            'page-first-rtl' => 'FontAwesome:angle-double-right',
-            'page-last' => 'FontAwesome:angle-double-right',
-            'page-last-rtl' => 'FontAwesome:angle-double-left',
-            'page-next' => 'FontAwesome:angle-right',
-            'page-next-rtl' => 'FontAwesome:angle-left',
-            'page-prev' => 'FontAwesome:angle-left',
-            'page-prev-rtl' => 'FontAwesome:angle-right',
-            'place-hold' => 'FontAwesome:flag',
-            'place-ill-request' => 'FontAwesome:exchange',
-            'place-recall' => 'FontAwesome:flag',
-            'place-storage-retrieval' => 'FontAwesome:truck',
-            'print' => 'FontAwesome:print',
-            'profile' => 'FontAwesome:user',
-            'profile-card-delete' => 'Alias:ui-delete',
-            'profile-card-edit' => 'Alias:ui-edit',
-            'profile-change-password' => 'FontAwesome:key',
-            'profile-delete' => 'Alias:ui-delete',
-            'profile-edit' => 'Alias:ui-edit',
-            'profile-email' => 'FontAwesome:envelope',
-            'profile-sms' => 'FontAwesome:phone',
-            'qrcode' => 'FontAwesome:qrcode',
-            'rating-half' => 'FontAwesome:star-half',
-            'rating-full' => 'FontAwesome:star',
-            'search' => 'FontAwesome:search',
-            'search-delete' => 'Alias:ui-delete',
-            'search-filter-remove' => 'FontAwesome:times',
-            'search-rss' => 'FontAwesome:rss',
-            'search-save' => 'Alias:ui-save',
-            'search-schedule-alert' => 'FontAwesome:exclamation-circle',
-            'send-email' => 'FontAwesome:envelope',
-            'send-sms' => 'FontAwesome:phone',
-            'sign-in' => 'FontAwesome:sign-in',
-            'sign-out' => 'FontAwesome:sign-out',
-            'spinner' => 'FontAwesome:spinner:icon--spin',
-            'status-available' => 'FontAwesome:check',
-            'status-pending' => 'FontAwesome:clock-o',
-            'status-ready' => 'FontAwesome:bell',
-            'status-unavailable' => 'FontAwesome:times',
-            'status-uncertain' => 'FontAwesome:circle',
-            'status-unknown' => 'FontAwesome:circle',
-            'tag-add' => 'Alias:ui-add',
-            'tag-remove' => 'Alias:ui-remove',
-            'tree-context' => 'FontAwesome:sitemap',
-            'truncate-less' => 'FontAwesome:arrow-up',
-            'truncate-more' => 'FontAwesome:arrow-down',
-            'ui-add' => 'FontAwesome:plus-circle',
-            'ui-cancel' => 'FontAwesome:ban',
-            'ui-close' => 'FontAwesome:times',
-            'ui-delete' => 'FontAwesome:trash-o',
-            'ui-dots-menu' => 'FontAwesome:ellipsis-h',
-            'ui-edit' => 'FontAwesome:edit',
-            'ui-failure' => 'FontAwesome:times',
-            'ui-menu' => 'FontAwesome:bars',
-            'ui-remove' => 'FontAwesome:times',
-            'ui-reset-search' => 'Alias:ui-remove',
-            'ui-save' => 'FontAwesome:floppy-o',
-            'ui-success' => 'FontAwesome:check',
-            'user-checked-out' => 'FontAwesome:book',
-            'user-favorites' => 'FontAwesome:star',
-            'user-holds' => 'FontAwesome:flag',
-            'user-ill-requests' => 'FontAwesome:exchange',
-            'user-list' => 'FontAwesome:list',
-            'user-list-add' => 'FontAwesome:bookmark-o',
-            'user-list-delete' => 'Alias:ui-delete',
-            'user-list-edit' => 'Alias:ui-edit',
-            'user-list-entry-edit' => 'Alias:ui-edit',
-            'user-list-remove' => 'Alias:ui-remove',
-            'user-loan-history' => 'FontAwesome:history',
-            'user-public-list-indicator' => 'FontAwesome:globe',
-            'user-storage-retrievals' => 'FontAwesome:archive',
-            'view-grid' => 'FontAwesome:th',
-            'view-list' => 'FontAwesome:list',
-            'view-visual' => 'FontAwesome:th-large',
-            'warning' => 'FontAwesome:exclamation-triangle',
-        ],
+        'defaultSet' => 'FontAwesome6', // from mixin
     ],
     /**
      * Html elements can be made sticky which means that they don't leave the screen on scrolling.