footballrs.net

Icon: referee 

<i class="referee"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>referee</title>
        <g id="referee">
            <path d="M22,52a1,1,0,0,1-.42-.09A1,1,0,0,1,21,51V45a3.8,3.8,0,0,1,3.57-4H28a1,1,0,0,1,1,1v4a1,1,0,0,1-.36.77l-6,5A1,1,0,0,1,22,52Zm2.57-9A1.83,1.83,0,0,0,23,45v3.86l4-3.33V43Z" />
            <path d="M42,52a1,1,0,0,1-.64-.23l-6-5A1,1,0,0,1,35,46V42a1,1,0,0,1,1-1h3.43A3.8,3.8,0,0,1,43,45v6a1,1,0,0,1-.58.91A1,1,0,0,1,42,52Zm-5-6.47,4,3.33V45a1.83,1.83,0,0,0-1.57-2H37Z" />
            <path d="M46,29H44.85a1,1,0,0,1-1-1.15A12.49,12.49,0,0,0,44,26V20a1,1,0,0,1,1-1h1a5,5,0,0,1,0,10Zm0-2h0a3,3,0,0,0,3-3,3,3,0,0,0-3-3v5C46,26.34,46,26.67,46,27Z" />
            <path d="M19.15,29H18a5,5,0,0,1,0-10h1a1,1,0,0,1,1,1v6a12.49,12.49,0,0,0,.14,1.85,1,1,0,0,1-1,1.15ZM18,21a3,3,0,0,0-1.5.41,3.06,3.06,0,0,0-.64.48A3,3,0,0,0,18,27h0c0-.33,0-.66,0-1Z" />
            <path d="M32,40A14,14,0,0,1,18.16,28.15,13.77,13.77,0,0,1,18,26V17a7,7,0,0,1,7-7h.2A4.33,4.33,0,0,1,28.83,12a2.35,2.35,0,0,0,2,1.05h2.4a2.35,2.35,0,0,0,2-1.05A4.33,4.33,0,0,1,38.8,10H39a7,7,0,0,1,7,7v9a13.77,13.77,0,0,1-.16,2.15A14,14,0,0,1,32,40ZM25,12a5,5,0,0,0-5,5v9a12.49,12.49,0,0,0,.14,1.85,12,12,0,0,0,23.72,0A12.49,12.49,0,0,0,44,26V17a5,5,0,0,0-5-5h-.2a2.35,2.35,0,0,0-2,1.05A4.33,4.33,0,0,1,33.2,15H30.8a4.33,4.33,0,0,1-3.63-1.95,2.35,2.35,0,0,0-2-1.05Z" />
            <path d="M55,63H9a1,1,0,0,1-.78-.38A1,1,0,0,1,8,61.77L10,53.53A12.11,12.11,0,0,1,13.3,47.6a12.59,12.59,0,0,1,2.17-1.73A12.5,12.5,0,0,1,22,44a1,1,0,0,1,1,1v3.87l4.36-3.64a1,1,0,0,1,1.35.06L32,48.59l3.29-3.3a1,1,0,0,1,1.35-.06L41,48.87V45a1,1,0,0,1,1-1h.47a14.26,14.26,0,0,1,1.65.11,12.12,12.12,0,0,1,4.37,1.45,12.81,12.81,0,0,1,2.18,1.56,12.3,12.3,0,0,1,4,7.1L56,61.83a1,1,0,0,1-.21.81A1,1,0,0,1,55,63ZM10.26,61H53.81l-1.13-6.44a10.42,10.42,0,0,0-3.34-6A10.55,10.55,0,0,0,47.5,47.3a10.11,10.11,0,0,0-3.63-1.21c-.31,0-.6-.06-.87-.08v5a1,1,0,0,1-1.64.77l-5.3-4.42-3.35,3.36a1,1,0,0,1-1.42,0l-3.35-3.36-5.3,4.42A1,1,0,0,1,21,51v-5c-.28,0-.55.06-.82.11a10.2,10.2,0,0,0-3.65,1.41A9.83,9.83,0,0,0,14.71,49a10.17,10.17,0,0,0-2.8,5Z" />
            <path d="M32,51a1,1,0,0,1-.71-.29l-4-4A1,1,0,0,1,27,46V38.37a1,1,0,0,1,1.31-.95,12.08,12.08,0,0,0,7.38,0,1,1,0,0,1,1.31.95V46a1,1,0,0,1-.29.71l-4,4A1,1,0,0,1,32,51Zm-3-5.41,3,3,3-3V39.68a14.11,14.11,0,0,1-6,0Z" />
            <path d="M32,63H24a1,1,0,0,1-1-1V49.34a1,1,0,0,1,.36-.77l4-3.34a1,1,0,0,1,1.35.06l4,4A1,1,0,0,1,33,50V62A1,1,0,0,1,32,63Zm-7-2h6V50.41l-3.06-3.06L25,49.81Z" />
            <path d="M40,63H32a1,1,0,0,1-1-1V50a1,1,0,0,1,.29-.71l4-4a1,1,0,0,1,1.35-.06l4,3.34a1,1,0,0,1,.36.77V62A1,1,0,0,1,40,63Zm-7-2h6V49.81l-2.94-2.46L33,50.41Z" />
            <path d="M48,63H40a1,1,0,0,1-1-1V49.34a1,1,0,0,1,1.64-.77l.36.3V45a1,1,0,0,1,1-1h.47a14.26,14.26,0,0,1,1.65.11,12.12,12.12,0,0,1,4.37,1.45,1,1,0,0,1,.51.87V62A1,1,0,0,1,48,63Zm-7-2h6V47a10.13,10.13,0,0,0-3.13-.95c-.31,0-.6-.06-.87-.08v5a1,1,0,0,1-1.64.77l-.36-.3Z" />
            <path d="M55,63H48a1,1,0,0,1-1-1V46.43a1,1,0,0,1,.5-.87,1,1,0,0,1,1,0,13.12,13.12,0,0,1,2.17,1.56,12.3,12.3,0,0,1,4,7.1L56,61.83a1,1,0,0,1-.21.81A1,1,0,0,1,55,63Zm-6-2h4.81l-1.13-6.44a10.42,10.42,0,0,0-3.34-6c-.11-.1-.22-.2-.34-.29Z" />
            <path d="M16,63H9a1,1,0,0,1-.78-.38A1,1,0,0,1,8,61.77L10,53.53A12.11,12.11,0,0,1,13.3,47.6a12.59,12.59,0,0,1,2.17-1.73,1,1,0,0,1,1.53.85V62A1,1,0,0,1,16,63Zm-5.74-2H15V48.74a3.83,3.83,0,0,0-.29.28,10.17,10.17,0,0,0-2.8,5Z" />
            <path d="M24,63H16a1,1,0,0,1-1-1V46.72a1,1,0,0,1,.47-.85A12.5,12.5,0,0,1,22,44a1,1,0,0,1,1,1v3.87l.36-.3a1,1,0,0,1,1.64.77V62A1,1,0,0,1,24,63Zm-7-2h6V51.47l-.36.3A1,1,0,0,1,21,51v-5c-.28,0-.55.06-.82.11A10.58,10.58,0,0,0,17,47.29Z" />
            <path d="M48,21.54a1,1,0,0,1-.5-.13A3,3,0,0,0,46,21H45a1,1,0,0,1-1-1V17a5,5,0,0,0-5-5h-.2a2.35,2.35,0,0,0-2,1.05A4.33,4.33,0,0,1,33.2,15H30.8a4.33,4.33,0,0,1-3.63-1.95,2.35,2.35,0,0,0-2-1.05H25a5,5,0,0,0-5,5v3a1,1,0,0,1-1,1H18a3,3,0,0,0-1.5.41,1,1,0,0,1-1,0,1,1,0,0,1-.5-.87V15A14,14,0,0,1,29,1h6A14,14,0,0,1,49,15v5.54a1,1,0,0,1-.5.87A1,1,0,0,1,48,21.54ZM46,19a4.78,4.78,0,0,1,1,.1V15A12,12,0,0,0,35,3H29A12,12,0,0,0,17,15v4.1a4.78,4.78,0,0,1,1-.1V17a7,7,0,0,1,7-7h.2A4.33,4.33,0,0,1,28.83,12a2.35,2.35,0,0,0,2,1.05h2.4a2.35,2.35,0,0,0,2-1.05A4.33,4.33,0,0,1,38.8,10H39a7,7,0,0,1,7,7Z" />
        </g>
    </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": "referee"
}
  • 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