footballrs.net

Icon: foam-hand 

<i class="foam-hand"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <path d="m20 30.14h-.14a1 1 0 0 1 -.86-1.14v-.21a1 1 0 0 1 2 0v.21a1.23 1.23 0 0 1 0 .33 1 1 0 0 1 -1 .81z" />
        <path d="m48 63h-32a1 1 0 0 1 -1-1v-7.39a11.18 11.18 0 0 0 -1.89-6.13 13 13 0 0 1 -2.11-7.09v-9.39a1 1 0 0 1 2 0 3 3 0 0 0 6 0v-3a1 1 0 0 1 2 0 3 3 0 0 0 6 0v-1a1 1 0 0 1 1-1h.13a1 1 0 0 1 .9.56 1.34 1.34 0 0 1 .09.26.56.56 0 0 0 0 .12v.08.09a.93.93 0 0 0 .09.2v.05a.3.3 0 0 1 0 .08l.07.11a2.68 2.68 0 0 0 .49.63.65.65 0 0 1 .12.11l.15.11.13.09.06.05s.18.1.19.1l.16.08a1.21 1.21 0 0 1 .2.09h.12.13.1.1.1.15a3.75 3.75 0 0 0 .67 0h.11.16.09.1.13.17l.17-.07.16-.08.25-.15.13-.09a1.56 1.56 0 0 0 .2-.16 2.74 2.74 0 0 0 .56-.69v-.09a.75.75 0 0 1 .07-.12.93.93 0 0 0 .09-.2v-.09-.08a.56.56 0 0 0 0-.12 1.34 1.34 0 0 1 .09-.26v-21.38a5.35 5.35 0 0 1 1.69-3.89 4.84 4.84 0 0 1 4-1.34 5.08 5.08 0 0 1 3.21 1.46 5 5 0 0 1 1.47 3.54v14.05a5.12 5.12 0 0 1 1.77 1.14l4.23 4.19a7 7 0 0 1 2 4.95v11.06a13.3 13.3 0 0 1 -2.21 7.23 10.92 10.92 0 0 0 -1.79 6v7.38a1 1 0 0 1 -1 1zm-31-2h30v-6.39a13 13 0 0 1 2.11-7.09 11.18 11.18 0 0 0 1.89-6.13v-11.06a5 5 0 0 0 -1.46-3.54l-4.19-4.18a3 3 0 0 0 -1.54-.83 1 1 0 0 1 -.81-1v-14.78a3 3 0 0 0 -.88-2.13 3.07 3.07 0 0 0 -1.93-.87 2.81 2.81 0 0 0 -2.13.79 3.33 3.33 0 0 0 -1.06 2.44v21.77a1 1 0 0 1 -.31.73 3.66 3.66 0 0 1 -.23.52 2 2 0 0 1 -.18.32 4.63 4.63 0 0 1 -.83 1.05l-.09.08a4.85 4.85 0 0 1 -.42.34l-.1.09-.21.13-.1.06-.21.12a4 4 0 0 1 -.4.19l-.22.08a.82.82 0 0 1 -.19.07l-.26.08h-.17a.85.85 0 0 1 -.24 0 1.9 1.9 0 0 1 -.27 0h-.16a6.73 6.73 0 0 1 -.9 0h-.12a3.23 3.23 0 0 1 -.33-.06.48.48 0 0 1 -.21 0h-.14l-.34-.11h-.07l-.26-.1a3.71 3.71 0 0 1 -.44-.21l-.17-.1-.1-.06-.21-.13-.06-.09a3.19 3.19 0 0 1 -.37-.29 5 5 0 0 1 -7.78 2.18 5 5 0 0 1 -7.91 3.11v5.39a10.92 10.92 0 0 0 1.79 6 13.3 13.3 0 0 1 2.21 7.22zm16.28-30.5.11.26-.11-.37zm-.68-.55h-.12zm-1.6-.12.14.05z" />
        <path d="m44 32.15a1 1 0 0 1 -.71-.29l-3.6-3.59a5 5 0 0 1 0-7.07 5 5 0 0 1 4.5-1.38 1 1 0 1 1 -.38 2 3.48 3.48 0 0 0 -.58-.05 3 3 0 0 0 -2.12.88 3 3 0 0 0 0 4.24l3.6 3.59a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.25z" />
        <path d="m44 36a1 1 0 0 1 -1-1v-3.85a1 1 0 0 1 2 0v3.85a1 1 0 0 1 -1 1z" />
        <path d="m44 32.15a1 1 0 0 1 -.71-.29l-3.49-3.48c-.12-.13-.24-.26-.35-.4a5.24 5.24 0 0 1 -1.09-4.38l.06-.27s0-.08 0-.12a2.67 2.67 0 0 1 .15-.4 3.44 3.44 0 0 1 .19-.39 2.71 2.71 0 0 1 .24-.42.21.21 0 0 1 0-.06 4.8 4.8 0 0 1 .32-.43 1.89 1.89 0 0 1 .23-.25l.19-.19a1.3 1.3 0 0 1 .19-.17 1.91 1.91 0 0 1 .35-.27 3.1 3.1 0 0 1 .61-.37 3.92 3.92 0 0 1 .47-.22l.15-.06.39-.12h.09a4.68 4.68 0 0 1 .54-.09 4.47 4.47 0 0 1 .6 0 5 5 0 0 1 1 .09 1 1 0 1 1 -.38 2 2.86 2.86 0 0 0 -.93 0l-.31.05-.3.09h-.07a1.23 1.23 0 0 0 -.26.12h-.1a2.2 2.2 0 0 0 -.31.2 1 1 0 0 0 -.15.12l-.11.09-.06.06a.3.3 0 0 0 -.08.08l-.15.16-.15.2-.07.11a1 1 0 0 0 -.09.14.3.3 0 0 1 -.06.11l-.11.23a.9.9 0 0 0 0 .16l-.07.28a3.2 3.2 0 0 0 .63 2.66 1.65 1.65 0 0 0 .22.24l3.49 3.48a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
        <path d="m32 32h-.47-.12a3.23 3.23 0 0 1 -.33-.06.48.48 0 0 1 -.21 0h-.14l-.34-.11h-.07l-.25-.1a3.28 3.28 0 0 1 -.45-.21l-.17-.1-.1-.06-.21-.13-.08-.23a3.15 3.15 0 0 1 -.38-.3 1.1 1.1 0 0 1 -.15-.14 4.29 4.29 0 0 1 -.81-1 2 2 0 0 1 -.18-.32 4.1 4.1 0 0 1 -.24-.56 2.67 2.67 0 0 1 -.11-.34.14.14 0 0 1 0-.07c0-.13-.06-.27-.09-.41a5.12 5.12 0 0 1 -.1-.86v-8a5 5 0 0 1 10 0v8a4.9 4.9 0 0 1 -.06.77c0 .16 0 .31-.09.45a.56.56 0 0 1 0 .12 2.22 2.22 0 0 1 -.1.31 4.1 4.1 0 0 1 -.24.56 2 2 0 0 1 -.18.32 4.63 4.63 0 0 1 -.83 1.05l-.09.08a4.85 4.85 0 0 1 -.42.34l-.1.09-.21.13-.1.06-.21.12a4 4 0 0 1 -.4.19l-.22.08a.82.82 0 0 1 -.19.07l-.26.08h-.17a.85.85 0 0 1 -.24 0 1.9 1.9 0 0 1 -.27 0h-.16zm1.28-1.5.11.26-.11-.37zm-1.86-.55h.1.15a3.75 3.75 0 0 0 .67 0h.11.16.09.1.13.17l.17-.07.16-.08.25-.15.13-.09a1.56 1.56 0 0 0 .2-.16 2.74 2.74 0 0 0 .56-.69v-.09a.75.75 0 0 1 .07-.12 1.56 1.56 0 0 0 .11-.26v-.08a.56.56 0 0 0 0-.12 1 1 0 0 1 0-.16v-.2a3.28 3.28 0 0 0 .25-.68v-8a3 3 0 0 0 -6 0v8a3.57 3.57 0 0 0 0 .47v.19a.29.29 0 0 1 0 .09.25.25 0 0 1 0 .07.56.56 0 0 0 0 .12v.08a1.56 1.56 0 0 0 .11.26v.05a.3.3 0 0 1 0 .08l.07.11a2.68 2.68 0 0 0 .49.63.65.65 0 0 1 .12.11l.15.11.13.09.06.05s.18.1.19.1l.16.08a1.21 1.21 0 0 1 .2.09h.12.13.1zm1.18 0h-.12zm-1.6-.12.14.05z" />
        <path d="m24 34a5 5 0 0 1 -5-5v-8a5 5 0 0 1 10 0v8a5 5 0 0 1 -5 5zm0-16a3 3 0 0 0 -3 3v8a3 3 0 0 0 6 0v-8a3 3 0 0 0 -3-3z" />
        <path d="m16 37a5 5 0 0 1 -5-5v-8a5 5 0 0 1 10 0v8a5 5 0 0 1 -5 5zm0-16a3 3 0 0 0 -3 3v8a3 3 0 0 0 6 0v-2.72a1 1 0 0 1 0-.28v-5a3 3 0 0 0 -3-3z" />
        <path d="m20 30.14h-.14a1 1 0 0 1 -.86-1.14v-.21a1 1 0 0 1 2 0v.21a1.23 1.23 0 0 1 0 .33 1 1 0 0 1 -1 .81z" />
        <path d="m37 56h-10a1 1 0 0 1 -1-1v-4a1 1 0 0 1 1-1h2v-7h-2a1 1 0 0 1 -1-1v-3a1 1 0 0 1 .45-.83l3-2a1 1 0 0 1 .55-.17h4a1 1 0 0 1 1 1v13h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1zm-9-2h8v-2h-2a1 1 0 0 1 -1-1v-13h-2.7l-2.3 1.54v1.46h2a1 1 0 0 1 1 1v9a1 1 0 0 1 -1 1h-2z" />
    </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": "foam-hand"
}
  • 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