footballrs.net

Icon: logo white 

<i class="logo--white logo"><svg viewBox="0 0 300 96.23" xmlns="http://www.w3.org/2000/svg">
        <g>
            <path d="m0 19.216v30.013h8.181v-11.5h8.512v-5.378h-8.512v-7.291h9.819v-5.846z" transform="translate(0 15.584)" />
            <path d="m25.072 19.216h-6.92c-5 0-6.871 2.291-6.871 5.8v18.42c0 3.506 1.869 5.8 6.871 5.8h6.92c5 0 6.871-2.291 6.871-5.8v-18.423c0-3.506-1.869-5.8-6.871-5.8m-1.309 23.146c0 .7-.375 1.029-1.168 1.029h-1.964c-.8 0-1.168-.328-1.168-1.029v-16.268c0-.7.373-1.029 1.168-1.029h1.969c.8 0 1.168.328 1.168 1.029z" transform="translate(9.15 15.585)" />
            <path d="m38.391 19.216h-6.918c-5 0-6.873 2.291-6.873 5.8v18.42c0 3.506 1.869 5.8 6.873 5.8h6.918c5 0 6.873-2.291 6.873-5.8v-18.423c0-3.506-1.869-5.8-6.873-5.8m-1.309 23.146c0 .7-.373 1.029-1.168 1.029h-1.964c-.8 0-1.168-.328-1.168-1.029v-16.268c0-.7.375-1.029 1.168-1.029h1.963c.8 0 1.168.328 1.168 1.029z" transform="translate(19.953 15.585)" />
            <path d="m37.094 25.06h5.75v24.17h8.181v-24.17h5.8v-5.844h-19.731z" transform="translate(30.086 15.585)" />
            <path d="m62.893 19.216h-13.744v30.013h13.744c5 0 6.873-2.291 6.873-5.8v-4.483c0-2.383-.42-4.021-2.244-4.816 1.824-.982 2.244-2.852 2.244-5.283v-3.834c0-3.506-1.871-5.8-6.873-5.8m-1.168 23.614c0 .7-.375 1.029-1.17 1.029h-3.365v-6.966h3.365c.8 0 1.17.328 1.17 1.029zm0-12.342c0 .7-.375 1.029-1.17 1.029h-3.365v-6.919h3.365c.8 0 1.17.328 1.17 1.029z" transform="translate(39.863 15.585)" />
            <path d="m69.15 19.216-7.713 30.013h8.041l.982-4.488h7.2l.935 4.488h8.228l-7.716-30.013zm2.572 19.728 2.385-10.8 2.291 10.8z" transform="translate(49.829 15.585)" />
            <path d="m84.664 19.216h-8.181v30.013h17.484v-5.844h-9.3z" transform="translate(62.032 15.585)" />
            <path d="m95.355 19.216h-8.181v30.013h17.484v-5.844h-9.3z" transform="translate(70.703 15.585)" />
            <path d="m118.62 32.764v-7.752c0-3.506-1.869-5.8-6.873-5.8h-13.883v30.018h8.181v-10.658h.514l4.768 10.658h8.789l-5.516-10.986a5.017 5.017 0 0 0 4.021-5.469m-8.181-.8c0 .7-.373 1.029-1.168 1.029h-3.225v-7.943h3.225c.8 0 1.168.328 1.168 1.029z" transform="translate(79.374 15.587)" />
            <path d="m124.612 31.558h-4.394c-.8 0-1.168-.328-1.168-1.029v-4.441c0-.7.373-1.029 1.168-1.029h1.356c.8 0 1.168.328 1.168 1.029v2.525h8.181v-3.6c0-3.506-1.824-5.8-6.826-5.8h-6.4c-5 0-6.826 2.291-6.826 5.8v6.17c0 3.506 1.449 5.89 6.312 5.89h4.488c.8 0 1.168.328 1.168 1.029v4.26c0 .7-.375 1.029-1.168 1.029h-1.356c-.8 0-1.168-.328-1.168-1.029v-2.537h-8.181v3.6c0 3.506 1.871 5.8 6.873 5.8h6.361c5 0 6.826-2.291 6.826-5.8v-6.17c0-3.506-1.543-5.7-6.4-5.7" transform="translate(89.924 15.587)" />
            <path d="m224.214 57.148h8.041v7.666h-8.041z" />
            <path d="m144.006 35.251-6.685-16.035h-7.012v30.013h7.48v-15.756l6.685 15.756h7.012v-30.013h-7.48z" transform="translate(105.688 15.585)" />
            <path d="m152.249 37.028h8.461v-5.845h-8.461v-6.125h9.818v-5.842h-18v30.013h18.42v-5.844h-10.237z" transform="translate(116.847 15.585)" />
            <path d="m154.757 19.216v5.844h5.75v24.17h8.181v-24.172h5.8v-5.842z" transform="translate(125.517 15.585)" />
            <path d="m161.713 12.08q.043.815.085 1.63a1.012 1.012 0 0 0 .831.971l1.88.181h.015l1.882.194a.688.688 0 0 0 .735-.634.748.748 0 0 0 -.011-.179l-.076-1.061a327.464 327.464 0 0 1 46.71 14.408l-.657-.75a228.825 228.825 0 0 0 -46.4-18.328q-.2-2.643-.4-5.288a1.046 1.046 0 0 0 -.819-.978q-1.8-.2-3.6-.373c-.413-.042-.724.328-.7.822q.063 1.073.123 2.148.068 1.179.132 2.354-5.341-1.233-10.667-2.126-.027-1.63-.058-3.251a.927.927 0 0 0 -.773-.938q-1.812-.122-3.611-.23a.78.78 0 0 0 -.755.8v.049 2.799q-5.295-.709-10.58-1.061.046-1.087.089-2.19a.824.824 0 0 0 -.721-.916q-1.812-.052-3.622-.085a.877.877 0 0 0 -.806.882c-.042.683-.082 1.367-.123 2.052q-5.286-.182-10.587 0 .106-1.046.206-2.094a.738.738 0 0 0 -.567-.875.719.719 0 0 0 -.083-.013q-1.812.019-3.622.058a.99.99 0 0 0 -.858.915q-.128 1.087-.255 2.157l-.014.12q-5.33.361-10.7 1.087.236-1.491.467-2.983c.078-.5-.2-.886-.612-.864q-1.812.092-3.622.2a1.125 1.125 0 0 0 -.906.951q-.182 1.087-.38 2.173l-.234 1.328q-5.433.9-10.921 2.2.527-2.448 1.047-4.89c.105-.5-.145-.878-.56-.84q-1.812.166-3.608.346a1.275 1.275 0 0 0 -.962.987q-.253 1.087-.505 2.186l-.833 3.569a243.066 243.066 0 0 0 -51.075 20.6 333.857 333.857 0 0 1 48.1-15.481c.623-.143 1.246-.281 1.869-.418l-.181.724c-.12.505.136.875.57.829l1.882-.181h.014l1.885-.181a1.266 1.266 0 0 0 .987-.983l.3-1.351q5.542-1.084 11.042-1.858l-.034.192q-.2 1.087-.393 2.173c-.091.5.181.882.625.855l1.885-.114h.017l1.889-.107a1.11 1.11 0 0 0 .936-.944q.223-1.366.442-2.733 5.463-.628 10.894-.951l-.136 1.108q-.133 1.087-.266 2.155a.712.712 0 0 0 .527.86.7.7 0 0 0 .15.02l1.9-.054h.014l1.891-.031a.982.982 0 0 0 .884-.906q.182-1.7.362-3.408 5.414-.182 10.807-.036c-.027.436-.056.875-.085 1.311q-.068 1.073-.141 2.148a.8.8 0 0 0 .681.9l.043.005 1.887.034h.014l1.889.043a.869.869 0 0 0 .833-.875q.079-1.682.154-3.363c.4.022.808.04 1.212.063q4.8.285 9.582.831v.773c0 .715-.005 1.429-.014 2.144a.9.9 0 0 0 .781.938l1.885.11h.015l1.887.12a.772.772 0 0 0 .781-.762c0-.027 0-.053 0-.08q-.014-1.285-.033-2.572 5.425.763 10.852 1.826" transform="translate(24.844)" />
        </g>
        <path d="m0 0h299.996v96.23h-299.996z" fill="none" />
        <path d="m0 0h300v96.23h-300z" fill="none" />
    </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": "logo",
  "className": "logo--white"
}
  • 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