Vkladanie ikoniek v Hugo – Hugo Icons Module

Rýchly návod na vkladanie SVG ikoniek cez Hugo Icons Module s príkladmi a zoznamom dostupných vendorov

Úvod

Hugo Icons Module je ľahký a flexibilný modul, ktorý umožňuje vkladať SVG ikony priamo do obsahu. Generuje inline SVG bez potreby fontov, CSS či JavaScript. Ikony sa načítavajú na požiadavku (on-demand), čo znamená, že stránka je rýchla a optimalizovaná.

Rýchly start – Shortcode

Najjednoduchší spôsob je použiť shortcode ico:

Základný príklad

S vlastnou farbou

Farbou môžeš zadať názov (red, blue) alebo hex hodnotu (#FF438A).

S vlastnou veľkosťou

Parametre shortcodu

Parameter Povinný Príklad Poznámka
vendor ✓ bootstrap, fas, tabler Názov ikonového vendora
name ✓ house, search Názov konkrétnej ikony
size — 2em Nastaví výšku aj šírku
width — 24px Šírka ikony
height — 24px Výška ikony
color — red, #FF438A Farba ikony
className — text-success CSS triedy

Vloženie v šablóne (Template)

Ak potrebuješ ikony vo vlastných šablónach alebo layoutoch, použi partial:

1{{ $ctx := dict
2  "vendor" "bootstrap"
3  "name" "house"
4}}
5{{ partial "icons/icon" $ctx }}

Zoznam dostupných vendorov

Vendor Name Shorthand Stránka
bootstrap bs Bootstrap Icons
font-awesome-solid fas Font Awesome
font-awesome-regular far Font Awesome
font-awesome-brands fab Font Awesome
simple-icons simple Simple Icons
tabler — Tabler Icons
lucide — Lucide Icons
mdi — Material Design Icons
feather — Feather Icons
flag — Flag Icons
dev — Dev Icons

Skratky (ako bs pre bootstrap alebo fas pre Font Awesome Solid) sú štandardizované a fungujú vo všetkých shortcodes.

Zdroj

Podrobná dokumentácia: Hugo Icons Module Docs