Inline font styles, remove obsolete icon font

public/typo3conf/ext/ep_theme/Classes/ViewHelpers/IconViewHelper.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace EP\EpTheme\ViewHelpers;
+
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Extbase\Service\ImageService;
+use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithRenderStatic;
+
+class IconViewHelper extends AbstractViewHelper
+{
+    use CompileWithRenderStatic;
+
+    /**
+     * @var bool
+     */
+    protected $escapeOutput = false;
+
+    public function initializeArguments()
+    {
+        parent::initializeArguments();
+
+        $this->registerArgument('icon', 'string', 'Icon name');
+        $this->registerArgument('class', 'string', 'CSS classes');
+    }
+
+    /**
+     * @param array $arguments
+     * @param \Closure $renderChildrenClosure
+     * @param RenderingContextInterface $renderingContext
+     * @return mixed
+     */
+    public static function renderStatic(
+        array $arguments,
+        \Closure $renderChildrenClosure,
+        RenderingContextInterface $renderingContext
+    )
+    {
+        $imageService = self::getImageService();
+        $sprite = $imageService->getImage('EXT:ep_theme/Resources/Public/images/icons_sprite.svg', null, false);
+        $imageUrl = $sprite->getPublicUrl();
+
+        return sprintf(
+            '<svg class="%s"><use href="%s#icon-%s"></use></svg>',
+            $arguments['class'],
+            $imageUrl,
+            $arguments['icon']
+        );
+    }
+
+    protected static function getImageService()
+    {
+        return GeneralUtility::makeInstance(ImageService::class);
+    }
+}

public/typo3conf/ext/ep_theme/Configuration/TypoScript/Page/Main.typoscript

@@ -144,6 +144,45 @@ page {
         settings < plugin.tx_eptheme.settings
     }
 
+    CSS_inlineStyle (
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: local(''),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-300.woff2') format('woff2'),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-300.woff') format('woff');
+}
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local(''),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-regular.woff2') format('woff2'),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-regular.woff') format('woff');
+}
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local(''),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-700.woff2') format('woff2'),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-700.woff') format('woff');
+}
+@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 900;
+    font-display: swap;
+    src: local(''),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-900.woff2') format('woff2'),
+    url('/typo3conf/ext/ep_theme/Resources/Public/fonts/lato-v17-latin-900.woff') format('woff');
+}
+    )
+
     headerData.998 = TEXT
     headerData.998.value (
         <!-- Google Tag Manager -->

public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript

@@ -100,4 +100,5 @@ config {
     typolinkEnableLinksAcrossDomains = 1
     sendCacheHeaders = 1
     content_from_pid_allowOutsideDomain = 1
+    inlineStyle2TempFile = 0
 }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/fonts/config.json

@@ -1,34 +0,0 @@
-{
-  "name": "",
-  "css_prefix_text": "icon-",
-  "css_use_suffix": false,
-  "hinting": true,
-  "units_per_em": 1000,
-  "ascent": 850,
-  "glyphs": [
-    {
-      "uid": "12f4ece88e46abd864e40b35e05b11cd",
-      "css": "ok",
-      "code": 59392,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9f7e588c66cfd6891f6f507cf6f6596b",
-      "css": "phone",
-      "code": 59393,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ccc2329632396dc096bb638d4b46fb98",
-      "css": "mail-alt",
-      "code": 61664,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "43ab845088317bd348dee1d975700c48",
-      "css": "ok-circled",
-      "code": 59394,
-      "src": "fontawesome"
-    }
-  ]
-}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_fonts.scss

@@ -1,82 +0,0 @@
-/* lato-300 - latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 300;
-    font-display: swap;
-    src: local(''),
-    url('../../fonts/lato-v17-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/lato-v17-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* lato-regular - latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local(''),
-    url('../../fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/lato-v17-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* lato-700 - latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local(''),
-    url('../../fonts/lato-v17-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/lato-v17-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* lato-900 - latin */
-@font-face {
-    font-family: 'Lato';
-    font-style: normal;
-    font-weight: 900;
-    font-display: swap;
-    src: local(''),
-    url('../../fonts/lato-v17-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-    url('../../fonts/lato-v17-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* Fontello icons */
-@font-face {
-    font-family: 'fontello';
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-    src: local(''),
-    url('../../fonts/fontello.woff2') format('woff2'),
-    url('../../fonts/fontello.woff') format('woff');
-}
-
-[class^="icon-"]:before, [class*=" icon-"]:before {
-    font-family: "fontello";
-    font-style: normal;
-    font-weight: normal;
-    speak: never;
-
-    display: inline-block;
-    text-decoration: inherit;
-    width: 1em;
-    margin-right: .2em;
-    text-align: center;
-
-    font-variant: normal;
-    text-transform: none;
-
-    line-height: 1em;
-
-    margin-left: .2em;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-check:before { content: '\e800'; }
-.icon-phone:before { content: '\e801'; }
-.icon-check-circle:before { content: '\e802'; }
-.icon-mail:before { content: '\f0e0'; }

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss

@@ -6,7 +6,6 @@
     body {
         padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
     }
-    @import "base/fonts";
     @import "base/typography";
     @import "base/images";
 

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html

@@ -24,9 +24,7 @@
             <div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}-overlay', else: 'bg-ep-primary-80')}">
                 <div class="flex items-center space-x-2">
                     <f:if condition="{country.code}">
-                        <svg class="product-teaser__flag">
+                        {ep:icon(class: 'product-teaser__flag', icon: 'flag-{country.code -> f:format.case(mode: \'lower\')}')}
-                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
-                        </svg>
                     </f:if>
                     <span class="product-teaser__label-concept">
                         {concept.name}
@@ -61,14 +59,14 @@
             </div>
             <ul class="product-teaser__list-included flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400">
                 <li class="flex items-center space-x-1 py-1">
-                    <i class="icon-check text-ep-primary-light"></i>
+                    {ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
                     <span class="block flex-1 leading-none">
                         {f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
                     </span>
                 </li>
                 <f:if condition="{product.feature}">
                     <li class="flex items-center space-x-1 py-1">
-                        <i class="icon-check text-ep-primary-light"></i>
+                        {ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
                         <span class="block flex-1 leading-none">
                             {product.feature}
                         </span>
@@ -76,7 +74,7 @@
                 </f:if>
                 <f:if condition="{board}">
                     <li class="flex items-center space-x-1 py-1">
-                        <i class="icon-check text-ep-primary-light"></i>
+                        {ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
                         <span class="block flex-1 leading-none">
                             {board}
                         </span>

webpack.config.js

@@ -31,6 +31,7 @@ Encore
         }
     })
     .copyFiles([
+        { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/fonts', to: 'fonts/[name].[ext]' },
         { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/images', to: 'images/[name].[ext]' },
         { from: './public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/icons', to: 'images/icons/[name].[ext]' },
         { from: './node_modules/leaflet/dist/images', to: 'images/[name].[ext]' },