ivyforms / frontend / src / views / _components / icon / IvyIcon.vue

IvyIcon.vue in The Innovative Form Builder – IvyForms 0.2, at frontend/src/views/_components/icon/IvyIcon.vue

188 lines 3.8 KB

Raw Download Zip

1	<template>
2	<div class="ivyforms-icon">
3	<component
4	:is="iconComponent"
5	class="ivyforms-icon__svg"
6	:class="[
7	`size-${props.size}`,
8	`name-${props.name}`,
9	`type-${props.type}`,
10	`category-${props.category}`,
11	]"
12	/>
13	</div>
14	</template>
15
16	<script setup lang="ts">
17	import { computed, shallowRef, watchEffect, type Component } from 'vue'
18	import iconImports from '@/views/_components/icon/iconImports'
19	import type { IconCategory } from '@/types/icons/icon-category'
20	import type { IconType } from '@/types/icons/icon-type'
21
22	type Category = keyof typeof iconImports // This will be 'global' \| 'arrows' \| 'flags'
23	type Type = string // You can make this more specific if you have predefined types for 'type'
24	type Props = {
25	category?: IconCategory
26	name: string
27	type?: IconType
28	color?: string
29	colorHover?: string
30	size?: 'l' \| 'd' \| 's' \| 'xs'
31	outerSize?: string
32	}
33
34	const props = withDefaults(defineProps<Props>(), {
35	category: 'global',
36	type: 'fill',
37	color: '',
38	colorHover: '',
39	size: 'd',
40	outerSize: '24px',
41	})
42
43	const iconComponent = shallowRef()
44
45	const colorHoverComputed = computed(() => props.colorHover \|\| props.color)
46
47	const getIconComponent = (category: string, type: Type, name: string) => {
48	const categoryIcons = iconImports[category as Category]
49	if (!categoryIcons) return null
50
51	// Handle the 'global' and 'arrows' categories where typeIcons is an object
52	if (category === 'global' \|\| category === 'builder' \|\| category === 'arrows') {
53	const typeIcons = categoryIcons[type] as { [key: string]: Component }
54	if (!typeIcons) return null
55
56	return typeIcons[name] \|\| null
57	}
58
59	return categoryIcons[name] \|\| null
60	}
61
62	watchEffect(() => {
63	iconComponent.value = getIconComponent(props.category, props.type, props.name)
64	})
65	</script>
66
67	<style lang="scss">
68	// Icon
69	.ivyforms-icon {
70	width: v-bind('outerSize');
71	height: v-bind('outerSize');
72	display: flex;
73	align-items: center;
74	justify-content: center;
75	flex: none;
76
77	// SVG
78	&__svg {
79	// Large
80	&.size-l {
81	transform: scale(1.2);
82	}
83
84	// Default
85	&.size-d {
86	transform: scale(1);
87	}
88
89	// Small
90	&.size-s {
91	transform: scale(0.8);
92	}
93
94	// Extra Small
95	&.size-xs {
96	transform: scale(0.6);
97	}
98
99	// Global, Arrows & Text Formatting
100	&.category-global,
101	&.category-arrows,
102	&.category-text-formatting {
103	fill: v-bind('color');
104	stroke: v-bind('color');
105
106	// Fill
107	&.type-fill *:not(g) {
108	fill: inherit;
109	stroke: none;
110
111	// Stroke Path
112	&.stroke-path {
113	fill: none;
114	stroke: inherit;
115	}
116	}
117
118	// Fill Duo
119	&.type-fill-duo *:not(g) {
120	fill: inherit;
121	stroke: none;
122
123	// Stroke Path
124	&.stroke-path {
125	fill: none;
126	stroke: inherit;
127	}
128	}
129
130	// Line
131	&.type-line *:not(g) {
132	fill: none;
133
134	// Fill Path
135	&.fill-path {
136	fill: inherit;
137	stroke: none;
138	}
139
140	// Stroke Path
141	&.stroke-path {
142	stroke: inherit;
143	fill: none;
144	}
145	}
146
147	// Outline
148	&.type-outline *:not(g) {
149	fill: inherit;
150	stroke: none;
151
152	// Stroke Path
153	&.stroke-path {
154	fill: none;
155	stroke: inherit;
156	}
157	}
158
159	// Broken
160	&.type-broken *:not(g) {
161	fill: inherit;
162	stroke: none;
163
164	// Stroke Path
165	&.stroke-path {
166	fill: none;
167	stroke: inherit;
168	}
169	}
170	}
171	}
172
173	// Hover
174	&:hover,
175	&[aria-describedby]] {
176	// SVG
177	.ivyforms-icon__svg {
178	// Global & Arrows
179	&.category-global,
180	&.category-arrows {
181	fill: v-bind('colorHoverComputed');
182	stroke: v-bind('colorHoverComputed');
183	}
184	}
185	}
186	}
187	</style>
188