footballrs.net

Icon: jersey 

<i class="jersey"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>jersey</title>
        <g id="jersey">
            <path d="M48,60H16a1,1,0,0,1-1-1V33H5a1,1,0,0,1-1-1V22.07a17.83,17.83,0,0,1,1.38-6.91c.24-.58.49-1.11.77-1.64A18.23,18.23,0,0,1,9.29,9.29,18,18,0,0,1,19.88,4.14c.41-.06.84-.1,1.28-.12l.91,0H41.93l.9,0c.43,0,.87.06,1.29.12a17.42,17.42,0,0,1,4.72,1.24,17.81,17.81,0,0,1,5.87,3.91A18.15,18.15,0,0,1,60,22.07V32a1,1,0,0,1-1,1H49V59A1,1,0,0,1,48,60ZM17,58H47V32a1,1,0,0,1,1-1H58V22.07a16.14,16.14,0,0,0-1.91-7.6h0a16.18,16.18,0,0,0-8-7.25,16,16,0,0,0-4.2-1.1c-.38,0-.76-.08-1.14-.1l-.81,0H22.07l-.82,0a10.22,10.22,0,0,0-1.1.1,16.05,16.05,0,0,0-9.44,4.59,15.81,15.81,0,0,0-2.8,3.76c-.25.47-.47.94-.69,1.45A16,16,0,0,0,6,22.07V31H16a1,1,0,0,1,1,1Z" />
            <path d="M32,20.79a2.74,2.74,0,0,1-2.3-1.24L20.85,6.28a1,1,0,0,1-.05-1l.39-.72A1,1,0,0,1,22.07,4H42.78a1,1,0,0,1,.89.55,1,1,0,0,1-.05,1l-9.32,14A2.74,2.74,0,0,1,32,20.79ZM23.06,6l8.3,12.45a.77.77,0,0,0,1.28,0L40.93,6Z" />
            <path d="M32,15a1,1,0,0,1-.83-.45l-6-9a1,1,0,0,1-.05-1A1,1,0,0,1,26,4H38a1,1,0,0,1,.88.53,1,1,0,0,1-.05,1l-6,9A1,1,0,0,1,32,15ZM27.87,6,32,12.2,36.13,6Z" />
            <path d="M59,33H48a1,1,0,0,1-1-1V28a1,1,0,0,1,1-1H59a1,1,0,0,1,1,1v4A1,1,0,0,1,59,33ZM49,31h9V29H49Z" />
            <path d="M59,29H48a1,1,0,0,1-1-1V24a1,1,0,0,1,1-1H59a1,1,0,0,1,1,1v4A1,1,0,0,1,59,29ZM49,27h9V25H49Z" />
            <path d="M16,33H5a1,1,0,0,1-1-1V28a1,1,0,0,1,1-1H16a1,1,0,0,1,1,1v4A1,1,0,0,1,16,33ZM6,31h9V29H6Z" />
            <path d="M16,29H5a1,1,0,0,1-1-1V24a1,1,0,0,1,1-1H16a1,1,0,0,1,1,1v4A1,1,0,0,1,16,29ZM6,27h9V25H6Z" />
            <path d="M14,15H7a1,1,0,0,1-.88-1.47A18,18,0,0,1,19.88,4.14a1,1,0,0,1,.78.24,1,1,0,0,1,.34.75V8A7,7,0,0,1,14,15ZM8.8,13H14a5,5,0,0,0,5-5V6.3a16,16,0,0,0-8.29,4.41A15.47,15.47,0,0,0,8.8,13Z" />
            <path d="M57,15H50a7,7,0,0,1-7-7V5.13a1,1,0,0,1,.33-.75,1,1,0,0,1,.79-.24,17.42,17.42,0,0,1,4.72,1.24,17.81,17.81,0,0,1,5.87,3.91,18.08,18.08,0,0,1,3.14,4.24A1,1,0,0,1,57,15ZM45,6.3V8a5,5,0,0,0,5,5h5.2a15.47,15.47,0,0,0-1.91-2.29,15.81,15.81,0,0,0-5.21-3.49A16.24,16.24,0,0,0,45,6.3Z" />
            <path d="M16,25a1,1,0,0,1-1-1V20a1,1,0,0,1,2,0v4A1,1,0,0,1,16,25Z" />
            <path d="M48,25a1,1,0,0,1-1-1V20a1,1,0,0,1,2,0v4A1,1,0,0,1,48,25Z" />
            <path d="M28,44H24a1,1,0,0,1-.71-.29l-2-2A1,1,0,0,1,21,41V31a1,1,0,0,1,.29-.71l2-2A1,1,0,0,1,24,28h4a1,1,0,0,1,.71.29l2,2A1,1,0,0,1,31,31V41a1,1,0,0,1-.29.71l-2,2A1,1,0,0,1,28,44Zm-3.59-2h3.18L29,40.59V31.41L27.59,30H24.41L23,31.41v9.18Z" />
            <path d="M40,44H36a1,1,0,0,1-.71-.29l-2-2A1,1,0,0,1,33,41V31a1,1,0,0,1,.29-.71l2-2A1,1,0,0,1,36,28h4a1,1,0,0,1,.71.29l2,2A1,1,0,0,1,43,31V41a1,1,0,0,1-.29.71l-2,2A1,1,0,0,1,40,44Zm-3.59-2h3.18L41,40.59V31.41L39.59,30H36.41L35,31.41v9.18Z" />
            <path d="M34,26H30a1,1,0,0,1,0-2h4a1,1,0,0,1,0,2Z" />
            <path d="M48,60H16a1,1,0,0,1-1-1V55a1,1,0,0,1,1-1H48a1,1,0,0,1,1,1v4A1,1,0,0,1,48,60ZM17,58H47V56H17Z" />
        </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": "jersey"
}
  • 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