footballrs.net

Icon: free-kick 

<i class="free-kick"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>free kick</title>
        <g id="free_kick" data-name="free kick">
            <path d="M32,53a7.53,7.53,0,0,1-4.5-1.5,29.82,29.82,0,0,1-2.66-2.24A31.05,31.05,0,0,1,19.78,43a30.67,30.67,0,0,1,0-32A31.75,31.75,0,0,1,22.6,7.1a30.42,30.42,0,0,1,4.9-4.6,7.56,7.56,0,0,1,9,0,30.42,30.42,0,0,1,4.9,4.6A32.43,32.43,0,0,1,44.22,11a30.81,30.81,0,0,1,4.27,12.14,30.39,30.39,0,0,1,0,7.78A30.05,30.05,0,0,1,45.8,40.1,28.59,28.59,0,0,1,44.22,43,31.75,31.75,0,0,1,41.4,46.9c-.75.87-1.5,1.66-2.23,2.36A31.4,31.4,0,0,1,36.5,51.5,7.53,7.53,0,0,1,32,53ZM32,3A5.47,5.47,0,0,0,28.7,4.1a28.6,28.6,0,0,0-4.58,4.3A29.79,29.79,0,0,0,21.48,12a28.68,28.68,0,0,0,0,29.95,30.48,30.48,0,0,0,2.64,3.62,29.81,29.81,0,0,0,2.09,2.2,29.21,29.21,0,0,0,2.49,2.1,5.58,5.58,0,0,0,6.6,0,30.94,30.94,0,0,0,2.5-2.1c.68-.65,1.38-1.39,2.08-2.2A29.79,29.79,0,0,0,42.52,42c.54-.89,1-1.81,1.48-2.73a28.54,28.54,0,0,0,2.51-8.61,28.76,28.76,0,0,0,0-7.26A28.54,28.54,0,0,0,44,14.76c-.44-.92-.94-1.84-1.48-2.74A30.48,30.48,0,0,0,39.88,8.4,28.6,28.6,0,0,0,35.3,4.1,5.49,5.49,0,0,0,32,3Z" />
            <path d="M32,53a7.53,7.53,0,0,1-4.5-1.5,29.82,29.82,0,0,1-2.66-2.24A31.05,31.05,0,0,1,19.78,43a30.67,30.67,0,0,1,0-32A31.75,31.75,0,0,1,22.6,7.1a30.42,30.42,0,0,1,4.9-4.6,7.56,7.56,0,0,1,9,0,30.42,30.42,0,0,1,4.9,4.6A32.43,32.43,0,0,1,44.22,11a30.81,30.81,0,0,1,4.27,12.14,30.39,30.39,0,0,1,0,7.78A30.05,30.05,0,0,1,45.8,40.1,28.59,28.59,0,0,1,44.22,43,31.75,31.75,0,0,1,41.4,46.9c-.75.87-1.5,1.66-2.23,2.36A31.4,31.4,0,0,1,36.5,51.5,7.53,7.53,0,0,1,32,53ZM32,3A5.47,5.47,0,0,0,28.7,4.1a28.6,28.6,0,0,0-4.58,4.3A29.79,29.79,0,0,0,21.48,12a28.68,28.68,0,0,0,0,29.95,30.48,30.48,0,0,0,2.64,3.62,29.81,29.81,0,0,0,2.09,2.2,29.21,29.21,0,0,0,2.49,2.1,5.58,5.58,0,0,0,6.6,0,30.94,30.94,0,0,0,2.5-2.1c.68-.65,1.38-1.39,2.08-2.2A29.79,29.79,0,0,0,42.52,42c.54-.89,1-1.81,1.48-2.73a28.54,28.54,0,0,0,2.51-8.61,28.76,28.76,0,0,0,0-7.26A28.54,28.54,0,0,0,44,14.76c-.44-.92-.94-1.84-1.48-2.74A30.48,30.48,0,0,0,39.88,8.4,28.6,28.6,0,0,0,35.3,4.1,5.49,5.49,0,0,0,32,3Z" />
            <path d="M32,53a7.46,7.46,0,0,1-4.5-1.49,30.47,30.47,0,0,1-4.9-4.6,1,1,0,0,1-.23-.79,1,1,0,0,1,.44-.7,16.78,16.78,0,0,1,18.38,0,1,1,0,0,1,.44.7,1,1,0,0,1-.23.79,30.47,30.47,0,0,1-4.9,4.6A7.46,7.46,0,0,1,32,53Zm-7.09-6.51A27.89,27.89,0,0,0,28.7,49.9a5.52,5.52,0,0,0,6.6,0,27.89,27.89,0,0,0,3.79-3.42A15,15,0,0,0,24.91,46.48Z" />
            <path d="M32,53a7.46,7.46,0,0,1-4.5-1.49,30.47,30.47,0,0,1-4.9-4.6A31.37,31.37,0,0,1,19.78,43a1,1,0,0,1,.29-1.35,21.42,21.42,0,0,1,23.86,0A1,1,0,0,1,44.22,43,31.37,31.37,0,0,1,41.4,46.9a30.47,30.47,0,0,1-4.9,4.6A7.46,7.46,0,0,1,32,53ZM22,42.8a31.08,31.08,0,0,0,2.11,2.8,28.65,28.65,0,0,0,4.58,4.3,5.52,5.52,0,0,0,6.6,0,28.65,28.65,0,0,0,4.58-4.3A31.08,31.08,0,0,0,42,42.8a19.46,19.46,0,0,0-20,0Z" />
            <path d="M32,11.33a16.67,16.67,0,0,1-9.19-2.74,1,1,0,0,1-.44-.7,1,1,0,0,1,.23-.79,30.47,30.47,0,0,1,4.9-4.6,7.53,7.53,0,0,1,9,0,30.47,30.47,0,0,1,4.9,4.6,1,1,0,0,1,.23.79,1,1,0,0,1-.44.7A16.67,16.67,0,0,1,32,11.33ZM24.91,7.52a15,15,0,0,0,14.18,0A27.89,27.89,0,0,0,35.3,4.1h0a5.52,5.52,0,0,0-6.6,0A27.89,27.89,0,0,0,24.91,7.52Z" />
            <path d="M32,16a21.24,21.24,0,0,1-11.93-3.63A1,1,0,0,1,19.78,11,31.37,31.37,0,0,1,22.6,7.1a30.47,30.47,0,0,1,4.9-4.6,7.53,7.53,0,0,1,9,0,30.47,30.47,0,0,1,4.9,4.6A31.37,31.37,0,0,1,44.22,11a1,1,0,0,1-.29,1.35A21.24,21.24,0,0,1,32,16ZM22,11.2A19.31,19.31,0,0,0,32,14,19.31,19.31,0,0,0,42,11.2a31.08,31.08,0,0,0-2.11-2.8A28.65,28.65,0,0,0,35.3,4.1h0a5.52,5.52,0,0,0-6.6,0,28.65,28.65,0,0,0-4.58,4.3A31.08,31.08,0,0,0,22,11.2Z" />
            <path d="M32,35.41a1,1,0,0,1-1-1V19.59a1,1,0,0,1,2,0V34.41A1,1,0,0,1,32,35.41Z" />
            <path d="M33.85,28h-3.7a1,1,0,0,1,0-2h3.7a1,1,0,0,1,0,2Z" />
            <path d="M33.85,23.37h-3.7a1,1,0,0,1,0-2h3.7a1,1,0,0,1,0,2Z" />
            <path d="M33.85,32.63h-3.7a1,1,0,0,1,0-2h3.7a1,1,0,0,1,0,2Z" />
            <path d="M46,63H18a1,1,0,0,1-1-1,6,6,0,0,1,5-5.92V52c0-1.67,1.07-3.21,3-4.34a1,1,0,0,1,1.18.14,30.94,30.94,0,0,0,2.5,2.1,5.58,5.58,0,0,0,6.6,0,30.94,30.94,0,0,0,2.5-2.1A1,1,0,0,1,39,47.66c2,1.13,3,2.67,3,4.34v4.08A6,6,0,0,1,47,62,1,1,0,0,1,46,63ZM19.13,61H44.87A4,4,0,0,0,41,58a1,1,0,0,1-1-1V52a3,3,0,0,0-1.41-2.21c-.7.62-1.4,1.19-2.09,1.71a7.62,7.62,0,0,1-9,0c-.69-.52-1.39-1.09-2.09-1.71A3,3,0,0,0,24,52v5a1,1,0,0,1-1,1A4,4,0,0,0,19.13,61Z" />
            <path d="M33,58H23a1,1,0,0,1,0-2H33a1,1,0,0,1,0,2Z" />
        </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": "free-kick"
}
  • 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