footballrs.net

Icon: stadium 

<i class="stadium"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>stadium</title>
        <g id="stadium">
            <path d="M32,46c-9.27,0-17.92-1.11-23.74-3C3.44,41.35,1,39.34,1,37V26a1,1,0,0,1,2,0c0,1.18,2,3,7.49,4.54A84.6,84.6,0,0,0,32,33a84.6,84.6,0,0,0,21.51-2.46C59,29,61,27.18,61,26a1,1,0,0,1,2,0V37c0,2.34-2.44,4.35-7.26,6C49.92,44.89,41.27,46,32,46ZM3,29.37V37c0,1.31,2.2,2.82,5.9,4,5.62,1.87,14,3,23.1,3s17.48-1.08,23.1-3c3.7-1.23,5.9-2.74,5.9-4V29.37a20.3,20.3,0,0,1-7,3.09A84.93,84.93,0,0,1,32,35a84.93,84.93,0,0,1-22-2.54A20.3,20.3,0,0,1,3,29.37Z" />
            <path d="M32,35a84.93,84.93,0,0,1-22-2.54,1,1,0,0,1,0-1.92A84.93,84.93,0,0,1,32,28a84.93,84.93,0,0,1,22,2.54,1,1,0,0,1,0,1.92A84.93,84.93,0,0,1,32,35ZM14.61,31.5A95.34,95.34,0,0,0,32,33a95.34,95.34,0,0,0,17.39-1.5A95.34,95.34,0,0,0,32,30,95.34,95.34,0,0,0,14.61,31.5Z" />
            <path d="M32,35a84.93,84.93,0,0,1-22-2.54C4.09,30.82,1,28.58,1,26c0-5.85,16-9,31-9s31,3.15,31,9c0,2.58-3.09,4.82-9,6.46A84.93,84.93,0,0,1,32,35Zm0-16C14,19,3,23.08,3,26c0,1.18,2,3,7.49,4.54A84.6,84.6,0,0,0,32,33a84.6,84.6,0,0,0,21.51-2.46C59,29,61,27.18,61,26,61,23.08,50,19,32,19Z" />
            <path d="M32,56c-2,0-4,0-6.05-.16a1,1,0,0,1-.95-1V49a1,1,0,0,1,1-1H38a1,1,0,0,1,1,1v5.84a1,1,0,0,1-1,1C36,56,34,56,32,56Zm-5-2.11c3.43.15,6.57.15,10,0V50H27Z" />
            <path d="M32,56c-2,0-4,0-6.05-.16C13.53,55.17,1,52.17,1,47V37a1,1,0,0,1,2,0c0,1.31,2.2,2.82,5.9,4,5.62,1.87,14,3,23.1,3s17.48-1.08,23.1-3c3.7-1.23,5.9-2.74,5.9-4a1,1,0,0,1,2,0V47c0,5.17-12.53,8.17-25,8.84C36,56,34,56,32,56ZM3,40.39V47c0,2.69,8.81,6.07,23.05,6.84a107.36,107.36,0,0,0,11.9,0c14.24-.77,23-4.15,23-6.84V40.39A17.87,17.87,0,0,1,55.74,43C49.92,44.89,41.27,46,32,46S14.08,44.89,8.26,43A17.87,17.87,0,0,1,3,40.39Z" />
            <path d="M40,16H24a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1H40a1,1,0,0,1,1,1v6A1,1,0,0,1,40,16ZM25,14H39V10H25Z" />
            <path d="M27,19a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v3A1,1,0,0,1,27,19Z" />
            <path d="M37,19a1,1,0,0,1-1-1V15a1,1,0,0,1,2,0v3A1,1,0,0,1,37,19Z" />
            <path d="M12,15H5a1,1,0,0,1-.58-1.81l7-5A1,1,0,0,1,13,9v5A1,1,0,0,1,12,15ZM8.12,13H11V10.94Z" />
            <path d="M12,21a1,1,0,0,1-1-1V9a1,1,0,0,1,2,0V20A1,1,0,0,1,12,21Z" />
            <path d="M59,15H52a1,1,0,0,1-1-1V9a1,1,0,0,1,1.58-.81l7,5A1,1,0,0,1,59,15Zm-6-2h2.88L53,10.94Z" />
            <path d="M52,21a1,1,0,0,1-1-1V9a1,1,0,0,1,2,0V20A1,1,0,0,1,52,21Z" />
            <path d="M32,30a1,1,0,0,1-1-1V22a1,1,0,0,1,2,0v7A1,1,0,0,1,32,30Z" />
            <path d="M19.7,30.7a1,1,0,0,1-.71-.29l-5.7-5.7a1,1,0,0,1,1.42-1.42l5.7,5.7a1,1,0,0,1,0,1.42A1,1,0,0,1,19.7,30.7Z" />
            <path d="M44.3,30.7a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l5.7-5.7a1,1,0,0,1,1.42,1.42L45,30.41A1,1,0,0,1,44.3,30.7Z" />
            <path d="M32,42.5a1,1,0,0,1-1-1v-3a1,1,0,0,1,2,0v3A1,1,0,0,1,32,42.5Z" />
            <path d="M42,42a1,1,0,0,1-1-1V38a1,1,0,0,1,2,0v3A1,1,0,0,1,42,42Z" />
            <path d="M22,42a1,1,0,0,1-1-1V38a1,1,0,0,1,2,0v3A1,1,0,0,1,22,42Z" />
            <path d="M13,40a1,1,0,0,1-1-1V36a1,1,0,0,1,2,0v3A1,1,0,0,1,13,40Z" />
            <path d="M6,38a1,1,0,0,1-1-1V34a1,1,0,0,1,2,0v3A1,1,0,0,1,6,38Z" />
            <path d="M51,40a1,1,0,0,1-1-1V36a1,1,0,0,1,2,0v3A1,1,0,0,1,51,40Z" />
            <path d="M58,38a1,1,0,0,1-1-1V34a1,1,0,0,1,2,0v3A1,1,0,0,1,58,38Z" />
        </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": "stadium"
}
  • 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