footballrs.net

Icon: strategy 

<i class="strategy"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
        <title>strategy</title>
        <g id="strategy">
            <path d="M50,58H14a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1H50a1,1,0,0,1,1,1V57A1,1,0,0,1,50,58ZM15,56H49V10H15Z" />
            <path d="M51,63H13a5,5,0,0,1-5-5V10a5,5,0,0,1,5-5H25a1,1,0,0,1,1,1V7a1,1,0,0,0,1,1,1,1,0,0,1,0,2H15V56H49V10H37a1,1,0,0,1,0-2,1,1,0,0,0,1-1V6a1,1,0,0,1,1-1H51a5,5,0,0,1,5,5V58A5,5,0,0,1,51,63ZM13,7a3,3,0,0,0-3,3V58a3,3,0,0,0,3,3H51a3,3,0,0,0,3-3V10a3,3,0,0,0-3-3H40a3,3,0,0,1-.17,1H50a1,1,0,0,1,1,1V57a1,1,0,0,1-1,1H14a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1H24.17A3,3,0,0,1,24,7Z" />
            <path d="M50,58H14a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1H50a1,1,0,0,1,1,1V57A1,1,0,0,1,50,58ZM15,56H49V10H15Z" />
            <path d="M37,10H27a3,3,0,0,1-3-3V5a1,1,0,0,1,1-1h3.13a4,4,0,0,1,1-1.83,4.1,4.1,0,0,1,5.66,0,4,4,0,0,1,1,1.83H39a1,1,0,0,1,1,1V7A3,3,0,0,1,37,10ZM26,6V7a1,1,0,0,0,1,1H37a1,1,0,0,0,1-1V6H35a1,1,0,0,1-1-1,2,2,0,0,0-.59-1.41,2,2,0,0,0-2.82,0A2,2,0,0,0,30,5a1,1,0,0,1-1,1Z" />
            <path d="M50,58H14a1,1,0,0,1-1-1V9a1,1,0,0,1,1-1H50a1,1,0,0,1,1,1V57A1,1,0,0,1,50,58ZM15,56H49V10H15Z" />
            <path d="M42.5,53A3.5,3.5,0,1,1,46,49.5,3.5,3.5,0,0,1,42.5,53Zm0-5A1.5,1.5,0,1,0,44,49.5,1.5,1.5,0,0,0,42.5,48Z" />
            <path d="M21.5,37A3.5,3.5,0,1,1,25,33.5,3.5,3.5,0,0,1,21.5,37Zm0-5A1.5,1.5,0,1,0,23,33.5,1.5,1.5,0,0,0,21.5,32Z" />
            <path d="M40,33a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l4-4a1,1,0,0,1,1.42,1.42l-4,4A1,1,0,0,1,40,33Z" />
            <path d="M44,33a1,1,0,0,1-.71-.29l-4-4a1,1,0,0,1,1.42-1.42l4,4a1,1,0,0,1,0,1.42A1,1,0,0,1,44,33Z" />
            <path d="M22,20a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l4-4a1,1,0,0,1,1.42,1.42l-4,4A1,1,0,0,1,22,20Z" />
            <path d="M26,20a1,1,0,0,1-.71-.29l-4-4a1,1,0,0,1,1.42-1.42l4,4a1,1,0,0,1,0,1.42A1,1,0,0,1,26,20Z" />
            <path d="M43,48a1,1,0,0,1-1-1,13,13,0,0,0-4.36-9.87C34.49,34.55,30,33.83,24.2,35a1,1,0,1,1-.4-2c6.4-1.28,11.48-.42,15.11,2.56C43.63,39.45,44,45.3,44,47A1,1,0,0,1,43,48Z" />
            <path d="M23.27,32.73a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42L38.29,15.29a1,1,0,0,1,1.42,1.42L24,32.44A1,1,0,0,1,23.27,32.73Z" />
            <path d="M39,22a1,1,0,0,1-1-1V17H34a1,1,0,0,1,0-2h5a1,1,0,0,1,1,1v5A1,1,0,0,1,39,22Z" />
            <path d="M21.5,53A3.5,3.5,0,1,1,25,49.5,3.5,3.5,0,0,1,21.5,53Zm0-5A1.5,1.5,0,1,0,23,49.5,1.5,1.5,0,0,0,21.5,48Z" />
        </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": "strategy"
}
  • 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