footballrs.net

Icon: ticket 

<i class="ticket"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <path d="m24.69 62.13a3 3 0 0 1 -2.1-.87l-5.2-5.21a3 3 0 0 1 -.48-3.55 4.06 4.06 0 0 0 .19-3.34 4 4 0 0 0 -.9-1.36 4.06 4.06 0 0 0 -2.6-1.17 4.37 4.37 0 0 0 -1.32.14 5.23 5.23 0 0 0 -.79.32 3 3 0 0 1 -3.49-.48l-5.21-5.2a3 3 0 0 1 0-4.19l35.09-35.14a3.08 3.08 0 0 1 4.24 0l19.8 19.8a3 3 0 0 1 0 4.24l-35.14 35.14a3 3 0 0 1 -2.09.87zm-11.32-17.5h.36a6.06 6.06 0 0 1 3.89 1.74 6.18 6.18 0 0 1 1.34 2 6 6 0 0 1 -.28 5 1 1 0 0 0 .12 1.21l5.2 5.27a1 1 0 0 0 1.36 0l35.15-35.14a1 1 0 0 0 0-1.42l-19.8-19.8a1 1 0 0 0 -1.42 0l-35.14 35.14a1 1 0 0 0 -.28.68 1 1 0 0 0 .28.68l5.21 5.21a1 1 0 0 0 1.19.13 6.3 6.3 0 0 1 1.2-.49 6.67 6.67 0 0 1 1.62-.21z" />
        <path d="m27 43a17.2 17.2 0 0 1 -3.31-.31 2.93 2.93 0 0 1 -2.36-2.38 18 18 0 0 1 -.33-4.37c0-.31 0-.62.08-.93a17.35 17.35 0 0 1 .27-1.72 18 18 0 0 1 13.94-13.91 15.82 15.82 0 0 1 1.71-.26l1-.09a18.23 18.23 0 0 1 4.39.28 2.93 2.93 0 0 1 2.36 2.38 18 18 0 0 1 .25 4.37c0 .31 0 .62-.08.93a17.35 17.35 0 0 1 -.27 1.72 18 18 0 0 1 -13.94 13.91 15.82 15.82 0 0 1 -1.67.26l-1 .09q-.52.03-1.04.03zm12-22q-.48 0-1 0l-.89.08a12.4 12.4 0 0 0 -1.46.23 16 16 0 0 0 -12.31 12.4 14.56 14.56 0 0 0 -.24 1.47c0 .31-.05.6-.07.88a15.67 15.67 0 0 0 .24 3.94.94.94 0 0 0 .76.77 15.42 15.42 0 0 0 3.91.25l.89-.08a12.4 12.4 0 0 0 1.46-.23 16 16 0 0 0 12.37-12.42 14.56 14.56 0 0 0 .24-1.47c0-.31.05-.59.07-.88a15.67 15.67 0 0 0 -.24-3.89.94.94 0 0 0 -.76-.77 15.21 15.21 0 0 0 -2.97-.28z" />
        <path d="m27 43a17.2 17.2 0 0 1 -3.31-.31 2.93 2.93 0 0 1 -2.36-2.38 18 18 0 0 1 -.33-4.37c0-.31 0-.62.08-.93a17.35 17.35 0 0 1 .27-1.72 18 18 0 0 1 13.94-13.91 15.82 15.82 0 0 1 1.71-.26l1-.09a18.23 18.23 0 0 1 4.39.28 2.93 2.93 0 0 1 2.36 2.38 18 18 0 0 1 .25 4.37c0 .31 0 .62-.08.93a17.35 17.35 0 0 1 -.27 1.72 18 18 0 0 1 -13.94 13.91 15.82 15.82 0 0 1 -1.67.26l-1 .09q-.52.03-1.04.03zm12-22q-.48 0-1 0l-.89.08a12.4 12.4 0 0 0 -1.46.23 16 16 0 0 0 -12.31 12.4 14.56 14.56 0 0 0 -.24 1.47c0 .31-.05.6-.07.88a15.67 15.67 0 0 0 .24 3.94.94.94 0 0 0 .76.77 15.42 15.42 0 0 0 3.91.25l.89-.08a12.4 12.4 0 0 0 1.46-.23 16 16 0 0 0 12.37-12.42 14.56 14.56 0 0 0 .24-1.47c0-.31.05-.59.07-.88a15.67 15.67 0 0 0 -.24-3.89.94.94 0 0 0 -.76-.77 15.21 15.21 0 0 0 -2.97-.28z" />
        <path d="m43 28a7 7 0 0 1 -6.92-8.06 1 1 0 0 1 .89-.82c.32 0 .65-.07 1-.09a18.23 18.23 0 0 1 4.39.28 2.93 2.93 0 0 1 2.36 2.38 18 18 0 0 1 .28 4.37c0 .31 0 .62-.08.93a1 1 0 0 1 -.83.93 6.93 6.93 0 0 1 -1.09.08zm-5-7a5 5 0 0 0 5 5v-.06a15.67 15.67 0 0 0 -.24-3.89.94.94 0 0 0 -.76-.77 15.39 15.39 0 0 0 -3.94-.28z" />
        <path d="m27 43a17.2 17.2 0 0 1 -3.31-.31 2.93 2.93 0 0 1 -2.36-2.38 18 18 0 0 1 -.33-4.37c0-.31 0-.62.08-.93a1 1 0 0 1 .83-.93 6.93 6.93 0 0 1 1.09-.08 7 7 0 0 1 6.92 8.06 1 1 0 0 1 -.89.82c-.32 0-.65.07-1 .09s-.69.03-1.03.03zm-4-7v.06a15.67 15.67 0 0 0 .27 3.94.94.94 0 0 0 .76.77 15.42 15.42 0 0 0 3.91.25h.06a5 5 0 0 0 -5-5.02z" />
        <path d="m30 35a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l6-6a1 1 0 0 1 1.42 1.42l-6 6a1 1 0 0 1 -.71.29z" />
        <path d="m34 33a1 1 0 0 1 -.71-.29l-2-2a1 1 0 0 1 1.42-1.42l2 2a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
        <path d="m36 31a1 1 0 0 1 -.71-.29l-2-2a1 1 0 0 1 1.42-1.42l2 2a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
        <path d="m32 35a1 1 0 0 1 -.71-.29l-2-2a1 1 0 0 1 1.42-1.42l2 2a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
        <path d="m52 28.54a1 1 0 0 1 -.71-.3l-3.53-3.53a1 1 0 0 1 0-1.42l3.53-3.53a1 1 0 0 1 1.42 0l3.53 3.53a1 1 0 0 1 0 1.42l-3.53 3.53a1 1 0 0 1 -.71.3zm-2.1-4.54 2.1 2.12 2.14-2.12-2.14-2.12z" />
        <path d="m16.2 41.73a1 1 0 0 1 -.71-.3l-4.24-4.24a1 1 0 0 1 0-1.41 1 1 0 0 1 1.42 0l4.24 4.22a1 1 0 0 1 -.71 1.71z" />
        <path d="m19 38.9a1 1 0 0 1 -.71-.29l-4.24-4.25a1 1 0 0 1 1.44-1.36l4.25 4.24a1 1 0 0 1 0 1.42 1 1 0 0 1 -.74.24z" />
    </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": "ticket"
}
  • 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