<i class="football"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="m17.24 60a43.1 43.1 0 0 1 -7.85-.72 5.82 5.82 0 0 1 -4.66-4.66 43 43 0 0 1 .19-16.68 42.73 42.73 0 0 1 39.3-33.86 43.06 43.06 0 0 1 10.39.65 5.83 5.83 0 0 1 4.66 4.66 43.06 43.06 0 0 1 .65 10.39 43.09 43.09 0 0 1 -.84 6.29 42.73 42.73 0 0 1 -33 33 43 43 0 0 1 -6.28.84c-.87.09-1.72.09-2.56.09zm29.52-54c-.81 0-1.61 0-2.42.07a40.69 40.69 0 0 0 -38.26 38.27 41.15 41.15 0 0 0 .61 9.91 3.86 3.86 0 0 0 3.06 3.06 41.15 41.15 0 0 0 9.91.61 40.67 40.67 0 0 0 26.4-11.86 40.62 40.62 0 0 0 11.86-26.4 41.15 41.15 0 0 0 -.61-9.91 3.86 3.86 0 0 0 -3.06-3.06 41.82 41.82 0 0 0 -7.49-.69z" />
<path d="m17.24 60a43.1 43.1 0 0 1 -7.85-.72 5.82 5.82 0 0 1 -4.66-4.66 43 43 0 0 1 .19-16.68 42.73 42.73 0 0 1 39.3-33.86 43.06 43.06 0 0 1 10.39.65 5.83 5.83 0 0 1 4.66 4.66 43.06 43.06 0 0 1 .65 10.39 43.09 43.09 0 0 1 -.84 6.29 42.73 42.73 0 0 1 -33 33 43 43 0 0 1 -6.28.84c-.87.09-1.72.09-2.56.09zm29.52-54c-.81 0-1.61 0-2.42.07a40.69 40.69 0 0 0 -38.26 38.27 41.15 41.15 0 0 0 .61 9.91 3.86 3.86 0 0 0 3.06 3.06 41.15 41.15 0 0 0 9.91.61 40.67 40.67 0 0 0 26.4-11.86 40.62 40.62 0 0 0 11.86-26.4 41.15 41.15 0 0 0 -.61-9.91 3.86 3.86 0 0 0 -3.06-3.06 41.82 41.82 0 0 0 -7.49-.69z" />
<path d="m23 42a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.42l18-18a1 1 0 0 1 1.42 1.42l-18 18a1 1 0 0 1 -.71.29z" />
<path d="m34 35a1 1 0 0 1 -.71-.29l-4-4a1 1 0 0 1 1.42-1.42l4 4a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
<path d="m28 41a1 1 0 0 1 -.71-.29l-4-4a1 1 0 0 1 1.42-1.42l4 4a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
<path d="m40 29a1 1 0 0 1 -.71-.29l-4-4a1 1 0 0 1 1.42-1.42l4 4a1 1 0 0 1 0 1.42 1 1 0 0 1 -.71.29z" />
<path d="m58.1 26.86a1 1 0 0 1 -.35-.06 35 35 0 0 1 -20.55-20.55 1 1 0 0 1 .73-1.33 43 43 0 0 1 16.68-.19 5.83 5.83 0 0 1 4.66 4.66 43 43 0 0 1 -.19 16.68 1 1 0 0 1 -1 .79zm-18.59-20.21a33 33 0 0 0 17.84 17.84 40.08 40.08 0 0 0 .57-4.83 41.15 41.15 0 0 0 -.61-9.91 3.86 3.86 0 0 0 -3.06-3.06 41.11 41.11 0 0 0 -9.91-.61 40.08 40.08 0 0 0 -4.83.57z" />
<path d="m58.92 20.72a1.14 1.14 0 0 1 -.4-.08 29 29 0 0 1 -15.16-15.16 1 1 0 0 1 .86-1.4 43.06 43.06 0 0 1 10.39.65 5.83 5.83 0 0 1 4.66 4.66 43.06 43.06 0 0 1 .65 10.39 1 1 0 0 1 -.48.79 1 1 0 0 1 -.52.15zm-13.1-14.72a27 27 0 0 0 12.18 12.18 41.11 41.11 0 0 0 -.67-8.43 3.86 3.86 0 0 0 -3.06-3.06 41.77 41.77 0 0 0 -8.45-.69z" />
<path d="m17.24 60a43.1 43.1 0 0 1 -7.85-.72 5.82 5.82 0 0 1 -4.66-4.66 43 43 0 0 1 .19-16.68 1 1 0 0 1 1.33-.73 35 35 0 0 1 20.55 20.54 1 1 0 0 1 -.73 1.33 43.27 43.27 0 0 1 -6.29.84c-.85.08-1.7.08-2.54.08zm-10.59-20.49a40.08 40.08 0 0 0 -.57 4.83 41.15 41.15 0 0 0 .61 9.91 3.86 3.86 0 0 0 3.06 3.06 41.15 41.15 0 0 0 9.91.61 40.08 40.08 0 0 0 4.83-.57 33 33 0 0 0 -17.84-17.84z" />
<path d="m17.24 60a43.1 43.1 0 0 1 -7.85-.72 5.82 5.82 0 0 1 -4.66-4.66 43.06 43.06 0 0 1 -.65-10.39 1 1 0 0 1 1.4-.86 29 29 0 0 1 15.16 15.15 1 1 0 0 1 -.86 1.4c-.85.08-1.69.08-2.54.08zm-11.24-14.18a41.11 41.11 0 0 0 .67 8.43 3.86 3.86 0 0 0 3.06 3.06 41.83 41.83 0 0 0 8.43.67 27 27 0 0 0 -12.16-12.16z" />
</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": "football"
}
<?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;
}
}
<?php
namespace Theme\Views\Atoms\icon;
use ACFToolkit\ViewModels\BaseViewModel;
class IconViewModel extends BaseViewModel
{
}
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;
}
}
<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>
{% include '@atoms/icon/icon.twig' with {
icon: 'icon'
} only %}Fields