[Site] Icons colors

* don't invert colored icons
* add 3 icon set cards
* re-add SVG code highlighting

Author: smnandre

ux.symfony.com/assets/styles/components/_IconGrid.scss

@@ -153,7 +153,7 @@
     background: rgb(0 0 0 / 50%);
   }
 
-  .IconCard__icon {
+  .IconCard__icon:not(.Icon__color) {
     filter: invert(1) hue-rotate(180deg);
   }
 }

ux.symfony.com/assets/styles/components/_IconModal.scss

@@ -121,6 +121,10 @@
   --invert: 0%;
 }
 
+.IconModal__color > img {
+  --invert: 0 !important;
+}
+
 @keyframes icon-loading {
   0% {
     transform: scale(.95);

ux.symfony.com/src/Controller/Icons/IconsController.php

@@ -33,6 +33,9 @@ public function index(IconSetRepository $iconSetRepository): Response
             'iconoir',
             'lucide',
             'tabler',
+            'octicon',
+            'ph',
+            'heroicons',
         ];
         $iconSets = array_map(fn ($iconSet) => $iconSetRepository->find($iconSet), $iconSets);
 

ux.symfony.com/src/Twig/Components/Icon/IconSearch.php

@@ -77,6 +77,11 @@ public function icons(): array
         return $this->icons ??= $this->searchIcons();
     }
 
+    public function getIconSet(): ?IconSet
+    {
+        return $this->set ? $this->iconSetRepository->get($this->set) : null;
+    }
+
     private function searchIcons(): array
     {
         if (!$this->query) {

ux.symfony.com/src/Twig/Components/Icon/IconSetCard.php

@@ -48,6 +48,18 @@ class IconSetCard
             'home', 'user', 'settings', 'search', 'arrow-down',
             'heart', 'star', 'sun-light', 'view-grid', 'media-image',
         ],
+        'octicon' => [
+            'home', 'person', 'gear', 'search', 'arrow-down',
+            'heart', 'star', 'sun-16', 'apps-24', 'image-16',
+        ],
+        'ph' => [
+            'house', 'user', 'gear', 'magnifying-glass', 'arrow-down',
+            'heart', 'star', 'sun', 'squares-four', 'image',
+        ],
+        'heroicons' => [
+            'home', 'user', 'cog', 'magnifying-glass', 'arrow-down',
+            'heart', 'star', 'sun', 'squares-2x2', 'photo',
+        ],
     ];
 
     public function getSampleIcons(): array

ux.symfony.com/templates/components/Icon/IconGrid.html.twig

@@ -1,4 +1,4 @@
-{% props icons = [] %}
+{% props icons = [], iconSet = null %}
 
 <div {{ attributes }} class="IconGrid" data-controller="icon-grid">
 
@@ -9,7 +9,7 @@
                 {% if iconSet is not defined %}
                     <span class="IconCard__prefix">{{ icon.prefix }}</span>
                 {% endif %}
-                <img class="IconCard__icon" width="32" height="32" src="{{ icon.imageUrl }}" alt="Icon {{ icon.prefix }} {{ icon.name|humanize }}">
+                <img class="IconCard__icon {{ iconSet.palette|default ? 'Icon__color' }}" width="32" height="32" src="{{ icon.imageUrl }}" alt="Icon {{ icon.prefix }} {{ icon.name|humanize }}">
                 <span class="IconCard__name">{{ icon.name }}</span>
             </button>
         </div>

ux.symfony.com/templates/components/Icon/IconModal.html.twig

@@ -27,17 +27,17 @@
 
             <div class="IconModal__body">
                 <div class="IconModal__media">
-                    <div class="IconModal__icon IconModal__icon--grid">
+                    <div class="IconModal__icon IconModal__icon--grid {{ icon_set.palette ? 'IconModal__color' }}">
                         <img src="{{ icon.imageUrl }}" alt="Icon {{ icon.prefix }} {{ icon.name|humanize }}">
                     </div>
                     <div class="IconModal__icons">
-                        <div class="IconModal__icon">
+                        <div class="IconModal__icon {{ icon_set.palette ? 'IconModal__color' }}">
                             <img src="{{ icon.imageUrl }}" alt="Icon {{ icon.prefix }} {{ icon.name|humanize }}">
                         </div>
-                        <div class="IconModal__icon IconModal__icon--check">
+                        <div class="IconModal__icon IconModal__icon--check {{ icon_set.palette ? 'IconModal__color' }}">
                             <img src="{{ icon.imageUrl }}" alt="Icon {{ icon.prefix }} {{ icon.name|humanize }}">
                         </div>
-                        <div class="IconModal__icon">
+                        <div class="IconModal__icon {{ icon_set.palette ? 'IconModal__color' }}">
                             <img src="{{ icon.imageUrl }}" alt="Icon {{ icon.prefix }} {{ icon.name|humanize }}">
                         </div>
                     </div>
@@ -88,10 +88,10 @@
                             <div class="TabPanel" data-tabs-target="tab" id="IconModal-Tab-Svg" data-tab="svg">
                                 {% set _svg = this.svg() %}
                                 {% if _svg %}
-                                    <div data-live-ignore  id="IconModal-Tab-Svg--{{ icon }}">
+                                    <div data-live-ignore id="IconModal-Tab-Svg--{{ icon }}">
                                         <h3>SVG Icon</h3>
                                         <twig:Code:CodeLine class="IconModal__code" height="12rem">
-                                            {{ _svg }}
+                                            {{ _svg|highlight('xml') }}
                                         </twig:Code:CodeLine>
                                     </div>
                                 {% endif %}

ux.symfony.com/templates/components/Icon/IconSearch.html.twig

@@ -64,7 +64,7 @@
 
     <div id="IconSearchResults" class="mt-5">
         {% if this.icons|length > 0 %}
-            <twig:Icon:IconGrid icons="{{ this.icons }}" id="IconGrid-{{ this.hash }}"  />
+            <twig:Icon:IconGrid icons="{{ this.icons }}" id="IconGrid-{{ this.hash }}" iconSet="{{ this.iconSet ?? null }}" />
         {% elseif this.query %}
             <p class="pt-3 text-center">No icons found matching "{{ query }}".</p>
         {% endif %}