Ako pridať vlastné SVG ikony vo WordPresse 7.1

WordPress 7.1 má 19. augusta 2026 priniesť verejné API pre vlastné SVG ikony. Plugin ich zaregistruje bez JavaScriptu a build kroku, blok core/icon ich ponúkne vo výbere, PHP ich vykreslí na serveri a REST API ich sprístupní externým nástrojom.

V návode vytvoríš malý plugin s kolekciou ikon, pridáš ikonu priamo v PHP aj zo súborov a použiješ ich v editore, šablóne, shortcodoch aj pri registrácii vlastného bloku. Na vývoj potrebuješ WordPress 7.1 alebo novší; použiť môžeš aj verziu 7.1 RC, niekoľko SVG súborov, lokálne prostredie ako LocalWP, WordPress Studio alebo wp-env a základnú znalosť PHP.

API stojí na kolekciách a troch funkciách

Každá vlastná ikona patrí do kolekcie. Názov kolekcie tvorí prefix celého mena ikony, takže core/plus a myplugin/plus sa nebijú. Tento menný priestor zároveň zabráni konfliktom medzi ikonami core WordPressu a rôznych pluginov.

wp_register_icon_collection( $name, $args ) zaregistruje pomenovanú skupinu ikon.
wp_register_icon( $name, $args ) zaregistruje jednu ikonu.
wp_get_icon( $name, $args ) vráti SVG ikony ako reťazec, ktorý môžeš vykresliť v PHP.

Pri registrácii ikony zvolíš práve jeden zdroj SVG. Argument content prijíma SVG markup ako reťazec priamo v PHP, kým file_path obsahuje absolútnu cestu k súboru .svg. Pri jednej či dvoch ikonách je praktický content; pri väčšej knižnici sa lepšie udržiavajú súbory cez file_path. Neposielaj oba argumenty naraz.

1. Vytvor plugin a najprv zaregistruj kolekciu

Kolekciu musíš zaregistrovať skôr než ikony, ktoré do nej chceš vložiť. Ak pridáš ikonu do neexistujúcej kolekcie, vo výbere ikon sa bez chybového hlásenia neobjaví.

Vo wp-content/plugins/ vytvor nasledujúcu štruktúru. Súbory star.svg a bookmark.svg doplníš v ďalšom kroku.

Štruktúra pluginu /wp-content/plugins/myplugin-custom-icons//

myplugin-custom-icons/
├── myplugin-custom-icons.php
└── icons/
    ├── star.svg
    └── bookmark.svg

myplugin-custom-icons/
├── myplugin-custom-icons.php
└── icons/
    ├── star.svg
    └── bookmark.svg

Do hlavného súboru pluginu vlož hlavičku, ochranu pred priamym spustením a registráciu kolekcie. Hook init má bez uvedenej priority predvolenú prioritu 10.

<?php
/**
 * Plugin Name: MyPlugin Custom Icons
 * Description: Registruje vlastné SVG ikony pre WordPress 7.1+.
 * Version:     1.0.0
 * Author:      MyPlugin
 * Requires at least: 7.1
 * Requires PHP: 7.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

define( 'MYPLUGIN_ICONS_PATH', plugin_dir_path( __FILE__ ) );

add_action( 'init', 'myplugin_register_icon_collection' );

function myplugin_register_icon_collection() {
    wp_register_icon_collection(
        'myplugin',
        array(
            'label' => __( 'MyPlugin', 'myplugin-icons' ),
        )
    );
}

<?php
/**
 * Plugin Name: MyPlugin Custom Icons
 * Description: Registruje vlastné SVG ikony pre WordPress 7.1+.
 * Version:     1.0.0
 * Author:      MyPlugin
 * Requires at least: 7.1
 * Requires PHP: 7.4
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

define( 'MYPLUGIN_ICONS_PATH', plugin_dir_path( __FILE__ ) );

add_action( 'init', 'myplugin_register_icon_collection' );

function myplugin_register_icon_collection() {
    wp_register_icon_collection(
        'myplugin',
        array(
            'label' => __( 'MyPlugin', 'myplugin-icons' ),
        )
    );
}

Názov myplugin sa stane prefixom mien ako myplugin/heart, myplugin/star a myplugin/bookmark. Hodnota label sa zobrazí ako nadpis sekcie vo výbere ikon. Plugin aktivuj v Pluginy → Nainštalované pluginy; samotná prázdna kolekcia sa ešte nikde nevykreslí.

2. Pridaj ikony cez `content` a `file_path`

Ikona vložená priamo do PHP

Pri ikone s krátkym SVG markupom nemusíš vytvárať samostatný súbor. Pridaj nasledujúcu funkciu s prioritou 20, aby sa spustila až po vytvorení kolekcie.

add_action( 'init', 'myplugin_register_inline_icons', 20 );

function myplugin_register_inline_icons() {
    wp_register_icon(
        'myplugin/heart',
        array(
            'label'   => __( 'Heart', 'myplugin-icons' ),
            'content' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
        )
    );
}

add_action( 'init', 'myplugin_register_inline_icons', 20 );

function myplugin_register_inline_icons() {
    wp_register_icon(
        'myplugin/heart',
        array(
            'label'   => __( 'Heart', 'myplugin-icons' ),
            'content' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
        )
    );
}

Meno myplugin/heart dodržiava formát kolekcia/slug. Popisok z label uvidíš v editore a content nesie samotné SVG. Atribút stroke="currentColor" nechá ikonu zdediť farbu okolitého textu namiesto pevne nastavenej výplne.

Ikony načítané zo súborov

Pri ikonách uložených na disku odovzdaj absolútnu cestu cez file_path. Do priečinka icons/ ulož tieto dva súbory.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>
</svg>

add_action( 'init', 'myplugin_register_file_icons', 20 );

function myplugin_register_file_icons() {
    wp_register_icon(
        'myplugin/star',
        array(
            'label'     => __( 'Star', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/star.svg',
        )
    );

    wp_register_icon(
        'myplugin/bookmark',
        array(
            'label'     => __( 'Bookmark', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/bookmark.svg',
        )
    );
}

add_action( 'init', 'myplugin_register_file_icons', 20 );

function myplugin_register_file_icons() {
    wp_register_icon(
        'myplugin/star',
        array(
            'label'     => __( 'Star', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/star.svg',
        )
    );

    wp_register_icon(
        'myplugin/bookmark',
        array(
            'label'     => __( 'Bookmark', 'myplugin-icons' ),
            'file_path' => MYPLUGIN_ICONS_PATH . 'icons/bookmark.svg',
        )
    );
}

Funkcia aj kolekcia zostávajú rovnaké, mení sa len content na file_path. WordPress súbor načíta až vtedy, keď ho potrebuje. Po otvorení bloku core/icon uvidíš vo výbere sekciu MyPlugin s ikonami Heart, Star a Bookmark.

Výber ikon vo WordPresse so sekciou vlastných ikon — Registrovaná kolekcia sa zobrazí priamo vo výbere bloku `core/icon`. — *Forrás: WPVibes*

3. Zaregistruj celý priečinok ikon naraz

Pri reálnej knižnici sa neoplatí písať samostatné volanie wp_register_icon() pre desiatky ikon. Namiesto funkcie myplugin_register_file_icons() použi tento variant: pri každej požiadavke prejde priečinok a automaticky zaregistruje všetky SVG súbory.

add_action( 'init', 'myplugin_register_all_file_icons', 20 );

function myplugin_register_all_file_icons() {
    $icons_dir = MYPLUGIN_ICONS_PATH . 'icons/';
    $svg_files = glob( $icons_dir . '*.svg' );

    if ( empty( $svg_files ) ) {
        return;
    }

    foreach ( $svg_files as $file_path ) {
        $slug  = basename( $file_path, '.svg' );
        $label = ucwords( str_replace( '-', ' ', $slug ) );

        wp_register_icon(
            'myplugin/' . $slug,
            array(
                'label'     => $label,
                'file_path' => $file_path,
            )
        );
    }
}

add_action( 'init', 'myplugin_register_all_file_icons', 20 );

function myplugin_register_all_file_icons() {
    $icons_dir = MYPLUGIN_ICONS_PATH . 'icons/';
    $svg_files = glob( $icons_dir . '*.svg' );

    if ( empty( $svg_files ) ) {
        return;
    }

    foreach ( $svg_files as $file_path ) {
        $slug  = basename( $file_path, '.svg' );
        $label = ucwords( str_replace( '-', ' ', $slug ) );

        wp_register_icon(
            'myplugin/' . $slug,
            array(
                'label'     => $label,
                'file_path' => $file_path,
            )
        );
    }
}

glob( $icons_dir . '*.svg' ) vráti všetky súbory .svg v priečinku.
basename( $file_path, '.svg' ) odstráni cestu aj príponu; napríklad z advanced-button.svg vytvorí advanced-button.
ucwords( str_replace( '-', ' ', $slug ) ) zmení slug na čitateľný popisok „Advanced Button“.
Cyklus pridá každú ikonu do kolekcie myplugin/.

Nový SVG súbor stačí vložiť do priečinka icons/ a obnoviť editor. Ikona sa objaví vo výbere bez zmeny PHP kódu. Rovnaký vzor obslúži tri aj tristo ikon; ikonu Heart môžeš naďalej registrovať inline a ostatné nechať načítať z priečinka.

Viacero vlastných SVG ikon vo výbere WordPressu — Hromadná registrácia načíta každú SVG ikonu z určeného priečinka. — *Forrás: WPVibes*

4. Použi registrované ikony na troch miestach

V bloku `core/icon` a cez REST API

Výber bloku core/icon automaticky načíta všetky registrované kolekcie. Vlož blok, vyber ikonu z kolekcie MyPlugin a WordPress ju vykreslí na fronte bez ďalšieho kódu. Externé nástroje, ktoré čítajú dáta WordPressu, nájdu ikony na REST endpointe /wp-json/wp/v2/icons a kolekcie na /wp-json/wp/v2/icon-collections.

V PHP cez `wp_get_icon()`

Funkcia wp_get_icon() vracia SVG ako reťazec, takže jednoduchý výstup vyzerá takto.

echo wp_get_icon( 'myplugin/heart' );

echo wp_get_icon( 'myplugin/heart' );

V šablóne odovzdaj druhé pole argumentov, ak chceš nastaviť rozmery, CSS triedu a prístupný názov.

echo wp_get_icon(
    'myplugin/star',
    array(
        'size'  => 32,
        'class' => 'featured-icon',
        'label' => __( 'Featured', 'myplugin-icons' ),
    )
);

echo wp_get_icon(
    'myplugin/star',
    array(
        'size'  => 32,
        'class' => 'featured-icon',
        'label' => __( 'Featured', 'myplugin-icons' ),
    )
);

size nastaví atribúty width a height SVG v pixeloch.
class pridá CSS triedu na element SVG.
label nastaví aria-label pre čítačky obrazovky.

Ak chceš ikonu vkladať do článkov, stránok alebo widgetov, pridaj shortcode [myplugin_icon]. Atribút name určuje slug ikony, text pridá text vedľa nej, size nastaví veľkosť a class doplní triedu SVG.

add_shortcode( 'myplugin_icon', 'myplugin_icon_shortcode' );

function myplugin_icon_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'name'  => 'heart',
            'text'  => '',
            'size'  => 24,
            'class' => '',
        ),
        $atts
    );

    $icon = wp_get_icon(
        'myplugin/' . sanitize_key( $atts['name'] ),
        array(
            'size'  => absint( $atts['size'] ),
            'class' => sanitize_html_class( $atts['class'] ),
        )
    );

    if ( ! $icon ) {
        return '';
    }

    return sprintf(
        '<span>%s %s</span>',
        $icon,
        esc_html( $atts['text'] )
    );
}

add_shortcode( 'myplugin_icon', 'myplugin_icon_shortcode' );

function myplugin_icon_shortcode( $atts ) {
    $atts = shortcode_atts(
        array(
            'name'  => 'heart',
            'text'  => '',
            'size'  => 24,
            'class' => '',
        ),
        $atts
    );

    $icon = wp_get_icon(
        'myplugin/' . sanitize_key( $atts['name'] ),
        array(
            'size'  => absint( $atts['size'] ),
            'class' => sanitize_html_class( $atts['class'] ),
        )
    );

    if ( ! $icon ) {
        return '';
    }

    return sprintf(
        '<span>%s %s</span>',
        $icon,
        esc_html( $atts['text'] )
    );
}

[myplugin_icon name="heart" text="Hello World"]

[myplugin_icon name="star" text="Featured post" size="32"]

[myplugin_icon name="bookmark" text="Save for later" size="20"]

[myplugin_icon name="heart" text="Hello World"]

[myplugin_icon name="star" text="Featured post" size="32"]

[myplugin_icon name="bookmark" text="Save for later" size="20"]

Ikona sa vykreslí vedľa textu vo veľkosti z atribútu size. Keď SVG používa currentColor, automaticky prevezme farbu okolitého textu.

Ako ikona vlastného bloku

Pri registrácii bloku môže vlastná ikona nahradiť predvolený Dashicon. Zmeň hodnotu kľúča icon z názvu Dashiconu na celé meno zaregistrovanej ikony.

'icon' => 'warning', // Používa Dashicon

'icon' => 'myplugin/star', // Používa zaregistrovanú vlastnú ikonu

'icon' => 'warning', // Používa Dashicon

'icon' => 'myplugin/star', // Používa zaregistrovanú vlastnú ikonu

Vkladač blokov potom zobrazí vlastné SVG namiesto všeobecného Dashiconu. Funguje to pri blokoch registrovaných v JavaScripte aj pri blokoch, ktoré registruješ iba cez PHP pomocou register_block_type(). Rovnaká registrácia tak obslúži editor, PHP a REST API.

5. Prispôsob vzhľad ikon cez CSS

Nechaj ikonu zdediť farbu

Pri návrhu SVG používaj stroke="currentColor" alebo fill="currentColor", nie pevné farby. Ikona v červenom texte bude červená, v tmavej téme tmavá a v odkaze prevezme farbu odkazu; správa sa podobne ako text.

<!-- Nevhodné: ikona zostane vždy červená -->
<svg viewBox="0 0 24 24" stroke="#dc2626" stroke-width="2">
    <path d="..."/>
</svg>

<!-- Nevhodné: ikona zostane vždy červená -->
<svg viewBox="0 0 24 24" stroke="#dc2626" stroke-width="2">
    <path d="..."/>
</svg>

SVG s pevnou farbou sa môže s témou biť. SVG bez pevného fill a stroke sa prispôsobí ľubovoľnej téme.

Vynúť konkrétnu farbu, ak ju stav vyžaduje

Značka alebo indikátor stavu môže potrebovať farbu nezávislú od okolia. Triedu, ktorú si odovzdal cez argument class, uprav v CSS takto.

.featured-icon {
    color: #f59e0b; /* Jantárová bez ohľadu na okolitý text */
}

.featured-icon {
    color: #f59e0b; /* Jantárová bez ohľadu na okolitý text */
}

Keď SVG používa currentColor, vlastnosť color na SVG sa prenesie do jeho výplne alebo obrysu. Ikona preto zostane jantárová aj v tmavom texte.

Nastav veľkosť a stav pri prejdení myšou

Pri výstupe zo shortcode alebo wp_get_icon() rieši presné rozmery argument size. Ak chceš veľkosť riadiť CSS alebo potrebuješ stav hover, zacieľ SVG vo vlastnom obale.

.myplugin-icon-inline svg {
    transition: transform 0.15s ease-in-out;
}

.myplugin-icon-inline:hover svg {
    transform: scale(1.1);
}

.myplugin-icon-inline svg {
    transition: transform 0.15s ease-in-out;
}

.myplugin-icon-inline:hover svg {
    transform: scale(1.1);
}

size v wp_get_icon() použi pri jednorazovom výstupe, kde záleží na presnom počte pixelov a CSS by neprinieslo výhodu.
CSS triedy cez argument class alebo cez obal použi, keď sa ikona opakuje na mnohých miestach, musí vyzerať jednotne alebo reaguje na hover, focus, active či kontext odkazu a nadpisu.
Pri shortcode drobné úpravy rieš atribútom size; jednotný vzhľad na celom webe nastav cez CSS, napríklad na .myplugin-icon-inline svg.

6. Odstráň ikonu alebo kolekciu

WordPress 7.1 obsahuje aj dvojicu funkcií na zrušenie registrácie. Počas vývoja alebo pri aktualizácii pluginu, ktorá jednu ikonu prestane používať, odstrániš konkrétnu ikonu takto.

wp_unregister_icon( 'myplugin/bookmark' );

wp_unregister_icon( 'myplugin/bookmark' );

Ikona zmizne z výberu pri nasledujúcej požiadavke. Existujúci blok core/icon, ktorý ju už obsahuje v obsahu článku, sa však vykreslí prázdny, pretože WordPress obsah článku neprepíše.

Po deaktivácii pluginu odstráň celú kolekciu. Jedno volanie zruší aj všetky ikony, ktoré do nej patria, takže ich nemusíš odregistrovať v cykle.

register_deactivation_hook( __FILE__, 'myplugin_unregister_icons' );

function myplugin_unregister_icons() {
    wp_unregister_icon_collection( 'myplugin' );
}

register_deactivation_hook( __FILE__, 'myplugin_unregister_icons' );

function myplugin_unregister_icons() {
    wp_unregister_icon_collection( 'myplugin' );
}

Bezpečne priprav SVG súbory

WordPress pri registrácii SVG obsah neupravuje. Vráti presne reťazec, ktorý vložíš do content, alebo obsah súboru, na ktorý ukáže file_path, preto SVG pred vydaním pluginu vyčisti sám.

Odstráň skripty, externé referencie a všetko, čo ikona nepotrebuje.
Odstráň pevné farby fill a stroke. Namiesto nich použi currentColor, ak má ikona dediť farbu.
Z koreňového elementu <svg> odstráň atribúty width a height, ale ponechaj viewBox.
Odstráň bloky <style> a zachovaj iba štrukturálne atribúty SVG.

Ikony z témy a kolízie mien

Rovnaké volanie wp_register_icon() môžeš použiť aj vo functions.php témy. Pre cestu k súboru vtedy použi get_stylesheet_directory(), no počítaj s tým, že po zmene témy jej ikony zmiznú.

Dve kolekcie môžu obsahovať ikonu s rovnakým slugom. myplugin/heart a napríklad otherplugin/heart budú fungovať vedľa seba, pretože jedinečnosť zabezpečuje celé meno vrátane prefixu kolekcie.

Čo spraviť ďalej

Zaregistruj kolekciu na init s predvolenou prioritou a ikony pridaj až neskôr, napríklad s prioritou 20. Pre malé množstvo ikon zvoľ content, pre knižnicu na disku file_path a pri väčšom počte súborov použi glob(). Takto jedna registrácia napojí ikony na blokový editor, PHP šablóny aj REST vrstvu bez build kroku.

Kompletný ukážkový plugin so vzorovými SVG, README a hromadnou registráciou nájdeš v repozitári GitHub.

Otvoriť kompletný ukážkový plugin na GitHube ..

Ako pridať vlastné SVG ikony vo WordPresse 7.1

API stojí na kolekciách a troch funkciách

1. Vytvor plugin a najprv zaregistruj kolekciu

2. Pridaj ikony cez `content` a `file_path`

Ikona vložená priamo do PHP

Ikony načítané zo súborov

3. Zaregistruj celý priečinok ikon naraz

4. Použi registrované ikony na troch miestach

V bloku `core/icon` a cez REST API

V PHP cez `wp_get_icon()`

Ako ikona vlastného bloku

5. Prispôsob vzhľad ikon cez CSS

Nechaj ikonu zdediť farbu

Vynúť konkrétnu farbu, ak ju stav vyžaduje

Nastav veľkosť a stav pri prejdení myšou

6. Odstráň ikonu alebo kolekciu

Bezpečne priprav SVG súbory

Ikony z témy a kolízie mien

Čo spraviť ďalej

Referencie / Zdroje

Jana Szabová

Viac od Jana Szabová

Pridajte sa ku komunite HelloWP!

API stojí na kolekciách a troch funkciách

1. Vytvor plugin a najprv zaregistruj kolekciu

2. Pridaj ikony cez content a file_path

Ikona vložená priamo do PHP

Ikony načítané zo súborov

3. Zaregistruj celý priečinok ikon naraz

4. Použi registrované ikony na troch miestach

V bloku core/icon a cez REST API

V PHP cez wp_get_icon()

Ako ikona vlastného bloku

5. Prispôsob vzhľad ikon cez CSS

Nechaj ikonu zdediť farbu

Vynúť konkrétnu farbu, ak ju stav vyžaduje

Nastav veľkosť a stav pri prejdení myšou

6. Odstráň ikonu alebo kolekciu

Bezpečne priprav SVG súbory

Ikony z témy a kolízie mien

Čo spraviť ďalej

Referencie / Zdroje

Jana Szabová

Viac od Jana Szabová

Pridajte sa ku komunite HelloWP!

2. Pridaj ikony cez `content` a `file_path`

V bloku `core/icon` a cez REST API

V PHP cez `wp_get_icon()`