<i class="pant"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>pant</title>
<g id="pant">
<path d="M53,11H11a1,1,0,0,1-1-1V5a3,3,0,0,1,3-3H51a3,3,0,0,1,3,3v5A1,1,0,0,1,53,11ZM12,9H52V5a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1Z" />
<path d="M22.64,62H11a4,4,0,0,1-4-4V36a1,1,0,0,1,1-1h2a5,5,0,0,0,5-5V26a5,5,0,0,0-5-5H8a1,1,0,0,1-.8-.4A1,1,0,0,1,7,19.71l3-10A1,1,0,0,1,11,9H22a1,1,0,0,1,1,1v9.48a7,7,0,0,0,1.27,4l5.34,7.63a.75.75,0,0,1,.26.21,1,1,0,0,1,.24.79L26.6,58.56A4,4,0,0,1,22.64,62ZM9,37V58a2,2,0,0,0,2,2H22.64a2,2,0,0,0,2-1.72L28.06,32.4l-5.43-7.76A8.88,8.88,0,0,1,21,19.48V11H11.74l-2.4,8H10a7,7,0,0,1,7,7v4a7,7,0,0,1-7,7Z" />
<path d="M10,37H8a3,3,0,0,1-3-3V22a3,3,0,0,1,3-3h2a7,7,0,0,1,7,7v4A7,7,0,0,1,10,37ZM8,21a1,1,0,0,0-1,1V34a1,1,0,0,0,1,1h2a5,5,0,0,0,5-5V26a5,5,0,0,0-5-5Z" />
<path d="M11,58H8a1,1,0,0,1-1-1V45a1,1,0,0,1,1-1h3a4,4,0,0,1,4,4v6A4,4,0,0,1,11,58ZM9,56h2a2,2,0,0,0,2-2V48a2,2,0,0,0-2-2H9Z" />
<path d="M53,62H41.36a4,4,0,0,1-4-3.43L33.89,32.13a1,1,0,0,1,.24-.79.75.75,0,0,1,.26-.21l5.34-7.63a7,7,0,0,0,1.27-4V10a1,1,0,0,1,1-1H53a1,1,0,0,1,1,.71l3,10a1,1,0,0,1-.16.89,1,1,0,0,1-.8.4H54a5,5,0,0,0-5,5v4a5,5,0,0,0,5,5h2a1,1,0,0,1,1,1V58A4,4,0,0,1,53,62ZM35.94,32.4l3.44,25.89a2,2,0,0,0,2,1.71H53a2,2,0,0,0,2-2V37H54a7,7,0,0,1-7-7V26a7,7,0,0,1,7-7h.66l-2.4-8H43v8.48a8.94,8.94,0,0,1-1.63,5.17Z" />
<path d="M56,37H54a7,7,0,0,1-7-7V26a7,7,0,0,1,7-7h2a3,3,0,0,1,3,3V34A3,3,0,0,1,56,37ZM54,21a5,5,0,0,0-5,5v4a5,5,0,0,0,5,5h2a1,1,0,0,0,1-1V22a1,1,0,0,0-1-1Z" />
<path d="M56,58H53a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4h3a1,1,0,0,1,1,1V57A1,1,0,0,1,56,58ZM53,46a2,2,0,0,0-2,2v6a2,2,0,0,0,2,2h2V46Z" />
<path d="M35,33H29a1,1,0,0,1-.82-.43l-5.55-7.93A8.88,8.88,0,0,1,21,19.48V10a1,1,0,0,1,1-1H42a1,1,0,0,1,1,1v9.48a8.94,8.94,0,0,1-1.63,5.17l-5.55,7.92A1,1,0,0,1,35,33Zm-5.48-2h5l5.25-7.5a7,7,0,0,0,1.27-4V11H23v8.48a7,7,0,0,0,1.27,4Z" />
<path d="M36,16H28a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z" />
<path d="M36,21H28a1,1,0,0,1,0-2h8a1,1,0,0,1,0,2Z" />
<path d="M58,26H53a1,1,0,0,1,0-2h5a1,1,0,0,1,0,2Z" />
<path d="M58,31H53a1,1,0,0,1,0-2h5a1,1,0,0,1,0,2Z" />
<path d="M11,26H6a1,1,0,0,1,0-2h5a1,1,0,0,1,0,2Z" />
<path d="M11,31H6a1,1,0,0,1,0-2h5a1,1,0,0,1,0,2Z" />
</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": "pant"
}
<?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