<i class="bottle"><svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
<path d="m53.21 18.86a1 1 0 0 1 -.7-.3l-7.07-7.07a1 1 0 0 1 -.3-.7 1 1 0 0 1 .3-.71l3.56-3.54a1 1 0 0 1 1.41 0l7.08 7.08a1 1 0 0 1 0 1.41l-3.54 3.53a1 1 0 0 1 -.74.3zm-5.65-8.07 5.65 5.65 2.12-2.12-5.65-5.65z" />
<path d="m21.39 62.33a6.92 6.92 0 0 1 -4.95-2l-12.72-12.77a7 7 0 0 1 0-9.9l.16-.16a14.9 14.9 0 0 1 7.36-3.89c1.75-.4 4.66-1.07 6.62-3a13.56 13.56 0 0 0 3.73-5.91c.06-.23.11-.45.17-.68 0 0 0-.09 0-.1a14.68 14.68 0 0 1 3.68-6.59l1.27-1.26a15 15 0 0 1 8.44-4.25h.11a14.58 14.58 0 0 1 5.81.33 5.3 5.3 0 0 0 5-1.33 1 1 0 0 1 1.42 0l5.65 5.65a1 1 0 0 1 0 1.42 5.27 5.27 0 0 0 -1.33 5.05 14.65 14.65 0 0 1 .33 5.82 14.87 14.87 0 0 1 -4.14 8.5l-1.26 1.27a14.68 14.68 0 0 1 -6.59 3.68l-.77.2a13.59 13.59 0 0 0 -5.92 3.73c-1.95 2-2.62 4.88-3 6.62a14.92 14.92 0 0 1 -3.88 7.36l-.17.16a6.92 6.92 0 0 1 -5.02 2.05zm14.06-48.55a13 13 0 0 0 -7.3 3.68l-1.26 1.27a12.7 12.7 0 0 0 -3.18 5.7l-.17.7a15.38 15.38 0 0 1 -4.27 6.87c-2.36 2.36-5.63 3.11-7.58 3.56a13 13 0 0 0 -6.4 3.35l-.16.16a5 5 0 0 0 0 7.07l12.73 12.73a5 5 0 0 0 7.07 0l.16-.16a13 13 0 0 0 3.35-6.4c.45-2 1.2-5.22 3.56-7.58a15.35 15.35 0 0 1 6.88-4.27l.71-.18a12.63 12.63 0 0 0 5.68-3.17l1.27-1.26a12.89 12.89 0 0 0 3.69-7.4 13 13 0 0 0 -.23-5.05 7.26 7.26 0 0 1 1.19-6.2l-4.39-4.34a7.36 7.36 0 0 1 -6.2 1.19 13 13 0 0 0 -5.05-.28h-.1z" />
<path d="m39.83 42.25a1 1 0 0 1 -.7-.29l-17.13-17.09a1 1 0 0 1 -.25-1 14.68 14.68 0 0 1 3.68-6.59l1.27-1.26a15 15 0 0 1 8.44-4.25h.09a1 1 0 0 1 .85.28l15.85 15.83a1 1 0 0 1 .28.85 14.87 14.87 0 0 1 -4.21 8.53l-1.26 1.27a14.68 14.68 0 0 1 -6.59 3.68.84.84 0 0 1 -.32.04zm-15.95-18.37 16.24 16.24a12.3 12.3 0 0 0 5.15-3l1.27-1.26a12.92 12.92 0 0 0 3.61-6.91l-15.09-15.1a13 13 0 0 0 -6.91 3.61l-1.26 1.27a12.3 12.3 0 0 0 -3.01 5.15z" />
<path d="m39.74 33.59a9.42 9.42 0 0 1 -6.33-3c-3.17-3.18-3.94-7.37-1.76-9.55a4.84 4.84 0 0 1 4.62-1.04 10.16 10.16 0 0 1 4.92 2.84c3.17 3.17 4 7.36 1.77 9.54a4.4 4.4 0 0 1 -3.22 1.21zm-4.89-11.78a2.47 2.47 0 0 0 -1.79.64c-1.34 1.34-.53 4.42 1.77 6.72s5.38 3.11 6.72 1.77.53-4.42-1.77-6.72a8.31 8.31 0 0 0 -3.94-2.3 5.23 5.23 0 0 0 -.99-.11z" />
</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": "bottle"
}
<?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