<i class="subtitute"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>subtitute</title>
<g id="subtitute">
<path d="M62,56H2a1,1,0,0,1-1-1V9A1,1,0,0,1,2,8H62a1,1,0,0,1,1,1V55A1,1,0,0,1,62,56ZM3,54H61V10H3Z" />
<path d="M13,42H10a1,1,0,0,1-.71-.29l-2-2A1,1,0,0,1,7,39V30a1,1,0,0,1,.29-.71l2-2A1,1,0,0,1,10,27h3a1,1,0,0,1,.71.29l2,2A1,1,0,0,1,16,30v9a1,1,0,0,1-.29.71l-2,2A1,1,0,0,1,13,42Zm-2.59-2h2.18L14,38.59V30.41L12.59,29H10.41L9,30.41v8.18Z" />
<path d="M24,42H21a1,1,0,0,1-.71-.29l-2-2A1,1,0,0,1,18,39V30a1,1,0,0,1,.29-.71l2-2A1,1,0,0,1,21,27h3a1,1,0,0,1,.71.29l2,2A1,1,0,0,1,27,30v9a1,1,0,0,1-.29.71l-2,2A1,1,0,0,1,24,42Zm-2.59-2h2.18L25,38.59V30.41L23.59,29H21.41L20,30.41v8.18Z" />
<path d="M43,42H40a1,1,0,0,1-.71-.29l-2-2A1,1,0,0,1,37,39V30a1,1,0,0,1,.29-.71l2-2A1,1,0,0,1,40,27h3a1,1,0,0,1,.71.29l2,2A1,1,0,0,1,46,30v9a1,1,0,0,1-.29.71l-2,2A1,1,0,0,1,43,42Zm-2.59-2h2.18L44,38.59V30.41L42.59,29H40.41L39,30.41v8.18Z" />
<path d="M54,42H51a1,1,0,0,1-.71-.29l-2-2A1,1,0,0,1,48,39V30a1,1,0,0,1,.29-.71l2-2A1,1,0,0,1,51,27h3a1,1,0,0,1,.71.29l2,2A1,1,0,0,1,57,30v9a1,1,0,0,1-.29.71l-2,2A1,1,0,0,1,54,42Zm-2.59-2h2.18L55,38.59V30.41L53.59,29H51.41L50,30.41v8.18Z" />
<path d="M26,51H8a1,1,0,0,1-1-1V45a1,1,0,0,1,1-1H26a1,1,0,0,1,1,1v5A1,1,0,0,1,26,51ZM9,49H25V46H9Z" />
<path d="M56,51H38a1,1,0,0,1-1-1V45a1,1,0,0,1,1-1H56a1,1,0,0,1,1,1v5A1,1,0,0,1,56,51ZM39,49H55V46H39Z" />
<path d="M19,26H15a1,1,0,0,1-1-1V21H11a1,1,0,0,1-.91-.58,1,1,0,0,1,.15-1.07l6-7a1,1,0,0,1,1.52,0l6,7a1,1,0,0,1,.15,1.07A1,1,0,0,1,23,21H20v4A1,1,0,0,1,19,26Zm-3-2h2V20a1,1,0,0,1,1-1h1.83L17,14.54,13.17,19H15a1,1,0,0,1,1,1Z" />
<path d="M47,26a1,1,0,0,1-.76-.35l-6-7a1,1,0,0,1-.15-1.07A1,1,0,0,1,41,17h3V13a1,1,0,0,1,1-1h4a1,1,0,0,1,1,1v4h3a1,1,0,0,1,.91.58,1,1,0,0,1-.15,1.07l-6,7A1,1,0,0,1,47,26Zm-3.83-7L47,23.46,50.83,19H49a1,1,0,0,1-1-1V14H46v4a1,1,0,0,1-1,1Z" />
<path d="M8,39a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l7-7a1,1,0,0,1,1.42,1.42l-7,7A1,1,0,0,1,8,39Z" />
<path d="M19,39a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l7-7a1,1,0,0,1,1.42,1.42l-7,7A1,1,0,0,1,19,39Z" />
<path d="M38,39a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l7-7a1,1,0,0,1,1.42,1.42l-7,7A1,1,0,0,1,38,39Z" />
<path d="M49,39a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l7-7a1,1,0,0,1,1.42,1.42l-7,7A1,1,0,0,1,49,39Z" />
<path d="M32,51a1,1,0,0,1-1-1V14a1,1,0,0,1,2,0V50A1,1,0,0,1,32,51Z" />
</g>
</svg></i>
{% set className = className ?? '' %}
{% set attributes = className ~ icon | trim %}
{% set insert = true %}
<i class="{{ attributes }}">{% if insert is defined and insert == true %}{{ source('@customIcons/' ~ icon ~ '.svg') }}{% endif %}</i>
{
"icon": "subtitute"
}
<?php
namespace Theme\Views\Atoms\icon;
use ACFToolkit\Types\CustomAtom;
class Icon extends CustomAtom
{
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, [
]));
}
}
<?php
namespace Theme\Views\Atoms\icon;
use ACFToolkit\ViewModels\BaseViewModel;
class IconViewModel extends BaseViewModel
{
}
i {
display: inline-block;
width: 30px;
svg {
width: 100%;
vertical-align: middle;
}
&.sm {
width: 20px;
}
&.md {
width: 40px;
}
&.lg {
width: 50px;
}
&.xl {
width: 60px;
}
}
<template>
<i :class="'iconoir-' + icon + ' ' + className"/>
</template>
<script>
export default {
props: {
className: {
type: String,
default: ''
},
icon: {
type: String,
}
}
}
</script>
<style>
*[class^="iconoir-"], *[class*=" iconoir-"] {
display: inline-block;
}
</style>
{% include '@atoms/icon/icon.twig' with {
icon: 'icon'
} only %}Fields