footballrs.net

Icon: shoe 

<i class="shoe"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>shoe</title>
        <g id="shoe">
            <path d="M21.4,34.61a5.38,5.38,0,0,1-5.4-5.4,1,1,0,0,1,.89-1L19,28a20,20,0,0,0,6.57-1.89A20.14,20.14,0,0,0,31,22.29a20.68,20.68,0,0,0,3-3.81,20.36,20.36,0,0,0,3-9.54,1,1,0,0,1,.38-.72A1,1,0,0,1,38.17,8l5.14.86A1,1,0,0,1,44,9.3a1,1,0,0,1,.15.78L43,15a1,1,0,0,1,0,.3c-.16.59-.35,1.17-.56,1.74A26.61,26.61,0,0,1,40,22.15a28.06,28.06,0,0,1-4.08,5.12,27.08,27.08,0,0,1-7.3,5.13,26.92,26.92,0,0,1-6.3,2.14l-.17,0A5.79,5.79,0,0,1,21.4,34.61Zm-3.28-4.52a3.39,3.39,0,0,0,3.73,2.49H22a25.31,25.31,0,0,0,5.78-2,25,25,0,0,0,6.75-4.75,26.44,26.44,0,0,0,3.79-4.75,25.33,25.33,0,0,0,2.28-4.76c.16-.46.32-.93.45-1.39a1.11,1.11,0,0,1,0-.17l.92-4.11-3-.5a22.31,22.31,0,0,1-1.19,5.17,22.28,22.28,0,0,1-5.35,8.37,22,22,0,0,1-6,4.19A21.82,21.82,0,0,1,19.19,30Z" />
            <path d="M10.5,56a2.84,2.84,0,0,1-2.77-2.27L7,50.2a1,1,0,0,1,.21-.83A1,1,0,0,1,8,49h5a1,1,0,0,1,.77.37,1,1,0,0,1,.21.83l-.71,3.53A2.84,2.84,0,0,1,10.5,56ZM9.22,51l.47,2.33a.82.82,0,0,0,1.62,0L11.78,51Z" />
            <path d="M21.5,56a2.84,2.84,0,0,1-2.77-2.27L18,50.2a1,1,0,0,1,.21-.83A1,1,0,0,1,19,49h5a1,1,0,0,1,.77.37,1,1,0,0,1,.21.83l-.71,3.53A2.84,2.84,0,0,1,21.5,56Zm-1.28-5,.47,2.33a.82.82,0,0,0,1.62,0L22.78,51Z" />
            <path d="M53.5,56a2.84,2.84,0,0,1-2.77-2.27L50,50.2a1,1,0,0,1,.21-.83A1,1,0,0,1,51,49h5a1,1,0,0,1,.77.37,1,1,0,0,1,.21.83l-.71,3.53A2.84,2.84,0,0,1,53.5,56Zm-1.28-5,.47,2.33a.82.82,0,0,0,1.62,0L54.78,51Z" />
            <path d="M56,46H50a1,1,0,0,1-1-1V41A10,10,0,0,1,59,31h3a1,1,0,0,1,1,1v7A7,7,0,0,1,56,46Zm-5-2h5a5,5,0,0,0,5-5V33H59a8,8,0,0,0-8,8Z" />
            <path d="M56,51H8a6.89,6.89,0,0,1-4.95-2.06A6.89,6.89,0,0,1,1,44a14.71,14.71,0,0,1,.24-2.69,1,1,0,0,1,1.93-.12A4,4,0,0,0,7,44H56a5,5,0,0,0,5-5,1,1,0,0,1,2,0v5A7,7,0,0,1,56,51ZM3,44.5A5,5,0,0,0,8,49H56a5,5,0,0,0,5-5v-.11A7,7,0,0,1,56,46H7A6,6,0,0,1,3,44.5Z" />
            <path d="M56,51H8a6.89,6.89,0,0,1-4.95-2.06A6.89,6.89,0,0,1,1,44a15.08,15.08,0,0,1,.23-2.64v0A15.77,15.77,0,0,1,14.79,28.45L19,28a20,20,0,0,0,6.57-1.89A20.14,20.14,0,0,0,31,22.29a20.68,20.68,0,0,0,3-3.81,20.36,20.36,0,0,0,3-9.54A1,1,0,0,1,38.16,8l20.66,3.44A5,5,0,0,1,63,16.39V44A7,7,0,0,1,56,51ZM3.21,41.61a.13.13,0,0,1,0,.06A13.47,13.47,0,0,0,3,44a5,5,0,0,0,5,5H56a5,5,0,0,0,5-5V16.39a3,3,0,0,0-2.5-3L38.91,10.17a22.31,22.31,0,0,1-1.19,5.17,22.28,22.28,0,0,1-5.35,8.37,22,22,0,0,1-6,4.19A21.82,21.82,0,0,1,19.19,30L15,30.43A13.77,13.77,0,0,0,3.21,41.61Z" />
            <path d="M42,46a1,1,0,0,1-.71-.29L27.68,32.1a1,1,0,0,1,1.42-1.42L42.71,44.29a1,1,0,0,1,0,1.42A1,1,0,0,1,42,46Z" />
            <path d="M34.92,46a1,1,0,0,1-.71-.29L22.51,34a1,1,0,1,1,1.42-1.42l11.7,11.71a1,1,0,0,1,0,1.42A1,1,0,0,1,34.92,46Z" />
            <path d="M49.08,46a1,1,0,0,1-.71-.29L32,29.39A1,1,0,0,1,33.46,28L49.79,44.29a1,1,0,0,1,0,1.42A1,1,0,0,1,49.08,46Z" />
        </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": "shoe"
}
  • 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