footballrs.net

Icon: logo_subline subline accent 

<i class="logo_subline-subline--accent logo_subline"><svg viewBox="0 0 300 96.23" xmlns="http://www.w3.org/2000/svg">
        <g id="logo">
            <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>
        <g id="subline">
            <path d="m84.982 47.254h-1.734l-.273-1.193a2.225 2.225 0 0 0 -.67-.353 2.652 2.652 0 0 0 -.887-.143 1.716 1.716 0 0 0 -1.078.306.925.925 0 0 0 -.4.764.874.874 0 0 0 .38.723 4.077 4.077 0 0 0 1.521.507 6.208 6.208 0 0 1 2.637 1.035 2.292 2.292 0 0 1 .857 1.889 2.506 2.506 0 0 1 -1.11 2.108 4.794 4.794 0 0 1 -2.921.819 6.112 6.112 0 0 1 -2.03-.322 5.179 5.179 0 0 1 -1.641-.924l-.025-2.15h1.8l.353 1.248a1.457 1.457 0 0 0 .628.286 3.555 3.555 0 0 0 .831.094 2.11 2.11 0 0 0 1.2-.283.893.893 0 0 0 .411-.77.906.906 0 0 0 -.415-.735 4.254 4.254 0 0 0 -1.53-.547 6.155 6.155 0 0 1 -2.552-1.021 2.223 2.223 0 0 1 -.862-1.844 2.677 2.677 0 0 1 .991-2.075 4.146 4.146 0 0 1 2.822-.869 7.225 7.225 0 0 1 2.108.3 4.437 4.437 0 0 1 1.561.77z" transform="translate(62.835 35.529)" />
            <path d="m86.251 42.6v2.344h1.681v1.813h-1.681v4.872a1.126 1.126 0 0 0 .23.8.816.816 0 0 0 .619.239 3.892 3.892 0 0 0 .464-.024c.132-.014.281-.04.447-.074l.221 1.865a6.665 6.665 0 0 1 -.858.2 6.318 6.318 0 0 1 -.92.065 2.744 2.744 0 0 1 -2.056-.735 3.219 3.219 0 0 1 -.721-2.325v-4.884h-1.405v-1.812h1.405v-2.344z" transform="translate(66.727 34.552)" />
            <path d="m92.053 53.541a4.56 4.56 0 0 1 -.185-.491 4.1 4.1 0 0 1 -.125-.509 3.5 3.5 0 0 1 -1.117.858 3.36 3.36 0 0 1 -1.509.328 3.152 3.152 0 0 1 -2.231-.766 2.691 2.691 0 0 1 -.828-2.083 2.367 2.367 0 0 1 1.079-2.078 5.623 5.623 0 0 1 3.166-.733h1.317v-.937a1.407 1.407 0 0 0 -.4-1.07 1.644 1.644 0 0 0 -1.175-.38 2.828 2.828 0 0 0 -.788.1 2.081 2.081 0 0 0 -.556.244l-.168 1.025h-1.944l.009-2.123a7.252 7.252 0 0 1 1.623-.8 5.9 5.9 0 0 1 1.994-.328 4.538 4.538 0 0 1 2.887.871 2.968 2.968 0 0 1 1.11 2.481v3.95c0 .149 0 .288.005.417a3.023 3.023 0 0 0 .029.371l.788.107v1.547zm-2.237-1.724a2.214 2.214 0 0 0 1.061-.254 2.032 2.032 0 0 0 .743-.63v-1.46h-1.32a1.788 1.788 0 0 0 -1.248.386 1.2 1.2 0 0 0 -.424.924.952.952 0 0 0 .315.761 1.282 1.282 0 0 0 .869.273" transform="translate(69.798 35.522)" />
            <path d="m101.385 45.45-.893.132-3.521 9.312a5.119 5.119 0 0 1 -1.108 1.733 2.832 2.832 0 0 1 -2.092.7 3.31 3.31 0 0 1 -.614-.054c-.192-.034-.417-.085-.677-.15l.3-1.884.257.036a1.617 1.617 0 0 0 .23.018 1.418 1.418 0 0 0 .989-.313 2.069 2.069 0 0 0 .531-.784l.293-.724-3.034-7.88-.893-.141v-1.557h4.685v1.556l-1.069.177 1.308 3.82.134.69.053.009 1.512-4.519-1.076-.177v-1.556h4.687z" transform="translate(73.931 35.6)" />
            <path d="m99.54 53.808 1.246-.266v-5.933l-1.38-.266v-1.556h3.963v7.755l1.237.266v1.547h-5.066zm3.829-10.308h-2.583v-1.94h2.583z" transform="translate(80.624 33.707)" />
            <path d="m102.637 51.993 1.239-.264v-5.935l-1.371-.264v-1.558h3.776l.114 1.371a3.5 3.5 0 0 1 1.177-1.141 3.058 3.058 0 0 1 1.565-.406 2.884 2.884 0 0 1 2.264.911 4.209 4.209 0 0 1 .813 2.856v4.165l1.239.264v1.547h-4.935v-1.546l1.1-.264v-4.157a1.949 1.949 0 0 0 -.388-1.367 1.574 1.574 0 0 0 -1.177-.4 2 2 0 0 0 -.92.206 1.916 1.916 0 0 0 -.681.589v5.131l1.045.264v1.547h-4.864z" transform="translate(83.138 35.522)" />
            <path d="m115.161 42.6v2.344h1.681v1.813h-1.681v4.872a1.135 1.135 0 0 0 .23.8.821.821 0 0 0 .619.239 3.924 3.924 0 0 0 .465-.024c.132-.014.281-.04.446-.074l.221 1.865a6.6 6.6 0 0 1 -.858.2 6.3 6.3 0 0 1 -.92.065 2.739 2.739 0 0 1 -2.054-.735 3.211 3.211 0 0 1 -.723-2.325v-4.884h-1.405v-1.812h1.405v-2.344z" transform="translate(90.175 34.552)" />
            <path d="m114.769 48.668a5.127 5.127 0 0 1 1.2-3.506 4.714 4.714 0 0 1 6.632 0 5.117 5.117 0 0 1 1.2 3.51v.187a5.119 5.119 0 0 1 -1.2 3.515 4.731 4.731 0 0 1 -6.632 0 5.119 5.119 0 0 1 -1.2-3.515zm2.583.187a4.177 4.177 0 0 0 .46 2.1 1.767 1.767 0 0 0 2.95-.005 4.13 4.13 0 0 0 .464-2.1v-.187a4.083 4.083 0 0 0 -.469-2.077 1.585 1.585 0 0 0 -1.478-.8 1.566 1.566 0 0 0 -1.467.8 4.161 4.161 0 0 0 -.46 2.077z" transform="translate(93.084 35.522)" />
            <path d="m127.1 52.25a3.1 3.1 0 0 1 -2.679 1.4 3.005 3.005 0 0 1 -2.371-.967 4.453 4.453 0 0 1 -.858-3.012v-3.955l-1.052-.266v-1.556h3.635v5.792a2.5 2.5 0 0 0 .35 1.5 1.226 1.226 0 0 0 1.04.456 2.631 2.631 0 0 0 1.058-.2 1.868 1.868 0 0 0 .728-.572v-5.154l-1.132-.266v-1.556h3.714v7.755l1.157.264v1.548h-3.421z" transform="translate(97.439 35.6)" />
            <path d="m130.911 51.747a1.521 1.521 0 0 0 1.1-.4 1.427 1.427 0 0 0 .417-1.074h2.334l.027.053a2.992 2.992 0 0 1 -1.088 2.427 4.6 4.6 0 0 1 -6.092-.375 5.151 5.151 0 0 1 -1.159-3.475v-.266a5.1 5.1 0 0 1 1.188-3.475 4.269 4.269 0 0 1 3.392-1.362 5.9 5.9 0 0 1 2.079.346 4.1 4.1 0 0 1 1.53.973l.034 2.555h-2.1l-.426-1.494a1.625 1.625 0 0 0 -.476-.277 1.729 1.729 0 0 0 -.647-.112 1.628 1.628 0 0 0 -1.547.8 4.134 4.134 0 0 0 -.451 2.052v.257a4.4 4.4 0 0 0 .415 2.063 1.507 1.507 0 0 0 1.46.784" transform="translate(102.562 35.522)" />
            <path d="m131.594 53.807 1.246-.264v-10.162l-1.378-.264v-1.558h3.952v5.448a3.253 3.253 0 0 1 1.107-1.029 2.894 2.894 0 0 1 1.451-.368 2.941 2.941 0 0 1 2.354.992 4.645 4.645 0 0 1 .855 3.075v3.865l1.239.264v1.547h-4.935v-1.546l1.114-.264v-3.883a2.44 2.44 0 0 0 -.395-1.577 1.44 1.44 0 0 0 -1.17-.465 2.167 2.167 0 0 0 -.944.194 1.908 1.908 0 0 0 -.676.549v5.183l1.116.264v1.547h-4.935z" transform="translate(106.623 33.708)" />
            <path d="m144.042 54.188a3.148 3.148 0 0 1 -1.069 1.007 2.8 2.8 0 0 1 -1.4.346 3.249 3.249 0 0 1 -2.747-1.291 5.514 5.514 0 0 1 -.976-3.414v-.186a6.211 6.211 0 0 1 .98-3.651 3.187 3.187 0 0 1 2.76-1.389 2.642 2.642 0 0 1 1.291.315 3.167 3.167 0 0 1 1.007.887v-3.43l-1.38-.266v-1.556h3.964v11.982l1.237.266v1.547h-3.474zm-3.609-3.352a3.942 3.942 0 0 0 .418 1.976 1.474 1.474 0 0 0 1.376.721 1.994 1.994 0 0 0 .983-.23 1.831 1.831 0 0 0 .679-.663v-4.059a1.953 1.953 0 0 0 -.676-.712 1.815 1.815 0 0 0 -.967-.252 1.446 1.446 0 0 0 -1.382.84 4.769 4.769 0 0 0 -.433 2.191z" transform="translate(111.806 33.707)" />
            <path d="m143.66 48.668a5.134 5.134 0 0 1 1.2-3.506 4.714 4.714 0 0 1 6.632 0 5.109 5.109 0 0 1 1.2 3.51v.187a5.111 5.111 0 0 1 -1.2 3.515 4.731 4.731 0 0 1 -6.632 0 5.126 5.126 0 0 1 -1.2-3.515zm2.583.187a4.157 4.157 0 0 0 .46 2.1 1.765 1.765 0 0 0 2.948-.005 4.128 4.128 0 0 0 .465-2.1v-.187a4.1 4.1 0 0 0 -.469-2.077 1.587 1.587 0 0 0 -1.478-.8 1.564 1.564 0 0 0 -1.467.8 4.142 4.142 0 0 0 -.46 2.077z" transform="translate(116.516 35.522)" />
            <path d="m162.906 45.45-.963.123-2 7.889h-2.157l-1.778-5.7h-.053l-1.777 5.7h-2.15l-2.007-7.889-.963-.123v-1.556h4.332v1.556l-1.016.194.9 4.377h.053l1.786-6.127h1.733l1.8 6.145h.054l.893-4.386-1.027-.2v-1.559h4.334z" transform="translate(120.895 35.602)" />
            <path d="m157.084 51.993 1.239-.264v-5.935l-1.371-.264v-1.558h3.774l.116 1.371a3.517 3.517 0 0 1 1.177-1.141 3.068 3.068 0 0 1 1.565-.406 2.881 2.881 0 0 1 2.264.911 4.2 4.2 0 0 1 .813 2.856v4.165l1.239.264v1.547h-4.937v-1.546l1.107-.264v-4.157a1.94 1.94 0 0 0 -.388-1.367 1.568 1.568 0 0 0 -1.177-.4 2.011 2.011 0 0 0 -.92.206 1.969 1.969 0 0 0 -.683.589v5.131l1.047.264v1.547h-4.865z" transform="translate(127.297 35.522)" />
        </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": "logo_subline",
  "className": "logo_subline-subline--accent"
}
  • 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