ux-icons

Name: ux-icons
Author: smnandre

163stars12forks

How to install ux-icons?

smnandre/symfony-ux-skills/ux-icons

$npx -y skills add smnandre/symfony-ux-skills --skill ux-icons

Installs into the current project.

Summary

Symfony UX Icons for rendering SVG icons in Twig templates. Supports 200,000+ Iconify icons (Lucide, Heroicons, Tabler, Material Design, etc.), local SVG files, and custom icon sets with aliases. Use when displaying icons, configuring icon defaults, importing or locking on-demand

Files · 1

View on GitHub

SKILL.md

1	# UX Icons
2
3	Render local and remote SVG icons in Twig templates. Icons can come from local files, Iconify.design (200+ icon sets, 200,000+ icons), or custom icon sets. Icons are inlined as `<svg>` elements -- no icon fonts, no external requests at runtime.
4
5	## Installation
6
7	```bash
8	composer require symfony/ux-icons
9	```
10
11	## Quick Reference
12
13	```
14	ux_icon('name') Twig function
15	ux_icon('name', {class: 'w-4 h-4'}) with HTML attributes
16	<twig:ux:icon name="name" /> Twig component (requires ux-twig-component)
17	<twig:ux:icon name="set:name" /> icon from a specific set
18	```
19
20	## Rendering Icons
21
22	### Twig Function
23
24	```twig
25	{{ ux_icon('menu') }}
26	{# renders <svg ...>...</svg> #}
27
28	{{ ux_icon('user-profile', {class: 'w-4 h-4'}) }}
29	{# renders <svg class="w-4 h-4"> ... </svg> #}
30
31	{{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }}
32	{# renders <svg height="16" width="16" aria-hidden="true"> ... </svg> #}
33	```
34
35	### Twig Component (HTML Syntax)
36
37	Requires `symfony/ux-twig-component`.
38
39	```html
40	<twig:ux:icon name="user-profile" class="w-4 h-4" />
41
42	<twig:ux:icon name="flowbite:user-solid" />
43
44	<twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" />
45	```
46
47	Any HTML attribute added to the component or passed to the function is rendered on the `<svg>` element.
48
49	## Icon Names
50
51	### Local Icons
52
53	Stored in `assets/icons/` by default. The file path (minus `.svg`) becomes the icon name:
54
55	```
56	assets/icons/
57	├─ close.svg → ux_icon('close')
58	├─ menu.svg → ux_icon('menu')
59	└─ header/
60	└─ logo.svg → ux_icon('header:logo')
61	```
62
63	Subdirectories become prefixes separated by `:`. Use local icons for your own project-specific SVGs (app logo, custom illustrations).
64
65	### Iconify (On-Demand)
66
67	Use `prefix:name` syntax to pull icons from any Iconify set:
68
69	```twig
70	{# UI icons #}
71	{{ ux_icon('lucide:arrow-right') }} {# Lucide #}
72	{{ ux_icon('tabler:heart') }} {# Tabler #}
73	{{ ux_icon('heroicons:star-solid') }} {# Heroicons #}
74	{{ ux_icon('mdi:check') }} {# Material Design Icons #}
75
76	{# Country flags #}
77	<twig:ux:icon name="flagpack:fr" />
78	<twig:ux:icon name="flagpack:{{ country.code\|lower }}" />
79
80	{# Brand logos #}
81	<twig:ux:icon name="simple-icons:symfony" />
82	<twig:ux:icon name="simple-icons:github" />
83
84	{# File type icons #}
85	<twig:ux:icon name="bi:filetype-pdf" />
86	<twig:ux:icon name="bi:filetype-{{ file.extension }}" />
87	```
88
89	On-demand icons are fetched from the Iconify API, cached locally, and inlined as SVG. No runtime HTTP requests in production.
90
91	Browse all available sets at https://icon-sets.iconify.design/
92
93	## Configuration
94
95	```yaml
96	# config/packages/ux_icons.yaml
97	ux_icons:
98	# Local directory for icon SVG files
99	icon_dir: '%kernel.project_dir%/assets/icons'
100
101	# Default HTML attributes added to every icon
102	default_icon_attributes:
103	fill: currentColor
104	'font-size': '1.25em'
105
106	# Aliases: shortcut name => full icon name
107	aliases:
108	dots: 'clarity:ellipsis-horizontal-line'
109	'tabler:save': 'tabler:device-floppy'
110
111	# Iconify integration
112	iconify:
113	enabled: true
114	on_demand: true
115	endpoint: 'https://api.iconify.design'
116
117	# Silently ignore missing icons (renders nothing instead of throwing)
118	ignore_not_found: false
119	```
120
121	### Icon Sets
122
123	Define custom icon sets with their own prefix, source, and default attributes:
124
125	```yaml
126	ux_icons:
127	icon_sets:
128	# Local directory with custom attributes
129	flags:
130	path: '%kernel.project_dir%/assets/images/flags'
131	icon_attributes:
132	class: 'flag'
133	fill: false # "false" removes a default attribute
134
135	# Alias an entire Iconify set under a shorter prefix
136	icons:
137	alias: 'lucide' # ux_icon('icons:arrow-right') → lucide:arrow-right
138	```
139
140	### Aliases
141
142	Create shortcuts f

People who liked this also viewed

6 picks

Type

ux-icons

163stars12forks

View on GitHub

How to install ux-icons?

smnandre/symfony-ux-skills/ux-icons

$npx -y skills add smnandre/symfony-ux-skills --skill ux-icons

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# UX Icons
2
3	Render local and remote SVG icons in Twig templates. Icons can come from local files, Iconify.design (200+ icon sets, 200,000+ icons), or custom icon sets. Icons are inlined as `<svg>` elements -- no icon fonts, no external requests at runtime.
4
5	## Installation
6
7	```bash
8	composer require symfony/ux-icons
9	```
10
11	## Quick Reference
12
13	```
14	ux_icon('name') Twig function
15	ux_icon('name', {class: 'w-4 h-4'}) with HTML attributes
16	<twig:ux:icon name="name" /> Twig component (requires ux-twig-component)
17	<twig:ux:icon name="set:name" /> icon from a specific set
18	```
19
20	## Rendering Icons
21
22	### Twig Function
23
24	```twig
25	{{ ux_icon('menu') }}
26	{# renders <svg ...>...</svg> #}
27
28	{{ ux_icon('user-profile', {class: 'w-4 h-4'}) }}
29	{# renders <svg class="w-4 h-4"> ... </svg> #}
30
31	{{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }}
32	{# renders <svg height="16" width="16" aria-hidden="true"> ... </svg> #}
33	```
34
35	### Twig Component (HTML Syntax)
36
37	Requires `symfony/ux-twig-component`.
38
39	```html
40	<twig:ux:icon name="user-profile" class="w-4 h-4" />
41
42	<twig:ux:icon name="flowbite:user-solid" />
43
44	<twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" />
45	```
46
47	Any HTML attribute added to the component or passed to the function is rendered on the `<svg>` element.
48
49	## Icon Names
50
51	### Local Icons
52
53	Stored in `assets/icons/` by default. The file path (minus `.svg`) becomes the icon name:
54
55	```
56	assets/icons/
57	├─ close.svg → ux_icon('close')
58	├─ menu.svg → ux_icon('menu')
59	└─ header/
60	└─ logo.svg → ux_icon('header:logo')
61	```
62
63	Subdirectories become prefixes separated by `:`. Use local icons for your own project-specific SVGs (app logo, custom illustrations).
64
65	### Iconify (On-Demand)
66
67	Use `prefix:name` syntax to pull icons from any Iconify set:
68
69	```twig
70	{# UI icons #}
71	{{ ux_icon('lucide:arrow-right') }} {# Lucide #}
72	{{ ux_icon('tabler:heart') }} {# Tabler #}
73	{{ ux_icon('heroicons:star-solid') }} {# Heroicons #}
74	{{ ux_icon('mdi:check') }} {# Material Design Icons #}
75
76	{# Country flags #}
77	<twig:ux:icon name="flagpack:fr" />
78	<twig:ux:icon name="flagpack:{{ country.code\|lower }}" />
79
80	{# Brand logos #}
81	<twig:ux:icon name="simple-icons:symfony" />
82	<twig:ux:icon name="simple-icons:github" />
83
84	{# File type icons #}
85	<twig:ux:icon name="bi:filetype-pdf" />
86	<twig:ux:icon name="bi:filetype-{{ file.extension }}" />
87	```
88
89	On-demand icons are fetched from the Iconify API, cached locally, and inlined as SVG. No runtime HTTP requests in production.
90
91	Browse all available sets at https://icon-sets.iconify.design/
92
93	## Configuration
94
95	```yaml
96	# config/packages/ux_icons.yaml
97	ux_icons:
98	# Local directory for icon SVG files
99	icon_dir: '%kernel.project_dir%/assets/icons'
100
101	# Default HTML attributes added to every icon
102	default_icon_attributes:
103	fill: currentColor
104	'font-size': '1.25em'
105
106	# Aliases: shortcut name => full icon name
107	aliases:
108	dots: 'clarity:ellipsis-horizontal-line'
109	'tabler:save': 'tabler:device-floppy'
110
111	# Iconify integration
112	iconify:
113	enabled: true
114	on_demand: true
115	endpoint: 'https://api.iconify.design'
116
117	# Silently ignore missing icons (renders nothing instead of throwing)
118	ignore_not_found: false
119	```
120
121	### Icon Sets
122
123	Define custom icon sets with their own prefix, source, and default attributes:
124
125	```yaml
126	ux_icons:
127	icon_sets:
128	# Local directory with custom attributes
129	flags:
130	path: '%kernel.project_dir%/assets/images/flags'
131	icon_attributes:
132	class: 'flag'
133	fill: false # "false" removes a default attribute
134
135	# Alias an entire Iconify set under a shorter prefix
136	icons:
137	alias: 'lucide' # ux_icon('icons:arrow-right') → lucide:arrow-right
138	```
139
140	### Aliases
141
142	Create shortcuts f

People who liked this also viewed

6 picks

Type