footballrs.net

Icon: glove 

<i class="glove"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <path d="m34.46 23.81a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l11.32-11.31a1 1 0 0 1 1.41 0 1 1 0 0 1 0 1.42l-11.31 11.31a1 1 0 0 1 -.71.29z" />
        <path d="m40.12 29.47a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l9.9-9.9a1 1 0 1 1 1.41 1.42l-9.9 9.9a1 1 0 0 1 -.7.29z" />
        <path d="m44.36 36.54a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l9.9-9.9a1 1 0 0 1 1.45 1.42l-9.9 9.9a1 1 0 0 1 -.74.29z" />
        <path d="m21 62.7a1 1 0 0 1 -.71-.29l-15.53-15.56a1 1 0 0 1 0-1.41l5.24-5.22-.11-.22a10.39 10.39 0 0 1 -.25-5.69 10.28 10.28 0 0 1 2.57-4.76l4.9-18.79a5 5 0 0 1 1.29-2.29 5 5 0 0 1 7.88 1 4.94 4.94 0 0 1 .48 3.78l-1.52 6 14.17-14.12a5 5 0 0 1 8.5 2.94 5 5 0 0 1 6.18.43 4.8 4.8 0 0 1 1.56 3.5 5.33 5.33 0 0 1 -1.55 3.9l-.55.55a5 5 0 0 1 2.66 1.24 4.85 4.85 0 0 1 1.57 3.5 5.42 5.42 0 0 1 -1.56 3.91l-.55.54a5 5 0 0 1 2.83 8.49l-20.64 20.64a10.35 10.35 0 0 1 -10.65 2.51l-.21-.09-5.22 5.22a1 1 0 0 1 -.78.29zm-14.12-16.55 14.12 14.14 5-4.95a1 1 0 0 1 1-.24l.85.28a8.34 8.34 0 0 0 8.6-2l20.64-20.67a3 3 0 0 0 0-4.24 3 3 0 0 0 -4.24 0 1 1 0 0 1 -1.42-1.42l3.37-3.37a3.37 3.37 0 0 0 1-2.44 2.85 2.85 0 0 0 -.91-2.06 3 3 0 0 0 -2-.78 3 3 0 0 0 -2.12.88 1 1 0 0 1 -1.41 0 1 1 0 0 1 0-1.42l3.37-3.37a3.37 3.37 0 0 0 1-2.44 2.89 2.89 0 0 0 -.98-2.05 3.11 3.11 0 0 0 -2-.78 3.06 3.06 0 0 0 -2.12.88l-2.12 2.13a1 1 0 0 1 -1.41 0 1 1 0 0 1 0-1.42 3 3 0 0 0 -4.25-4.24l-16.76 16.72a1 1 0 0 1 -1.68-1l2.42-9.54a3 3 0 0 0 -5.83-1.53l-5 19a.89.89 0 0 1 -.26.45 8.43 8.43 0 0 0 -2.24 4 8.34 8.34 0 0 0 .21 4.59l.29.85a1 1 0 0 1 -.25 1z" />
        <path d="m37.29 42.58a3.5 3.5 0 0 1 -2.48-1l-9.19-9.19a3.51 3.51 0 0 1 0-4.95 3.59 3.59 0 0 1 4.95 0l9.19 9.19a3.51 3.51 0 0 1 -2.47 6zm-9.19-14.2a1.5 1.5 0 0 0 -1.06.44 1.47 1.47 0 0 0 -.44 1.06 1.46 1.46 0 0 0 .4 1.06l9.19 9.2a1.55 1.55 0 0 0 2.12 0 1.52 1.52 0 0 0 .44-1.06 1.5 1.5 0 0 0 -.4-1.08l-9.19-9.2a1.52 1.52 0 0 0 -1.06-.42z" />
        <path d="m30.22 49.65a3.52 3.52 0 0 1 -2.48-1l-9.19-9.19a3.5 3.5 0 1 1 4.95-5l9.19 9.19a3.51 3.51 0 0 1 -2.47 6zm-1.06-2.44a1.5 1.5 0 1 0 2.12-2.12l-9.19-9.2a1.51 1.51 0 1 0 -2.09 2.11z" />
        <path d="m23.15 53.51a1 1 0 0 1 -.71-.29l-12-12a1 1 0 0 1 0-1.42 1 1 0 0 1 1.41 0l12 12a1 1 0 0 1 0 1.42 1 1 0 0 1 -.7.29z" />
        <path d="m13.25 53.27a5 5 0 0 1 -3.54-1.47l-5-4.95a1 1 0 0 1 0-1.41l5.66-5.66a1 1 0 0 1 1.41 0l5 4.95a5 5 0 0 1 0 7.07 5 5 0 0 1 -3.53 1.47zm-2.12-2.88a3 3 0 0 0 4.24-4.24l-4.24-4.25-4.25 4.25z" />
    </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": "glove"
}
  • 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