Feature: Icon Mixins

.gitignore

@@ -27,6 +27,8 @@ package-lock.json
 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

@@ -278,10 +278,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)));
     }
 
@@ -322,8 +322,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/devtools.scss

@@ -26,3 +26,7 @@
   text-align: left;
   vertical-align: middle;
 }
+
+.icon-table {
+  width: fit-content;
+}

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,12 +2,24 @@
   $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>
-<div>
-  <?php foreach ($aliases as $icon): ?>
-    <?=$this->icon($icon)?>: <?=$this->escapeHtml($icon)?><br>
-  <?php endforeach; ?>
-</div>
+<h1><?=$titleEsc ?></h1>
+<table class="icon-table table table-striped">
+  <thead>
+    <tr>
+      <th>Alias</th>
+      <th>Icon</th>
+    </tr>
+  </thead>
+  <tbody>
+    <?php foreach ($aliases as $icon): ?>
+      <tr>
+        <td><?=$this->escapeHtml($icon) ?></td>
+        <td><?=$this->icon($icon) ?></td>
+      </tr>
+    <?php endforeach; ?>
+  </tbody>
+</table>

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

@@ -124,7 +124,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');
@@ -134,7 +134,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">