footballrs.net

Icon: trophy 

<i class="trophy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>thropy</title>
        <g id="thropy">
            <path d="M32,40a32.75,32.75,0,0,1-4.19-.27,32.48,32.48,0,0,1-9.92-2.9,30.06,30.06,0,0,1-3.16-1.7,34.07,34.07,0,0,1-4.17-3,33,33,0,0,1-5-5.28,8,8,0,0,1,0-9.62,33,33,0,0,1,5-5.28,33.41,33.41,0,0,1,4.18-3,33,33,0,0,1,34.52,0,33.41,33.41,0,0,1,4.18,3,33,33,0,0,1,5,5.28,8,8,0,0,1,0,9.62h0a33,33,0,0,1-5,5.28,33.41,33.41,0,0,1-4.18,3,30,30,0,0,1-3.16,1.71,32.32,32.32,0,0,1-9.91,2.89A32.75,32.75,0,0,1,32,40ZM32,6a31,31,0,0,0-16.22,4.57,32.11,32.11,0,0,0-3.92,2.86,31.24,31.24,0,0,0-4.66,5,6,6,0,0,0,0,7.22,31.24,31.24,0,0,0,4.66,5,32.11,32.11,0,0,0,3.92,2.86,31.24,31.24,0,0,0,3,1.59,30.5,30.5,0,0,0,9.32,2.73,31.4,31.4,0,0,0,7.87,0A30.6,30.6,0,0,0,45.25,35a32.59,32.59,0,0,0,3-1.6,32.11,32.11,0,0,0,3.92-2.86,31.24,31.24,0,0,0,4.66-5h0a6,6,0,0,0,0-7.22,31.24,31.24,0,0,0-4.66-5,32.11,32.11,0,0,0-3.92-2.86A31,31,0,0,0,32,6Z" />
            <path d="M32,40a32.75,32.75,0,0,1-4.19-.27,32.48,32.48,0,0,1-9.92-2.9,30.06,30.06,0,0,1-3.16-1.7,34.07,34.07,0,0,1-4.17-3,33,33,0,0,1-5-5.28,8,8,0,0,1,0-9.62,33,33,0,0,1,5-5.28,33.41,33.41,0,0,1,4.18-3,33,33,0,0,1,34.52,0,33.41,33.41,0,0,1,4.18,3,33,33,0,0,1,5,5.28,8,8,0,0,1,0,9.62h0a33,33,0,0,1-5,5.28,33.41,33.41,0,0,1-4.18,3,30,30,0,0,1-3.16,1.71,32.32,32.32,0,0,1-9.91,2.89A32.75,32.75,0,0,1,32,40ZM32,6a31,31,0,0,0-16.22,4.57,32.11,32.11,0,0,0-3.92,2.86,31.24,31.24,0,0,0-4.66,5,6,6,0,0,0,0,7.22,31.24,31.24,0,0,0,4.66,5,32.11,32.11,0,0,0,3.92,2.86,31.24,31.24,0,0,0,3,1.59,30.5,30.5,0,0,0,9.32,2.73,31.4,31.4,0,0,0,7.87,0A30.6,30.6,0,0,0,45.25,35a32.59,32.59,0,0,0,3-1.6,32.11,32.11,0,0,0,3.92-2.86,31.24,31.24,0,0,0,4.66-5h0a6,6,0,0,0,0-7.22,31.24,31.24,0,0,0-4.66-5,32.11,32.11,0,0,0-3.92-2.86A31,31,0,0,0,32,6Z" />
            <path d="M11.21,32.33a1,1,0,0,1-.65-.24,33,33,0,0,1-5-5.28,8,8,0,0,1,0-9.62,33,33,0,0,1,5-5.28,1,1,0,0,1,.79-.23,1,1,0,0,1,.69.44A17.82,17.82,0,0,1,15,22a17.82,17.82,0,0,1-3,9.88,1,1,0,0,1-.69.44ZM11,14.21A30.5,30.5,0,0,0,7.2,18.39a6,6,0,0,0,0,7.22A30.5,30.5,0,0,0,11,29.79,16,16,0,0,0,13,22,16,16,0,0,0,11,14.21Z" />
            <path d="M15.26,35.28a1,1,0,0,1-.52-.15,33.41,33.41,0,0,1-4.18-3,33,33,0,0,1-5-5.28,8,8,0,0,1,0-9.62,33,33,0,0,1,5-5.28,33.41,33.41,0,0,1,4.18-3,1,1,0,0,1,1.35.29A22.85,22.85,0,0,1,20,22a22.89,22.89,0,0,1-3.91,12.84A1,1,0,0,1,15.26,35.28ZM15,11.1a29.87,29.87,0,0,0-3.1,2.33,31.24,31.24,0,0,0-4.66,5,6,6,0,0,0,0,7.22,31.24,31.24,0,0,0,4.66,5A29.87,29.87,0,0,0,15,32.9,20.9,20.9,0,0,0,18,22,20.9,20.9,0,0,0,15,11.1Z" />
            <path d="M52.79,32.33h-.14a1,1,0,0,1-.69-.44,18,18,0,0,1,0-19.76,1,1,0,0,1,.69-.44,1,1,0,0,1,.79.23,33,33,0,0,1,5,5.28,8,8,0,0,1,0,9.62h0a33,33,0,0,1-5,5.28A1,1,0,0,1,52.79,32.33ZM53,14.21a16,16,0,0,0,0,15.58,30.5,30.5,0,0,0,3.78-4.18h0a6,6,0,0,0,0-7.22A30.5,30.5,0,0,0,53,14.21Z" />
            <path d="M48.74,35.28a1,1,0,0,1-.83-.44,23,23,0,0,1,0-25.68,1,1,0,0,1,1.35-.29,33.41,33.41,0,0,1,4.18,3,33,33,0,0,1,5,5.28,8,8,0,0,1,0,9.62h0a33,33,0,0,1-5,5.28,33.41,33.41,0,0,1-4.18,3A1,1,0,0,1,48.74,35.28ZM49,11.1a21.06,21.06,0,0,0,0,21.8,29.87,29.87,0,0,0,3.1-2.33,31.24,31.24,0,0,0,4.66-5h0a6,6,0,0,0,0-7.22,31.24,31.24,0,0,0-4.66-5A29.87,29.87,0,0,0,49,11.1Z" />
            <path d="M40,23H24a1,1,0,0,1,0-2H40a1,1,0,0,1,0,2Z" />
            <path d="M32,25a1,1,0,0,1-1-1V20a1,1,0,0,1,2,0v4A1,1,0,0,1,32,25Z" />
            <path d="M37,25a1,1,0,0,1-1-1V20a1,1,0,0,1,2,0v4A1,1,0,0,1,37,25Z" />
            <path d="M27,25a1,1,0,0,1-1-1V20a1,1,0,0,1,2,0v4A1,1,0,0,1,27,25Z" />
            <path d="M49,60H15a1,1,0,0,1-1-1,7,7,0,0,1,7-7H43a7,7,0,0,1,7,7A1,1,0,0,1,49,60ZM16.1,58H47.9A5,5,0,0,0,43,54H21A5,5,0,0,0,16.1,58Z" />
            <path d="M42,54H22a1,1,0,0,1-1-1V45a1,1,0,0,1,1-1H42a1,1,0,0,1,1,1v8A1,1,0,0,1,42,54ZM23,52H41V46H23Z" />
            <path d="M41.5,46h-19a1,1,0,0,1,0-2A4.51,4.51,0,0,0,27,39.5a3.94,3.94,0,0,0-.05-.6,1,1,0,0,1,1.12-1.15,31.33,31.33,0,0,0,7.86,0,1,1,0,0,1,1.12,1.15,3.94,3.94,0,0,0,0,.6A4.51,4.51,0,0,0,41.5,44a1,1,0,0,1,0,2ZM27.19,44h9.62A6.52,6.52,0,0,1,35,39.86a31.86,31.86,0,0,1-6,0A6.52,6.52,0,0,1,27.19,44Z" />
        </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": "trophy"
}
  • 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