footballrs.net

Icon: armor 

<i class="armor"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>armor protector</title>
        <g id="armor_protector" data-name="armor protector">
            <path d="M46,56H18a4,4,0,0,1-4-4V35.19l-3.95-9.86a1,1,0,0,1,.08-.9A1,1,0,0,1,10.9,24a11,11,0,0,0,4.9-1.61,1,1,0,0,1,.84-.1,1,1,0,0,1,.61.57l3.67,8.8A1,1,0,0,1,21,32V47a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2,1,1,0,0,1,2,0,2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V32a1,1,0,0,1,.08-.38l3.67-8.8a1,1,0,0,1,.61-.57,1,1,0,0,1,.84.1A11,11,0,0,0,53.1,24a1,1,0,0,1,.77.47,1,1,0,0,1,.08.9l-4,9.86V52A4,4,0,0,1,46,56ZM12.39,25.78l3.54,8.85A.94.94,0,0,1,16,35V52a2,2,0,0,0,2,2H46a2,2,0,0,0,2-2V35a.94.94,0,0,1,.07-.37l3.54-8.85a13.62,13.62,0,0,1-3.45-1.16L45,32.2V47a4,4,0,0,1-4,4H35a4,4,0,0,1-3-1.36A4,4,0,0,1,29,51H23a4,4,0,0,1-4-4V32.2l-3.16-7.58A13.62,13.62,0,0,1,12.39,25.78Z" />
            <path d="M10,26H4a3,3,0,0,1-3-3A15,15,0,0,1,5.39,12.39c.31-.31.64-.6,1-.88a15,15,0,0,1,6.41-3.17A15.86,15.86,0,0,1,16,8h2a5,5,0,0,1,4.84,3.75A4.5,4.5,0,0,1,23,13a12.84,12.84,0,0,1-2.44,7.59A13.29,13.29,0,0,1,19.2,22.2a12.68,12.68,0,0,1-2.35,1.85A13,13,0,0,1,11.06,26C10.72,26,10.36,26,10,26Zm6-16a12.88,12.88,0,0,0-8.35,3.05,10.27,10.27,0,0,0-.84.76A12.92,12.92,0,0,0,3,23a1,1,0,0,0,1,1h6a8.7,8.7,0,0,0,.89,0,11,11,0,0,0,4.91-1.61,10.68,10.68,0,0,0,2-1.57,11.85,11.85,0,0,0,1.16-1.36A10.87,10.87,0,0,0,21,13a2.75,2.75,0,0,0-.09-.73A3,3,0,0,0,18,10Z" />
            <path d="M32,26a1,1,0,0,1-.79-.39l-10-13a1,1,0,0,1-.11-1A1,1,0,0,1,22,11H42a1,1,0,0,1,.9.56,1,1,0,0,1-.11,1l-10,13A1,1,0,0,1,32,26ZM24,13l8,10.36L40,13Z" />
            <path d="M32,56a1,1,0,0,1-1-1V50a1,1,0,0,1,2,0v5A1,1,0,0,1,32,56Z" />
            <path d="M49,39H41a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z" />
            <path d="M49,45H41a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z" />
            <path d="M23,39H15a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z" />
            <path d="M23,45H15a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z" />
            <path d="M10,19a4,4,0,0,1-4-4V12.29a1,1,0,0,1,.35-.76,15,15,0,0,1,6.43-3.19,1,1,0,0,1,.85.2,1,1,0,0,1,.37.78V15A4,4,0,0,1,10,19ZM8,12.76V15a2,2,0,0,0,4,0V10.63A13.06,13.06,0,0,0,8,12.76Z" />
            <path d="M54,19a4,4,0,0,1-4-4V9.32a1,1,0,0,1,.37-.78,1,1,0,0,1,.85-.2,15,15,0,0,1,6.43,3.19,1,1,0,0,1,.35.76V15A4,4,0,0,1,54,19Zm-2-8.37V15a2,2,0,0,0,4,0V12.76A13.06,13.06,0,0,0,52,10.63Z" />
            <path d="M29,51H23a4,4,0,0,1-4-4V32.2l-3.59-8.62a1,1,0,0,1,.4-1.23,11,11,0,0,0,2-1.57,11.85,11.85,0,0,0,1.16-1.36A10.87,10.87,0,0,0,21,13a2.75,2.75,0,0,0-.09-.73,1,1,0,0,1,.16-.87,1,1,0,0,1,.8-.4H22a1,1,0,0,1,.79.39l10,13A1,1,0,0,1,33,25V47A4,4,0,0,1,29,51ZM17.57,23.58l3.35,8A1,1,0,0,1,21,32V47a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V25.34L22.88,14.79a12.73,12.73,0,0,1-2.32,5.8,12.73,12.73,0,0,1-3,3Z" />
            <path d="M41,51H35a4,4,0,0,1-4-4V25a1,1,0,0,1,.21-.61l10-13A1,1,0,0,1,42,11h.13a1,1,0,0,1,.8.4,1,1,0,0,1,.16.87A2.75,2.75,0,0,0,43,13a10.82,10.82,0,0,0,2.06,6.41,11.17,11.17,0,0,0,1.16,1.37,11,11,0,0,0,2,1.57,1,1,0,0,1,.4,1.23L45,32.2V47A4,4,0,0,1,41,51ZM33,25.34V47a2,2,0,0,0,2,2h6a2,2,0,0,0,2-2V32a1,1,0,0,1,.08-.38l3.35-8A13.37,13.37,0,0,1,44.8,22.2a12.67,12.67,0,0,1-1.36-1.62,12.64,12.64,0,0,1-2.32-5.79Z" />
            <path d="M42,13H22a1,1,0,0,1,0-2H42a1,1,0,0,1,0,2Z" />
            <path d="M60,26H54c-.36,0-.72,0-1.07,0a13.11,13.11,0,0,1-5.79-1.91A13,13,0,0,1,44.8,22.2a12.67,12.67,0,0,1-1.36-1.62A12.79,12.79,0,0,1,41,13a4.38,4.38,0,0,1,.17-1.27A5,5,0,0,1,46,8h2a15.69,15.69,0,0,1,3.21.34,15,15,0,0,1,6.44,3.19,12.61,12.61,0,0,1,1,.86A15,15,0,0,1,63,23a2.94,2.94,0,0,1-1,2.22A2.87,2.87,0,0,1,60,26ZM46,10a3,3,0,0,0-2.9,2.25A2.61,2.61,0,0,0,43,13a10.82,10.82,0,0,0,2.06,6.41,11.17,11.17,0,0,0,1.16,1.37,11,11,0,0,0,2,1.57A11.1,11.1,0,0,0,53.1,24c.3,0,.6,0,.9,0h6a.9.9,0,0,0,.64-.25A1,1,0,0,0,61,23a12.92,12.92,0,0,0-3.81-9.19,9.44,9.44,0,0,0-.82-.74A12.91,12.91,0,0,0,48,10Z" />
            <path d="M62,37a8,8,0,0,1-8-8V26.5a4.15,4.15,0,0,1,.46-1.95,1,1,0,0,1,.89-.55H60a.9.9,0,0,0,.64-.25,1,1,0,0,1,1.51.13A4.46,4.46,0,0,1,63,26.5V36A1,1,0,0,1,62,37Zm-6-11a2.73,2.73,0,0,0,0,.5V29a6,6,0,0,0,5,5.92V26.5a2.74,2.74,0,0,0-.08-.64A3.1,3.1,0,0,1,60,26Z" />
            <path d="M2,37a1,1,0,0,1-1-1V26.5a4.4,4.4,0,0,1,.86-2.62,1,1,0,0,1,.72-.41,1,1,0,0,1,.78.28A.9.9,0,0,0,4,24H8.65a1,1,0,0,1,.89.55A4.15,4.15,0,0,1,10,26.5V29A8,8,0,0,1,2,37ZM3.08,25.86A2.74,2.74,0,0,0,3,26.5v8.42A6,6,0,0,0,8,29V26.5A2.73,2.73,0,0,0,8,26H4A3.16,3.16,0,0,1,3.08,25.86Z" />
        </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": "armor"
}
  • 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