Upgraded fontawesome icons from 6.2.1 to 6.4.0

Configuration/Iconpack/FontAwesome6.yaml

@@ -1,9 +1,9 @@
 iconpack:
   title: "Font Awesome Icons 6"
   key: "fa6"
-  version: "6.2.1"
+  version: "6.4.0"
   url: "https://fontawesome.com/"
-  logo: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/Logo.svg"
+  logo: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/Logo.svg"
 
   stylesEnabled: "solid,regular,brands"
 
@@ -28,16 +28,16 @@ iconpack:
     webfont:
       _default:
         css:
-          shared: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/css/fontawesome.min.css"
+          shared: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/css/fontawesome.min.css"
         attributes:
           aria-hidden: "true"
           role: "img"
       solid:
-        css: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/css/solid.min.css"
+        css: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/css/solid.min.css"
       regular:
-        css: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/css/regular.min.css"
+        css: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/css/regular.min.css"
       brands:
-        css: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/css/brands.min.css"
+        css: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/css/brands.min.css"
 
     svg:
       _default:
@@ -46,11 +46,11 @@ iconpack:
           ckeditor: "EXT:iconpack_fontawesome/Resources/Public/Css/Backend/fa6svg.css"
           frontend: "EXT:iconpack_fontawesome/Resources/Public/Css/fa6svg.css"
       solid:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/svgs/solid/"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/svgs/solid/"
       regular:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/svgs/regular/"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/svgs/regular/"
       brands:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/svgs/brands/"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/svgs/brands/"
 
     svgSprite:
       _default:
@@ -62,11 +62,11 @@ iconpack:
           fill: "currentColor"
           role: "img"
       solid:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/sprites/solid.svg"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/sprites/solid.svg"
       regular:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/sprites/regular.svg"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/sprites/regular.svg"
       brands:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/sprites/brands.svg"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/sprites/brands.svg"
 
     svgInline:
       _default:
@@ -78,11 +78,11 @@ iconpack:
           fill: "currentColor"
           role: "img"
       solid:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/svgs/solid/"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/svgs/solid/"
       regular:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/svgs/regular/"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/svgs/regular/"
       brands:
-        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/svgs/brands/"
+        source: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/svgs/brands/"
 
   options:
 
@@ -223,6 +223,7 @@ iconpack:
       attributes:
         class: "fa-fw"
 
-  categories: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/metadata/categories.yml"
+  # Disable default categories, because not all icons are listed there (brands!)
+  #categories: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/metadata/categories.yml"
 
-  icons: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.2.1-web/metadata/icons.yml"
+  icons: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-6.4.0-web/metadata/icons.yml"

README.md

@@ -12,7 +12,7 @@ This Extension registers an Iconpack-Provider for EXT:iconpack which allows you
 
 The following versions are included in this extension, and can be selected via the TYPO3 backend:
 - *5.14.4-free*
-- *6.2.1-free*
+- *6.4.0-free*
 
 
 ## Installation/Configuration
@@ -38,7 +38,7 @@ This extension contains an icon set of another author. Please note the license t
 | Name           | *Font Awesome Free 6*                                     |
 | :------------- | :-------------------------------------------------------- |
 | Type           | SVG, SVG-Sprite, Webfont                                  |
-| Latest version | *6.2.1-free*                                              |
+| Latest version | *6.4.0-free*                                              |
 | Source         | https://fontawesome.com                                   |
 | Icons license  | [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) |
 | Font license   | SIL OFL 1.1 License                                       |

Resources/Public/Css/fa6svg.css

@@ -81,6 +81,23 @@
   width: 1.25em;
 }
 
+.fa-ul {
+  list-style-type: none;
+  margin-left: var(--fa-li-margin, 2.5em);
+  padding-left: 0;
+}
+.fa-ul>li {
+  position: relative;
+}
+
+.fa-li {
+  left: calc(var(--fa-li-width, 2em) * -1);
+  position: absolute;
+  text-align: center;
+  width: var(--fa-li-width, 2em);
+  line-height: inherit;
+}
+
 .fa-border {
   border-color: var(--fa-border-color, #eee);
   border-radius: var(--fa-border-radius, 0.1em);
@@ -89,6 +106,16 @@
   padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);
 }
 
+.fa-pull-left {
+  float: left;
+  margin-right: var(--fa-pull-margin, 0.3em);
+}
+
+.fa-pull-right {
+  float: right;
+  margin-left: var(--fa-pull-margin, 0.3em);
+}
+
 .fa-beat {
   -webkit-animation-name: fa-beat;
   animation-name: fa-beat;
@@ -213,7 +240,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-
   .fa-beat,
   .fa-bounce,
   .fa-fade,
@@ -229,33 +255,31 @@
     animation-duration: 1ms;
     -webkit-animation-iteration-count: 1;
     animation-iteration-count: 1;
+    -webkit-transition-delay: 0s;
     transition-delay: 0s;
+    -webkit-transition-duration: 0s;
     transition-duration: 0s;
   }
 }
 
 @-webkit-keyframes fa-beat {
-
   0%,
   90% {
     -webkit-transform: scale(1);
     transform: scale(1);
   }
-
   45% {
     -webkit-transform: scale(var(--fa-beat-scale, 1.25));
     transform: scale(var(--fa-beat-scale, 1.25));
   }
 }
 
 @keyframes fa-beat {
-
   0%,
   90% {
     -webkit-transform: scale(1);
     transform: scale(1);
   }
-
   45% {
     -webkit-transform: scale(var(--fa-beat-scale, 1.25));
     transform: scale(var(--fa-beat-scale, 1.25));
@@ -267,32 +291,26 @@
     -webkit-transform: scale(1, 1) translateY(0);
     transform: scale(1, 1) translateY(0);
   }
-
   10% {
     -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
     transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
   }
-
   30% {
     -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
     transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
   }
-
   50% {
     -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
     transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
   }
-
   57% {
     -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
     transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
   }
-
   64% {
     -webkit-transform: scale(1, 1) translateY(0);
     transform: scale(1, 1) translateY(0);
   }
-
   100% {
     -webkit-transform: scale(1, 1) translateY(0);
     transform: scale(1, 1) translateY(0);
@@ -304,32 +322,26 @@
     -webkit-transform: scale(1, 1) translateY(0);
     transform: scale(1, 1) translateY(0);
   }
-
   10% {
     -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
     transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
   }
-
   30% {
     -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
     transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
   }
-
   50% {
     -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
     transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
   }
-
   57% {
     -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
     transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
   }
-
   64% {
     -webkit-transform: scale(1, 1) translateY(0);
     transform: scale(1, 1) translateY(0);
   }
-
   100% {
     -webkit-transform: scale(1, 1) translateY(0);
     transform: scale(1, 1) translateY(0);
@@ -349,14 +361,12 @@
 }
 
 @-webkit-keyframes fa-beat-fade {
-
   0%,
   100% {
     opacity: var(--fa-beat-fade-opacity, 0.4);
     -webkit-transform: scale(1);
     transform: scale(1);
   }
-
   50% {
     opacity: 1;
     -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
@@ -365,14 +375,12 @@
 }
 
 @keyframes fa-beat-fade {
-
   0%,
   100% {
     opacity: var(--fa-beat-fade-opacity, 0.4);
     -webkit-transform: scale(1);
     transform: scale(1);
   }
-
   50% {
     opacity: 1;
     -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
@@ -399,44 +407,36 @@
     -webkit-transform: rotate(-15deg);
     transform: rotate(-15deg);
   }
-
   4% {
     -webkit-transform: rotate(15deg);
     transform: rotate(15deg);
   }
-
   8%,
   24% {
     -webkit-transform: rotate(-18deg);
     transform: rotate(-18deg);
   }
-
   12%,
   28% {
     -webkit-transform: rotate(18deg);
     transform: rotate(18deg);
   }
-
   16% {
     -webkit-transform: rotate(-22deg);
     transform: rotate(-22deg);
   }
-
   20% {
     -webkit-transform: rotate(22deg);
     transform: rotate(22deg);
   }
-
   32% {
     -webkit-transform: rotate(-12deg);
     transform: rotate(-12deg);
   }
-
   36% {
     -webkit-transform: rotate(12deg);
     transform: rotate(12deg);
   }
-
   40%,
   100% {
     -webkit-transform: rotate(0deg);
@@ -449,44 +449,36 @@
     -webkit-transform: rotate(-15deg);
     transform: rotate(-15deg);
   }
-
   4% {
     -webkit-transform: rotate(15deg);
     transform: rotate(15deg);
   }
-
   8%,
   24% {
     -webkit-transform: rotate(-18deg);
     transform: rotate(-18deg);
   }
-
   12%,
   28% {
     -webkit-transform: rotate(18deg);
     transform: rotate(18deg);
   }
-
   16% {
     -webkit-transform: rotate(-22deg);
     transform: rotate(-22deg);
   }
-
   20% {
     -webkit-transform: rotate(22deg);
     transform: rotate(22deg);
   }
-
   32% {
     -webkit-transform: rotate(-12deg);
     transform: rotate(-12deg);
   }
-
   36% {
     -webkit-transform: rotate(12deg);
     transform: rotate(12deg);
   }
-
   40%,
   100% {
     -webkit-transform: rotate(0deg);
@@ -499,7 +491,6 @@
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
-
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
@@ -511,7 +502,6 @@
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
-
   100% {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);