<i class="helmet"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="m41.07 58h-13.59a7.51 7.51 0 0 1 0-15 4.42 4.42 0 0 0 4.42-4.42v-3.93a4.39 4.39 0 0 0 -2.78-4.1l-14.49-5.79a4 4 0 0 1 -2.3-2.43 3.92 3.92 0 0 1 .3-3.26 25.93 25.93 0 0 1 48.37 13 37.2 37.2 0 0 1 -3.13 14.93 18.32 18.32 0 0 1 -16.8 11zm-6-49.86a24 24 0 0 0 -20.71 11.93 1.93 1.93 0 0 0 -.14 1.61 2 2 0 0 0 1.16 1.22l14.48 5.79a6.38 6.38 0 0 1 4 6v3.92a6.43 6.43 0 0 1 -6.38 6.39 5.51 5.51 0 0 0 0 11h13.59a16.36 16.36 0 0 0 15-9.8 34.8 34.8 0 0 0 2.21-6.91 35.19 35.19 0 0 0 .72-7.22 23.93 23.93 0 0 0 -23.93-23.93z" />
<path d="m14 58h-6a1 1 0 0 1 -.71-.29l-4-4a1 1 0 0 1 -.29-.71v-11a1 1 0 0 1 .29-.71l4-4a1 1 0 0 1 .71-.29h11.82l3.38-9.81a1 1 0 0 1 .95-.71 1 1 0 0 1 1 1 1.33 1.33 0 0 1 0 .34l-3.22 9.18h3.66l5.83-5.84a1 1 0 1 1 1.42 1.42l-6.13 6.13a1 1 0 0 1 -.71.29h-4.76l-6.24 18.33a1 1 0 0 1 -1 .67zm-5.59-2h4.88l5.84-17h-10.72l-3.41 3.41v10.18z" />
<path d="m22 48h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z" />
<path d="m45 45a8 8 0 1 1 8-8 8 8 0 0 1 -8 8zm0-14a6 6 0 1 0 6 6 6 6 0 0 0 -6-6z" />
</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": "helmet"
}
<?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