footballrs.net

Icon: long-shot 

<i class="long-shot"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
        <path d="m29.07 46a30.1 30.1 0 0 1 -4.35-.31 7.59 7.59 0 0 1 -6.41-6.41 30.94 30.94 0 0 1 23.4-34.43 31.13 31.13 0 0 1 4.78-.75 30.82 30.82 0 0 1 6.79.21 7.58 7.58 0 0 1 6.41 6.41 31.19 31.19 0 0 1 -.54 11.56 29.3 29.3 0 0 1 -1 3.23 31 31 0 0 1 -10.2 14 30.44 30.44 0 0 1 -8.49 4.65 28.5 28.5 0 0 1 -3.22 1 30.81 30.81 0 0 1 -4.77.75c-.78.09-1.59.09-2.4.09zm19.86-40q-1.14 0-2.28.09a29.55 29.55 0 0 0 -4.47.7 29 29 0 0 0 -21.39 21.39 29.55 29.55 0 0 0 -.7 4.47 28.67 28.67 0 0 0 .2 6.35 5.56 5.56 0 0 0 4.71 4.71 28.67 28.67 0 0 0 6.35.2 28.15 28.15 0 0 0 7.47-1.6 28.79 28.79 0 0 0 8-4.35 30.54 30.54 0 0 0 2.76-2.43 30.54 30.54 0 0 0 2.42-2.76 28.88 28.88 0 0 0 4.35-7.94 30.69 30.69 0 0 0 .9-3 29.48 29.48 0 0 0 .7-4.48 28.6 28.6 0 0 0 -.2-6.34 5.56 5.56 0 0 0 -4.75-4.72 29.21 29.21 0 0 0 -4.07-.29z" />
        <path d="m29.07 46a30.1 30.1 0 0 1 -4.35-.31 7.59 7.59 0 0 1 -6.41-6.41 30.94 30.94 0 0 1 23.4-34.43 31.13 31.13 0 0 1 4.78-.75 30.82 30.82 0 0 1 6.79.21 7.58 7.58 0 0 1 6.41 6.41 31.19 31.19 0 0 1 -.54 11.56 29.3 29.3 0 0 1 -1 3.23 31 31 0 0 1 -10.2 14 30.44 30.44 0 0 1 -8.49 4.65 28.5 28.5 0 0 1 -3.22 1 30.81 30.81 0 0 1 -4.77.75c-.78.09-1.59.09-2.4.09zm19.86-40q-1.14 0-2.28.09a29.55 29.55 0 0 0 -4.47.7 29 29 0 0 0 -21.39 21.39 29.55 29.55 0 0 0 -.7 4.47 28.67 28.67 0 0 0 .2 6.35 5.56 5.56 0 0 0 4.71 4.71 28.67 28.67 0 0 0 6.35.2 28.15 28.15 0 0 0 7.47-1.6 28.79 28.79 0 0 0 8-4.35 30.54 30.54 0 0 0 2.76-2.43 30.54 30.54 0 0 0 2.42-2.76 28.88 28.88 0 0 0 4.35-7.94 30.69 30.69 0 0 0 .9-3 29.48 29.48 0 0 0 .7-4.48 28.6 28.6 0 0 0 -.2-6.34 5.56 5.56 0 0 0 -4.75-4.72 29.21 29.21 0 0 0 -4.07-.29z" />
        <path d="m29.07 46a30.1 30.1 0 0 1 -4.35-.31 7.59 7.59 0 0 1 -6.41-6.41 30.73 30.73 0 0 1 -.21-6.78 1 1 0 0 1 .39-.72 1 1 0 0 1 .8-.19 16.91 16.91 0 0 1 13.12 13.12 1 1 0 0 1 -.19.8 1 1 0 0 1 -.72.39c-.81.1-1.62.1-2.43.1zm-9.07-12.17a28.82 28.82 0 0 0 .29 5.17 5.56 5.56 0 0 0 4.71 4.71 28.82 28.82 0 0 0 5.17.27 14.79 14.79 0 0 0 -3.77-6.38 14.79 14.79 0 0 0 -6.4-3.77z" />
        <path d="m29.07 46a30.1 30.1 0 0 1 -4.35-.31 7.59 7.59 0 0 1 -6.41-6.41 31.19 31.19 0 0 1 .54-11.56 1 1 0 0 1 1.15-.72 21.44 21.44 0 0 1 11.1 5.91 21.45 21.45 0 0 1 5.9 11.09 1 1 0 0 1 -.75 1.16 30.81 30.81 0 0 1 -4.77.75c-.79.09-1.6.09-2.41.09zm-8.49-16.86a30.89 30.89 0 0 0 -.49 3.51 28.67 28.67 0 0 0 .2 6.35 5.56 5.56 0 0 0 4.71 4.71 28.67 28.67 0 0 0 6.35.2 30.89 30.89 0 0 0 3.51-.49 19.61 19.61 0 0 0 -14.28-14.28z" />
        <path d="m58.91 18.43h-.2a16.76 16.76 0 0 1 -8.52-4.6 16.76 16.76 0 0 1 -4.6-8.52 1 1 0 0 1 .19-.8 1 1 0 0 1 .72-.39 30.75 30.75 0 0 1 6.78.21 7.59 7.59 0 0 1 6.41 6.41 30.75 30.75 0 0 1 .21 6.78 1 1 0 0 1 -1 .93zm-11.08-12.43a14.79 14.79 0 0 0 3.77 6.4 14.79 14.79 0 0 0 6.4 3.77 28.82 28.82 0 0 0 -.29-5.17 5.56 5.56 0 0 0 -4.71-4.71 28.77 28.77 0 0 0 -5.17-.29z" />
        <path d="m58.18 23.05a.62.62 0 0 1 -.18-.05 21.53 21.53 0 0 1 -17-17 1 1 0 0 1 .75-1.16 31.14 31.14 0 0 1 11.56-.54 7.59 7.59 0 0 1 6.41 6.41 31.19 31.19 0 0 1 -.54 11.56 1 1 0 0 1 -1 .78zm-15-16.47a19.43 19.43 0 0 0 5.12 9.12 19.43 19.43 0 0 0 9.12 5.16 30.75 30.75 0 0 0 .49-3.52 28.6 28.6 0 0 0 -.2-6.34 5.56 5.56 0 0 0 -4.71-4.71 28.67 28.67 0 0 0 -6.35-.2 30.89 30.89 0 0 0 -3.51.49z" />
        <path d="m33.71 31.29a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l10.58-10.59a1 1 0 0 1 1.42 1.42l-10.58 10.58a1 1 0 0 1 -.71.29z" />
        <path d="m40.32 27.32a1 1 0 0 1 -.7-.29l-2.62-2.65a1 1 0 1 1 1.38-1.38l2.62 2.62a1 1 0 0 1 0 1.38 1 1 0 0 1 -.68.32z" />
        <path d="m43.63 24a1 1 0 0 1 -.71-.3l-2.64-2.64a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l2.64 2.64a1 1 0 0 1 0 1.41 1 1 0 0 1 -.7.3z" />
        <path d="m37 30.63a1 1 0 0 1 -.71-.3l-2.64-2.64a1 1 0 0 1 0-1.41 1 1 0 0 1 1.41 0l2.64 2.64a1 1 0 0 1 -.7 1.71z" />
        <path d="m9 55a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l11.5-11.5a1 1 0 0 1 1.42 1.42l-11.5 11.5a1 1 0 0 1 -.71.29z" />
        <path d="m30 57a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l17-17a1 1 0 0 1 1.42 1.42l-17 17a1 1 0 0 1 -.71.29z" />
        <path d="m10.5 32.5a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l15.5-15.5a1 1 0 0 1 1.42 1.42l-15.5 15.5a1 1 0 0 1 -.71.29z" />
        <path d="m8 44a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l7-7a1 1 0 0 1 1.42 1.42l-7 7a1 1 0 0 1 -.71.29z" />
        <path d="m17.5 59.5a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l9.5-9.5a1 1 0 0 1 1.42 1.42l-9.5 9.5a1 1 0 0 1 -.71.29z" />
        <circle cx="8" cy="34" r="1" />
        <circle cx="6" cy="57" r="1" />
    </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": "long-shot"
}
  • 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