footballrs.net

Icon: match-calendar 

<i class="match-calendar"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <path d="m57 19h-50a3 3 0 0 1 -3-3v-6a3 3 0 0 1 3-3h50a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3zm-50-10a1 1 0 0 0 -1 1v6a1 1 0 0 0 1 1h50a1 1 0 0 0 1-1v-6a1 1 0 0 0 -1-1z" />
        <path d="m54 60h-44a4 4 0 0 1 -4-4v-38a1 1 0 0 1 1-1h50a1 1 0 0 1 1 1v38a4 4 0 0 1 -4 4zm-46-41v37a2 2 0 0 0 2 2h44a2 2 0 0 0 2-2v-37z" />
        <path d="m24.88 52.5a20.56 20.56 0 0 1 -3.88-.36 3.28 3.28 0 0 1 -2.65-2.67 20.61 20.61 0 0 1 -.35-5.12c0-.38.06-.76.09-1.14.08-.7.19-1.34.32-2a21.12 21.12 0 0 1 16.34-16.21 18.5 18.5 0 0 1 2-.31c.39 0 .77-.08 1.15-.1a20.83 20.83 0 0 1 5.14.32 3.28 3.28 0 0 1 2.65 2.67 20.61 20.61 0 0 1 .31 5.07c0 .38-.06.76-.09 1.14-.08.7-.19 1.34-.32 2a21.12 21.12 0 0 1 -16.3 16.3 18.5 18.5 0 0 1 -1.95.31c-.39 0-.77.08-1.15.1s-.89 0-1.31 0zm14.24-26c-.38 0-.77 0-1.15 0l-1.06.1c-.62.06-1.19.16-1.75.27a19.13 19.13 0 0 0 -14.76 14.79c-.11.56-.21 1.13-.28 1.76 0 .34-.06.7-.09 1a18.76 18.76 0 0 0 .3 4.64 1.27 1.27 0 0 0 1 1.06 19 19 0 0 0 4.66.3l1.06-.09c.62-.07 1.19-.17 1.75-.28a19.13 19.13 0 0 0 14.8-14.71c.11-.56.21-1.13.28-1.76l.09-1a18.76 18.76 0 0 0 -.3-4.64 1.27 1.27 0 0 0 -1-1.06 18.56 18.56 0 0 0 -3.55-.38z" />
        <path d="m24.88 52.5a20.56 20.56 0 0 1 -3.88-.36 3.28 3.28 0 0 1 -2.65-2.67 20.61 20.61 0 0 1 -.35-5.12c0-.38.06-.76.09-1.14.08-.7.19-1.34.32-2a21.12 21.12 0 0 1 16.34-16.21 18.5 18.5 0 0 1 2-.31c.39 0 .77-.08 1.15-.1a20.83 20.83 0 0 1 5.14.32 3.28 3.28 0 0 1 2.65 2.67 20.61 20.61 0 0 1 .31 5.07c0 .38-.06.76-.09 1.14-.08.7-.19 1.34-.32 2a21.12 21.12 0 0 1 -16.3 16.3 18.5 18.5 0 0 1 -1.95.31c-.39 0-.77.08-1.15.1s-.89 0-1.31 0zm14.24-26c-.38 0-.77 0-1.15 0l-1.06.1c-.62.06-1.19.16-1.75.27a19.13 19.13 0 0 0 -14.76 14.79c-.11.56-.21 1.13-.28 1.76 0 .34-.06.7-.09 1a18.76 18.76 0 0 0 .3 4.64 1.27 1.27 0 0 0 1 1.06 19 19 0 0 0 4.66.3l1.06-.09c.62-.07 1.19-.17 1.75-.28a19.13 19.13 0 0 0 14.8-14.71c.11-.56.21-1.13.28-1.76l.09-1a18.76 18.76 0 0 0 -.3-4.64 1.27 1.27 0 0 0 -1-1.06 18.56 18.56 0 0 0 -3.55-.38z" />
        <path d="m43.82 34.77a8.1 8.1 0 0 1 -8.09-8.09 6.7 6.7 0 0 1 .1-1.22 1 1 0 0 1 .88-.83c.38 0 .76-.07 1.14-.09a20.83 20.83 0 0 1 5.14.32 3.28 3.28 0 0 1 2.65 2.67 20.61 20.61 0 0 1 .36 5.12c0 .38-.06.76-.09 1.14a1 1 0 0 1 -.83.88 6.7 6.7 0 0 1 -1.26.1zm-6.09-8.22v.13a6.12 6.12 0 0 0 6.27 6.09c0-.08 0-.16 0-.24a18.76 18.76 0 0 0 -.3-4.64 1.27 1.27 0 0 0 -1-1.06 19 19 0 0 0 -4.66-.3z" />
        <path d="m24.88 52.5a20.56 20.56 0 0 1 -3.88-.36 3.28 3.28 0 0 1 -2.65-2.67 20.61 20.61 0 0 1 -.35-5.12c0-.38.06-.76.09-1.14a1 1 0 0 1 .83-.88 6.7 6.7 0 0 1 1.22-.1 8.1 8.1 0 0 1 8.09 8.09 6.7 6.7 0 0 1 -.1 1.22 1 1 0 0 1 -.88.83l-1.14.09c-.38.03-.81.04-1.23.04zm-4.83-8.27v.24a18.76 18.76 0 0 0 .3 4.64 1.27 1.27 0 0 0 1 1.06 19 19 0 0 0 4.66.3h.24v-.13a6.09 6.09 0 0 0 -6.09-6.09z" />
        <path d="m28.45 43.05a1 1 0 0 1 -.7-.3 1 1 0 0 1 0-1.41l7.09-7.09a1 1 0 0 1 1.41 1.41l-7.09 7.09a1 1 0 0 1 -.71.3z" />
        <path d="m33.18 40.68a1 1 0 0 1 -.71-.29l-2.36-2.39a1 1 0 0 1 1.42-1.42l2.36 2.42a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.26z" />
        <path d="m35.55 38.32a1 1 0 0 1 -.71-.29l-2.37-2.37a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l2.36 2.36a1 1 0 0 1 -.7 1.71z" />
        <path d="m30.82 43.05a1 1 0 0 1 -.71-.3l-2.36-2.36a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l2.37 2.37a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.3z" />
        <path d="m12 12a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z" />
        <path d="m28 12a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z" />
        <path d="m20 12a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z" />
        <path d="m36 12a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z" />
        <path d="m44 12a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z" />
        <path d="m52 12a1 1 0 0 1 -1-1v-6a1 1 0 0 1 2 0v6a1 1 0 0 1 -1 1z" />
    </svg></i>
 
{% set className = className ? className ~ ' ' : '' %}
{% set attributes = className ~ icon | trim %}
{% set insert = true %}
{% if iconType is empty or iconType == 'custom' %}
<i class="{{ attributes }}">{% if insert is defined and insert == true %}{{ source('@customIcons/' ~ icon ~ '.svg') }}{% endif %}</i>
{% elseif iconType is not empty or iconType == 'iconoir' %}
<i class="{{ attributes }}">{% if insert is defined and insert == true %}{{ source('@icons/' ~ icon ~ '.svg') }}{% endif %}</i>
{% endif %}
 
{
  "icon": "match-calendar"
}
  • Content: 
    <?php

namespace Theme\Views\Atoms\icon;

use ACFToolkit\Traits\SetWrapperWidth;
use ACFToolkit\Types\CustomAtom;


class Icon extends CustomAtom
{
    use SetWrapperWidth;

    public string $name = 'icon';
    public string $label = 'Icon';
    public int $needsJs = 0;
    public int $needsVue = 1;
    public int $needsVueInitialisation = 0;

    public function __construct($name = '', $title = '', $children = [])
    {
        parent::__construct($name, $title);
        $this->addChildren(array_merge($children, [
        ]));
    }

    public function getChoices()
    {
        $customIcons = get_template_directory().'/resources/Views/Assets/dist/custom-icons/*.svg';

        $result = [];
        $files = glob($customIcons);
        foreach($files as $file) {
            $filename = basename($file, '.svg');
            $result[$filename] = $filename;
        }
        return $result;
    }
}
  • URL: /components/raw/icon/Icon.php
  • Filesystem Path: resources/Views/Atoms/icon/Icon.php
  • Size: 909 Bytes
  • Content: 
    <?php

namespace Theme\Views\Atoms\icon;

use ACFToolkit\ViewModels\BaseViewModel;

class IconViewModel extends BaseViewModel
{
}
  • URL: /components/raw/icon/IconViewModel.php
  • Filesystem Path: resources/Views/Atoms/icon/IconViewModel.php
  • Size: 130 Bytes
  • Content: 
    i {
  display: inline-block;
  width: 26px;

  svg {
    width: 100%;
    vertical-align: top;
  }

  &.sm {
    width: 20px;
  }

  &.md {
    width: 40px;
  }

  &.lg {
    width: 50px;
  }

  &.xl {
    width: 60px;
  }

  &.star--filled {
    svg {
      g {
        fill: theme('colors.primary');
      }
    }
  }

  &.logo {
    svg {
      g {
        fill: theme('colors.primary');
      }
    }
  }

  &.logo--white {
    svg {
      g {
        fill: #fff;
      }
    }
  }

  &.logo_subline {
    svg {
      g {
        fill: theme('colors.primary');
      }
    }
  }

  &.logo_subline--white {
    svg {
      g {
        fill: #fff;
      }
    }
  }

  &.logo_subline-subline--accent {
    svg {
      g {
        fill: theme('colors.primary');

        &#subline {
          fill: theme('colors.accent');
        }
      }
    }
  }

  &.logo_subline--white-subline--accent {
    svg {
      g {
        fill: #fff;

        &#subline {
          fill: theme('colors.accent');
        }
      }
    }
  }

  &.search {
    width: 24px;
    height: 24px;
  }
}
  • URL: /components/raw/icon/icon.scss
  • Filesystem Path: resources/Views/Atoms/icon/icon.scss
  • Size: 1.1 KB
  • Content: 
    <template>
  <i
    :class="getTypeClass + '-' + icon + ' ' + className"
    v-html="iconSource"
    :title="title"
    v-if="iconSource"
  ></i>
</template>
<script>
  import IconService from '../../Assets/src/js/services/IconService';

  export default {
    props: {
      className: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
      },
      title: {
        type: String
      },
      type: {
        type: String,
        default: 'custom'
      }
    },
    data: () => {
      return {
        iconSource: null
      }
    },
    computed: {
        getTypeClass(){
          return this.type === 'custom' ? 'custom' : 'iconoir'
        }
    },
    async created(){
      const {data} = this.type === 'custom' ?
        await IconService.getCustom(this.icon) :
        await IconService.getIconoir(this.icon)
      this.iconSource = data
    }
  }
</script>
<style>
*[class^="iconoir-"], *[class*=" iconoir-"] {
  display: inline-block;
}
</style>
  • URL: /components/raw/icon/icon.vue
  • Filesystem Path: resources/Views/Atoms/icon/icon.vue
  • Size: 1 KB

title: Icon

{% include '@atoms/icon/icon.twig' with {
    icon: 'icon'
} only %}

ACF

Fields