footballrs.net

Icon: time 

<i class="time"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>time</title>
        <g id="time">
            <path d="M32,62a25.67,25.67,0,0,1-16.18-5.66,24.6,24.6,0,0,1-3.7-3.59A26,26,0,0,1,6,36a25.67,25.67,0,0,1,5.66-16.18,24.6,24.6,0,0,1,3.59-3.7,26,26,0,0,1,33.51,0,25,25,0,0,1,3.59,3.69A25.72,25.72,0,0,1,58,36a26,26,0,0,1-6.13,16.76A26,26,0,0,1,32,62Zm0-50a24,24,0,0,0-15.46,5.65,22.2,22.2,0,0,0-3.31,3.41A23.7,23.7,0,0,0,8,36a24,24,0,0,0,5.65,15.46,22.2,22.2,0,0,0,3.41,3.31,24,24,0,0,0,29.88,0,22.62,22.62,0,0,0,3.4-3.31A24,24,0,0,0,56,36a23.75,23.75,0,0,0-5.22-14.94,22.63,22.63,0,0,0-3.31-3.4A24,24,0,0,0,32,12Z" />
            <path d="M32,57a20.72,20.72,0,0,1-13.07-4.57,20.47,20.47,0,0,1-3-2.9A21,21,0,0,1,11,36a20.72,20.72,0,0,1,4.57-13.07,20.47,20.47,0,0,1,2.9-3,21,21,0,0,1,27.06,0,19.92,19.92,0,0,1,2.9,3A20.72,20.72,0,0,1,53,36a21,21,0,0,1-5,13.53,19.92,19.92,0,0,1-3,2.9A20.72,20.72,0,0,1,32,57Zm0-40a19,19,0,0,0-12.24,4.48,17.07,17.07,0,0,0-2.62,2.69A18.75,18.75,0,0,0,13,36a19,19,0,0,0,4.48,12.24,17.07,17.07,0,0,0,2.69,2.62,19,19,0,0,0,23.65,0,17.6,17.6,0,0,0,2.7-2.62A19,19,0,0,0,51,36a19,19,0,0,0-6.75-14.52A19,19,0,0,0,32,17Z" />
            <path d="M34.5,9h-5a3.5,3.5,0,0,1,0-7h5a3.5,3.5,0,0,1,0,7Zm-5-5a1.5,1.5,0,0,0,0,3h5a1.5,1.5,0,0,0,0-3Z" />
            <path d="M34,12H30a1,1,0,0,1-1-1V8a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v3A1,1,0,0,1,34,12Zm-3-2h2V9H31Z" />
            <path d="M12.44,21.44a1.05,1.05,0,0,1-.71-.29L10,19.46A3.48,3.48,0,0,1,15,14.54l1.64,1.64a1,1,0,0,1,.29.76,1,1,0,0,1-.36.72,22.09,22.09,0,0,0-3.3,3.4,1,1,0,0,1-.73.38Zm.06-5.91a1.44,1.44,0,0,0-1,.43,1.46,1.46,0,0,0,0,2.08l.91.91a25.6,25.6,0,0,1,2.06-2.11L13.54,16A1.44,1.44,0,0,0,12.5,15.53Z" />
            <path d="M51.56,21.44H51.5a1,1,0,0,1-.73-.38,22.09,22.09,0,0,0-3.3-3.4,1,1,0,0,1-.36-.72,1,1,0,0,1,.29-.76L49,14.54A3.48,3.48,0,1,1,54,19.46l-1.69,1.69A1.05,1.05,0,0,1,51.56,21.44Zm-2-4.6A25.6,25.6,0,0,1,51.63,19l.91-.91h0A1.47,1.47,0,0,0,50.46,16Z" />
            <circle cx="32" cy="20" r="1" />
            <circle cx="32" cy="52" r="1" />
            <circle cx="48" cy="36" r="1" />
            <circle cx="16" cy="36" r="1" />
            <circle cx="20.69" cy="24.69" r="1" />
            <circle cx="43.31" cy="47.31" r="1" />
            <circle cx="43.31" cy="24.69" r="1" />
            <circle cx="20.69" cy="47.31" r="1" />
            <path d="M32,39a3,3,0,1,1,3-3A3,3,0,0,1,32,39Zm0-4a1,1,0,1,0,1,1A1,1,0,0,0,32,35Z" />
            <path d="M32,35a1,1,0,0,1-1-1V25a1,1,0,0,1,2,0v9A1,1,0,0,1,32,35Z" />
        </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": "time"
}
  • 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