SvgIcon.php — Tutor LMS – eLearning and online course solution 4.0.3

tutor / components / SvgIcon.php

tutor / components Last commit date

Constants 3 weeks ago Accordion.php 6 days ago Alert.php 6 days ago AttachmentCard.php 6 days ago Avatar.php 6 days ago Badge.php 6 days ago BaseComponent.php 3 weeks ago Button.php 6 days ago ConfirmationModal.php 6 days ago CourseFilter.php 6 days ago DateFilter.php 6 days ago DropdownFilter.php 6 days ago EmptyState.php 6 days ago FileUploader.php 6 days ago InputField.php 6 days ago Modal.php 6 days ago Nav.php 6 days ago Pagination.php 6 days ago Popover.php 6 days ago PreviewTrigger.php 6 days ago Progress.php 6 days ago SearchFilter.php 6 days ago Sorting.php 6 days ago StarRating.php 6 days ago StarRatingInput.php 6 days ago StatusSelect.php 6 days ago SvgIcon.php 6 days ago Table.php 6 days ago Tabs.php 6 days ago Tooltip.php 6 days ago WPEditor.php 6 days ago

SvgIcon.php

327 lines

1	<?php
2	/**
3	* SvgIcon Component Class.
4	*
5	* Provides a fluent builder for rendering SVG icons.
6	*
7	* @package Tutor\Components
8	* @author Themeum
9	* @link https://themeum.com
10	* @since 4.0.0
11	*/
12
13	namespace Tutor\Components;
14
15	defined( 'ABSPATH' ) \|\| exit;
16
17	/**
18	* SvgIcon Component Class.
19	*
20	* Example usage:
21	* ```php
22	* // Render icon at default size (16×16)
23	* SvgIcon::make()
24	* ->name( Icon::CHECK )
25	* ->render();
26	*
27	* // Render with explicit size
28	* SvgIcon::make()
29	* ->name( Icon::CHECK )
30	* ->size( 24 )
31	* ->render();
32	*
33	* // Render with independent width and height
34	* SvgIcon::make()
35	* ->name( Icon::DELETE )
36	* ->width( 20 )
37	* ->height( 24 )
38	* ->render();
39	*
40	* // Render with a design-system color token
41	* SvgIcon::make()
42	* ->name( Icon::DELETE )
43	* ->size( 16 )
44	* ->color( Color::SECONDARY )
45	* ->render();
46	*
47	* // Render with a custom CSS class
48	* SvgIcon::make()
49	* ->name( Icon::STAR_FILL )
50	* ->size( 20 )
51	* ->attr( 'class', 'tutor-icon-warning' )
52	* ->render();
53	*
54	* // Render directional icon that flips in RTL layouts
55	* SvgIcon::make()
56	* ->name( Icon::CHEVRON_RIGHT )
57	* ->size( 16 )
58	* ->flip_rtl()
59	* ->render();
60	*
61	* // Ignore kids-mode icon override (always use default icon)
62	* SvgIcon::make()
63	* ->name( Icon::PLAY_LINE )
64	* ->size( 24 )
65	* ->ignore_kids()
66	* ->render();
67	*
68	* // Retrieve HTML string without echoing
69	* $html = SvgIcon::make()->name( Icon::DELETE )->size( 16 )->color( Color::CRITICAL )->get();
70	*
71	* // Multiple attrs
72	* SvgIcon::make()
73	* ->name( Icon::SPINNER )
74	* ->size( 14 )
75	* ->attr( 'class', 'tutor-animate-spin' )
76	* ->attr( 'aria-label', 'Loading' )
77	* ->render();
78	* ```
79	*
80	* Note: The color() property only works with the version 4 design system tokens.
81	*
82	* @since 4.0.0
83	*/
84	class SvgIcon extends BaseComponent {
85
86	/**
87	* Icon name.
88	*
89	* @since 4.0.0
90	*
91	* @var string
92	*/
93	protected $name = '';
94
95	/**
96	* Icon width.
97	*
98	* @since 4.0.0
99	*
100	* @var int
101	*/
102	protected $width = 16;
103
104	/**
105	* Icon height.
106	*
107	* @since 4.0.0
108	*
109	* @var int
110	*/
111	protected $height = 16;
112	/**
113	* Icon color.
114	*
115	* Note: this only works with the version 4 design system tokens.
116	*
117	* @since 4.0.0
118	*
119	* @var string
120	*/
121	protected $color = '';
122
123	/**
124	* Ignore kids mode variant.
125	*
126	* @since 4.0.0
127	*
128	* @var bool
129	*/
130	protected $ignore_kids = false;
131
132	/**
133	* Flip the icon in RTL.
134	*
135	* @since 4.0.0
136	*
137	* @var bool
138	*/
139	protected $flip_rtl = false;
140
141	/**
142	* Set icon name.
143	*
144	* @since 4.0.0
145	*
146	* @param string $name Icon name.
147	*
148	* @return $this
149	*/
150	public function name( string $name ): self {
151	$this->name = $name;
152	return $this;
153	}
154
155	/**
156	* Set icon width.
157	*
158	* @since 4.0.0
159	*
160	* @param int $width Icon width.
161	*
162	* @return $this
163	*/
164	public function width( int $width ): self {
165	$this->width = $width;
166	return $this;
167	}
168
169	/**
170	* Set icon height.
171	*
172	* @since 4.0.0
173	*
174	* @param int $height Icon height.
175	*
176	* @return $this
177	*/
178	public function height( int $height ): self {
179	$this->height = $height;
180	return $this;
181	}
182
183	/**
184	* Set icon size (both width and height).
185	*
186	* @since 4.0.0
187	*
188	* @param int $size Icon size.
189	*
190	* @return $this
191	*/
192	public function size( int $size ): self {
193	$this->width = $size;
194	$this->height = $size;
195	return $this;
196	}
197
198	/**
199	* Set icon color.
200	*
201	* Note: this only works with the version 4 design system tokens.
202	*
203	* @since 4.0.0
204	*
205	* @param string $color Icon color (use \Tutor\Components\Constants\Color).
206	*
207	* @return $this
208	*/
209	public function color( string $color ): self {
210	$this->color = $color;
211	return $this;
212	}
213
214	/**
215	* Set to ignore kids variant.
216	*
217	* @since 4.0.0
218	*
219	* @param bool $ignore_kids Ignore kids mode variant.
220	*
221	* @return $this
222	*/
223	public function ignore_kids( bool $ignore_kids = true ): self {
224	$this->ignore_kids = $ignore_kids;
225	return $this;
226	}
227
228	/**
229	* Flip the icon in RTL.
230	*
231	* Use this only for directional icons such as arrows,
232	* chevrons and pagination controls.
233	*
234	* @since 4.0.0
235	*
236	* @param bool $flip Whether to flip in RTL.
237	*
238	* @return $this
239	*/
240	public function flip_rtl( bool $flip = true ): self {
241	$this->flip_rtl = $flip;
242	return $this;
243	}
244
245	/**
246	* Set custom HTML attribute.
247	*
248	* @since 4.0.0
249	*
250	* @param string $key Attribute name.
251	* @param string $value Attribute value.
252	*
253	* @return $this
254	*/
255	public function attr( $key, $value ) {
256	$this->attributes[ $key ] = esc_attr( $value );
257	return $this;
258	}
259
260	/**
261	* Get the final icon HTML.
262	*
263	* @since 4.0.0
264	*
265	* @return string HTML output.
266	*/
267	public function get(): string {
268	if ( empty( $this->name ) ) {
269	return '';
270	}
271
272	$icon_path = tutor()->path . 'assets/icons/' . $this->name . '.svg';
273
274	// If learning mode is kids, check kids folder first.
275	if ( tutor_utils()->is_kids_mode() && ! $this->ignore_kids ) {
276	$kids_path = tutor()->path . 'assets/icons/kids/' . $this->name . '.svg';
277	if ( file_exists( $kids_path ) ) {
278	$icon_path = $kids_path;
279	}
280	}
281
282	if ( ! file_exists( $icon_path ) ) {
283	return '';
284	}
285
286	$svg = file_get_contents( $icon_path );
287	if ( ! $svg ) {
288	return '';
289	}
290
291	preg_match( '/<svg[^>]viewBox="([^"]+)"[^>]>(.*?)<\/svg>/is', $svg, $matches );
292	if ( ! $matches ) {
293	return '';
294	}
295
296	list( $svg_tag, $view_box, $inner_svg ) = $matches;
297
298	$this->attributes['width'] = $this->width;
299	$this->attributes['height'] = $this->height;
300	$this->attributes['viewBox'] = $view_box;
301	$this->attributes['fill'] = $this->attributes['fill'] ?? 'none';
302	$this->attributes['role'] = $this->attributes['role'] ?? 'presentation';
303	$this->attributes['aria-hidden'] = $this->attributes['aria-hidden'] ?? 'true';
304
305	if ( ! empty( $this->color ) ) {
306	$color_class = "tutor-icon-{$this->color}";
307	$this->attributes['class'] = trim( ( $this->attributes['class'] ?? '' ) . " {$color_class}" );
308	}
309
310	if ( $this->flip_rtl ) {
311	$this->attributes['class'] = trim(
312	( $this->attributes['class'] ?? '' ) . ' tutor-icon-flip-rtl'
313	);
314	}
315
316	$attributes = $this->get_attributes_string();
317
318	$this->component_string = sprintf(
319	'<svg %s>%s</svg>',
320	$attributes,
321	$inner_svg
322	);
323
324	return $this->component_string;
325	}
326	}
327