footballrs.net

Icon: signet 

<i class="signet"><svg height="10" viewBox="0 0 100 10" width="100" xmlns="http://www.w3.org/2000/svg">
        <g>
            <path d="m0 19.214v10h2.727v-3.833h2.837v-1.791h-2.837v-2.429h3.273v-1.947z" transform="translate(0 -19.214)" />
            <path d="m15.878 19.216h-2.307c-1.667 0-2.29.763-2.29 1.931v6.136c0 1.168.623 1.931 2.29 1.931h2.307c1.667 0 2.29-.763 2.29-1.931v-6.136c0-1.168-.623-1.931-2.29-1.931m-.436 7.709c0 .233-.125.343-.389.343h-.653c-.265 0-.389-.109-.389-.343v-5.419c0-.233.124-.343.389-.343h.656c.265 0 .389.109.389.343z" transform="translate(-4.471 -19.215)" />
            <path d="m29.2 19.216h-2.309c-1.667 0-2.291.763-2.291 1.931v6.136c0 1.168.623 1.931 2.291 1.931h2.309c1.667 0 2.291-.763 2.291-1.931v-6.136c0-1.168-.623-1.931-2.291-1.931m-.436 7.709c0 .233-.124.343-.389.343h-.654c-.265 0-.389-.109-.389-.343v-5.419c0-.233.125-.343.389-.343h.654c.265 0 .389.109.389.343z" transform="translate(-9.749 -19.215)" />
            <path d="m37.094 21.163h1.917v8.052h2.727v-8.052h1.932v-1.947h-6.576z" transform="translate(-14.701 -19.215)" />
            <path d="m53.73 19.216h-4.581v10h4.581c1.667 0 2.291-.763 2.291-1.931v-1.497c0-.794-.14-1.339-.748-1.6.608-.327.748-.95.748-1.76v-1.281c0-1.168-.624-1.931-2.291-1.931m-.389 7.865c0 .233-.125.343-.39.343h-1.122v-2.324h1.122c.265 0 .39.109.39.343zm0-4.112c0 .233-.125.343-.39.343h-1.122v-2.3h1.122c.265 0 .39.109.39.343z" transform="translate(-19.478 -19.215)" />
            <path d="m64.008 19.216-2.571 10h2.68l.327-1.495h2.4l.312 1.495h2.744l-2.571-10zm.857 6.572.8-3.6.764 3.6z" transform="translate(-24.348 -19.215)" />
            <path d="m79.21 19.216h-2.727v10h5.828v-1.949h-3.1z" transform="translate(-30.311 -19.215)" />
            <path d="m89.9 19.216h-2.726v10h5.826v-1.949h-3.1z" transform="translate(-34.548 -19.215)" />
            <path d="m104.783 23.73v-2.582c0-1.168-.623-1.931-2.291-1.931h-4.628v10h2.727v-3.55h.171l1.589 3.55h2.93l-1.839-3.66a1.671 1.671 0 0 0 1.34-1.822m-2.727-.265c0 .233-.124.343-.389.343h-1.075v-2.649h1.075c.265 0 .389.109.389.343z" transform="translate(-38.785 -19.215)" />
            <path d="m115.453 23.328h-1.465c-.265 0-.389-.109-.389-.343v-1.479c0-.233.124-.343.389-.343h.452c.265 0 .389.109.389.343v.841h2.727v-1.2c0-1.168-.608-1.931-2.275-1.931h-2.133c-1.667 0-2.275.763-2.275 1.931v2.053c0 1.168.483 1.962 2.1 1.962h1.5c.265 0 .389.109.389.343v1.419c0 .233-.125.343-.389.343h-.452c-.265 0-.389-.109-.389-.343v-.845h-2.732v1.2c0 1.168.624 1.931 2.291 1.931h2.12c1.667 0 2.275-.763 2.275-1.931v-2.053c0-1.168-.514-1.9-2.135-1.9" transform="translate(-43.94 -19.215)" />
            <path d="m74.738 7.445h2.68v2.554h-2.68z" />
            <path d="m134.875 24.558-2.228-5.342h-2.337v10h2.49v-5.251l2.228 5.249h2.337v-10h-2.493z" transform="translate(-51.643 -19.215)" />
            <path d="m146.795 25.149h2.82v-1.949h-2.82v-2.04h3.273v-1.944h-6v10h6.14v-1.949h-3.408z" transform="translate(-57.096 -19.215)" />
            <path d="m154.757 19.216v1.947h1.917v8.052h2.726v-8.053h1.932v-1.946z" transform="translate(-61.332 -19.215)" />
        </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": "signet"
}
  • 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