{"id":233,"date":"2026-08-14T14:01:49","date_gmt":"2026-08-14T12:01:49","guid":{"rendered":"https:\/\/helloblog.io\/sk\/vlastne-svg-ikony-wordpress-7-1\/"},"modified":"2026-08-14T14:01:49","modified_gmt":"2026-08-14T12:01:49","slug":"vlastne-svg-ikony-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/sk\/vlastne-svg-ikony-wordpress-7-1\/","title":{"rendered":"Ako prida\u0165 vlastn\u00e9 SVG ikony vo WordPresse 7.1"},"content":{"rendered":"\n<p>WordPress 7.1 m\u00e1 19. augusta 2026 prinies\u0165 verejn\u00e9 API pre vlastn\u00e9 SVG ikony. Plugin ich zaregistruje bez JavaScriptu a build kroku, blok <code>core\/icon<\/code> ich pon\u00fakne vo v\u00fdbere, PHP ich vykresl\u00ed na serveri a REST API ich spr\u00edstupn\u00ed extern\u00fdm n\u00e1strojom.<\/p>\n\n\n\n<p>V n\u00e1vode vytvor\u00ed\u0161 mal\u00fd plugin s kolekciou ikon, prid\u00e1\u0161 ikonu priamo v PHP aj zo s\u00faborov a pou\u017eije\u0161 ich v editore, \u0161abl\u00f3ne, shortcodoch aj pri registr\u00e1cii vlastn\u00e9ho bloku. Na v\u00fdvoj potrebuje\u0161 WordPress 7.1 alebo nov\u0161\u00ed; pou\u017ei\u0165 m\u00f4\u017ee\u0161 aj verziu 7.1 RC, nieko\u013eko SVG s\u00faborov, lok\u00e1lne prostredie ako LocalWP, WordPress Studio alebo wp-env a z\u00e1kladn\u00fa znalos\u0165 PHP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">API stoj\u00ed na kolekci\u00e1ch a troch funkci\u00e1ch<\/h2>\n\n\n\n<p>Ka\u017ed\u00e1 vlastn\u00e1 ikona patr\u00ed do kolekcie. N\u00e1zov kolekcie tvor\u00ed prefix cel\u00e9ho mena ikony, tak\u017ee <code>core\/plus<\/code> a <code>myplugin\/plus<\/code> sa nebij\u00fa. Tento menn\u00fd priestor z\u00e1rove\u0148 zabr\u00e1ni konfliktom medzi ikonami core WordPressu a r\u00f4znych pluginov.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>wp_register_icon_collection( $name, $args )<\/code> zaregistruje pomenovan\u00fa skupinu ikon.<\/li>\n\n\n<li><code>wp_register_icon( $name, $args )<\/code> zaregistruje jednu ikonu.<\/li>\n\n\n<li><code>wp_get_icon( $name, $args )<\/code> vr\u00e1ti SVG ikony ako re\u0165azec, ktor\u00fd m\u00f4\u017ee\u0161 vykresli\u0165 v PHP.<\/li>\n\n<\/ul>\n\n\n\n<p>Pri registr\u00e1cii ikony zvol\u00ed\u0161 pr\u00e1ve jeden zdroj SVG. Argument <code>content<\/code> prij\u00edma SVG markup ako re\u0165azec priamo v PHP, k\u00fdm <code>file_path<\/code> obsahuje absol\u00fatnu cestu k s\u00faboru <code>.svg<\/code>. Pri jednej \u010di dvoch ikon\u00e1ch je praktick\u00fd <code>content<\/code>; pri v\u00e4\u010d\u0161ej kni\u017enici sa lep\u0161ie udr\u017eiavaj\u00fa s\u00fabory cez <code>file_path<\/code>. Neposielaj oba argumenty naraz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Vytvor plugin a najprv zaregistruj kolekciu<\/h2>\n\n\n\n<p>Kolekciu mus\u00ed\u0161 zaregistrova\u0165 sk\u00f4r ne\u017e ikony, ktor\u00e9 do nej chce\u0161 vlo\u017ei\u0165. Ak prid\u00e1\u0161 ikonu do neexistuj\u00facej kolekcie, vo v\u00fdbere ikon sa bez chybov\u00e9ho hl\u00e1senia neobjav\u00ed.<\/p>\n\n\n\n<p>Vo <code>wp-content\/plugins\/<\/code> vytvor nasleduj\u00facu \u0161trukt\u00faru. S\u00fabory <code>star.svg<\/code> a <code>bookmark.svg<\/code> dopln\u00ed\u0161 v \u010fal\u0161om kroku.<\/p>\n\n\n<a href=\"https:\/\/github.com\/webtechhardik\/wpviibes-custom-icons\" class=\"download-card\" download>\n                <span class=\"download-icon\"><i class=\"fa-duotone fa-file-arrow-down\"><\/i><\/span>\n                <span class=\"download-info\">\n                    <span class=\"download-title\">\u0160trukt\u00fara pluginu<\/span>\n                    <span class=\"download-meta\"><span class=\"download-filename\">\/wp-content\/plugins\/myplugin-custom-icons\/<\/span><span class=\"download-size\">\/<\/span><\/span>\n                <\/span>\n                <span class=\"download-action\"><i class=\"fa-duotone fa-arrow-down-to-line\"><\/i><\/span>\n            <\/a>\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>myplugin-custom-icons\/\n\u251c\u2500\u2500 myplugin-custom-icons.php\n\u2514\u2500\u2500 icons\/\n    \u251c\u2500\u2500 star.svg\n    \u2514\u2500\u2500 bookmark.svg\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span>myplugin-custom-icons\/<\/span><\/span>\n<span class=\"line\"><span>\u251c\u2500\u2500 myplugin-custom-icons.php<\/span><\/span>\n<span class=\"line\"><span>\u2514\u2500\u2500 icons\/<\/span><\/span>\n<span class=\"line\"><span>    \u251c\u2500\u2500 star.svg<\/span><\/span>\n<span class=\"line\"><span>    \u2514\u2500\u2500 bookmark.svg<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Do hlavn\u00e9ho s\u00faboru pluginu vlo\u017e hlavi\u010dku, ochranu pred priamym spusten\u00edm a registr\u00e1ciu kolekcie. Hook <code>init<\/code> m\u00e1 bez uvedenej priority predvolen\u00fa prioritu <code>10<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;?php\n\/**\n * Plugin Name: MyPlugin Custom Icons\n * Description: Registruje vlastn\u00e9 SVG ikony pre WordPress 7.1+.\n * Version:     1.0.0\n * Author:      MyPlugin\n * Requires at least: 7.1\n * Requires PHP: 7.4\n *\/\n\nif ( ! defined( 'ABSPATH' ) ) {\n    exit;\n}\n\ndefine( 'MYPLUGIN_ICONS_PATH', plugin_dir_path( __FILE__ ) );\n\nadd_action( 'init', 'myplugin_register_icon_collection' );\n\nfunction myplugin_register_icon_collection() {\n    wp_register_icon_collection(\n        'myplugin',\n        array(\n            'label' =&gt; __( 'MyPlugin', 'myplugin-icons' ),\n        )\n    );\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#F97583\">&#x3C;?<\/span><span style=\"color:#79B8FF\">php<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\">\/**<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> * Plugin Name: MyPlugin Custom Icons<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> * Description: Registruje vlastn\u00e9 SVG ikony pre WordPress 7.1+.<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> * Version:     1.0.0<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> * Author:      MyPlugin<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> * Requires at least: 7.1<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> * Requires PHP: 7.4<\/span><\/span>\n<span class=\"line\"><span style=\"color:#6A737D\"> *\/<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">if<\/span><span style=\"color:#E1E4E8\"> ( <\/span><span style=\"color:#F97583\">!<\/span><span style=\"color:#79B8FF\"> defined<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'ABSPATH'<\/span><span style=\"color:#E1E4E8\"> ) ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">    exit<\/span><span style=\"color:#E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">define<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'MYPLUGIN_ICONS_PATH'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#B392F0\">plugin_dir_path<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#79B8FF\">__FILE__<\/span><span style=\"color:#E1E4E8\"> ) );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">add_action<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'init'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin_register_icon_collection'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">function<\/span><span style=\"color:#B392F0\"> myplugin_register_icon_collection<\/span><span style=\"color:#E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    wp_register_icon_collection<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'myplugin'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">        array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'label'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#B392F0\"> __<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'MyPlugin'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin-icons'<\/span><span style=\"color:#E1E4E8\"> ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>N\u00e1zov <code>myplugin<\/code> sa stane prefixom mien ako <code>myplugin\/heart<\/code>, <code>myplugin\/star<\/code> a <code>myplugin\/bookmark<\/code>. Hodnota <code>label<\/code> sa zobraz\u00ed ako nadpis sekcie vo v\u00fdbere ikon. Plugin aktivuj v <strong>Pluginy \u2192 Nain\u0161talovan\u00e9 pluginy<\/strong>; samotn\u00e1 pr\u00e1zdna kolekcia sa e\u0161te nikde nevykresl\u00ed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Pridaj ikony cez <code>content<\/code> a <code>file_path<\/code><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Ikona vlo\u017een\u00e1 priamo do PHP<\/h3>\n\n\n\n<p>Pri ikone s kr\u00e1tkym SVG markupom nemus\u00ed\u0161 vytv\u00e1ra\u0165 samostatn\u00fd s\u00fabor. Pridaj nasleduj\u00facu funkciu s prioritou <code>20<\/code>, aby sa spustila a\u017e po vytvoren\u00ed kolekcie.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>add_action( 'init', 'myplugin_register_inline_icons', 20 );\n\nfunction myplugin_register_inline_icons() {\n    wp_register_icon(\n        'myplugin\/heart',\n        array(\n            'label'   =&gt; __( 'Heart', 'myplugin-icons' ),\n            'content' =&gt; '&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;path d=&quot;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&quot;\/&gt;&lt;\/svg&gt;',\n        )\n    );\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">add_action<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'init'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin_register_inline_icons'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#79B8FF\">20<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">function<\/span><span style=\"color:#B392F0\"> myplugin_register_inline_icons<\/span><span style=\"color:#E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    wp_register_icon<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'myplugin\/heart'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">        array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'label'<\/span><span style=\"color:#F97583\">   =><\/span><span style=\"color:#B392F0\"> __<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'Heart'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin-icons'<\/span><span style=\"color:#E1E4E8\"> ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'content'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#9ECBFF\"> '&#x3C;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\">&#x3C;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\"\/>&#x3C;\/svg>'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Meno <code>myplugin\/heart<\/code> dodr\u017eiava form\u00e1t <code>kolekcia\/slug<\/code>. Popisok z <code>label<\/code> uvid\u00ed\u0161 v editore a <code>content<\/code> nesie samotn\u00e9 SVG. Atrib\u00fat <code>stroke=&quot;currentColor&quot;<\/code> nech\u00e1 ikonu zdedi\u0165 farbu okolit\u00e9ho textu namiesto pevne nastavenej v\u00fdplne.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ikony na\u010d\u00edtan\u00e9 zo s\u00faborov<\/h3>\n\n\n\n<p>Pri ikon\u00e1ch ulo\u017een\u00fdch na disku odovzdaj absol\u00fatnu cestu cez <code>file_path<\/code>. Do prie\u010dinka <code>icons\/<\/code> ulo\u017e tieto dva s\u00fabory.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n    &lt;polygon points=&quot;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&quot;\/&gt;\n&lt;\/svg&gt;\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8\">&#x3C;<\/span><span style=\"color:#85E89D\">svg<\/span><span style=\"color:#B392F0\"> xmlns<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span><span style=\"color:#B392F0\"> viewBox<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"0 0 24 24\"<\/span><span style=\"color:#B392F0\"> fill<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"none\"<\/span><span style=\"color:#B392F0\"> stroke<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"currentColor\"<\/span><span style=\"color:#B392F0\"> stroke-width<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"2\"<\/span><span style=\"color:#B392F0\"> stroke-linecap<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"round\"<\/span><span style=\"color:#B392F0\"> stroke-linejoin<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"round\"<\/span><span style=\"color:#E1E4E8\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &#x3C;<\/span><span style=\"color:#85E89D\">polygon<\/span><span style=\"color:#B392F0\"> points<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"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\"<\/span><span style=\"color:#E1E4E8\">\/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">&#x3C;\/<\/span><span style=\"color:#85E89D\">svg<\/span><span style=\"color:#E1E4E8\">><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;\n    &lt;path d=&quot;M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z&quot;\/&gt;\n&lt;\/svg&gt;\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#E1E4E8\">&#x3C;<\/span><span style=\"color:#85E89D\">svg<\/span><span style=\"color:#B392F0\"> xmlns<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"http:\/\/www.w3.org\/2000\/svg\"<\/span><span style=\"color:#B392F0\"> viewBox<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"0 0 24 24\"<\/span><span style=\"color:#B392F0\"> fill<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"none\"<\/span><span style=\"color:#B392F0\"> stroke<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"currentColor\"<\/span><span style=\"color:#B392F0\"> stroke-width<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"2\"<\/span><span style=\"color:#B392F0\"> stroke-linecap<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"round\"<\/span><span style=\"color:#B392F0\"> stroke-linejoin<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"round\"<\/span><span style=\"color:#E1E4E8\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &#x3C;<\/span><span style=\"color:#85E89D\">path<\/span><span style=\"color:#B392F0\"> d<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\"<\/span><span style=\"color:#E1E4E8\">\/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">&#x3C;\/<\/span><span style=\"color:#85E89D\">svg<\/span><span style=\"color:#E1E4E8\">><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>add_action( 'init', 'myplugin_register_file_icons', 20 );\n\nfunction myplugin_register_file_icons() {\n    wp_register_icon(\n        'myplugin\/star',\n        array(\n            'label'     =&gt; __( 'Star', 'myplugin-icons' ),\n            'file_path' =&gt; MYPLUGIN_ICONS_PATH . 'icons\/star.svg',\n        )\n    );\n\n    wp_register_icon(\n        'myplugin\/bookmark',\n        array(\n            'label'     =&gt; __( 'Bookmark', 'myplugin-icons' ),\n            'file_path' =&gt; MYPLUGIN_ICONS_PATH . 'icons\/bookmark.svg',\n        )\n    );\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">add_action<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'init'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin_register_file_icons'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#79B8FF\">20<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">function<\/span><span style=\"color:#B392F0\"> myplugin_register_file_icons<\/span><span style=\"color:#E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    wp_register_icon<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'myplugin\/star'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">        array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'label'<\/span><span style=\"color:#F97583\">     =><\/span><span style=\"color:#B392F0\"> __<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'Star'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin-icons'<\/span><span style=\"color:#E1E4E8\"> ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'file_path'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#79B8FF\"> MYPLUGIN_ICONS_PATH<\/span><span style=\"color:#F97583\"> .<\/span><span style=\"color:#9ECBFF\"> 'icons\/star.svg'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    wp_register_icon<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'myplugin\/bookmark'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">        array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'label'<\/span><span style=\"color:#F97583\">     =><\/span><span style=\"color:#B392F0\"> __<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'Bookmark'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin-icons'<\/span><span style=\"color:#E1E4E8\"> ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'file_path'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#79B8FF\"> MYPLUGIN_ICONS_PATH<\/span><span style=\"color:#F97583\"> .<\/span><span style=\"color:#9ECBFF\"> 'icons\/bookmark.svg'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Funkcia aj kolekcia zost\u00e1vaj\u00fa rovnak\u00e9, men\u00ed sa len <code>content<\/code> na <code>file_path<\/code>. WordPress s\u00fabor na\u010d\u00edta a\u017e vtedy, ke\u010f ho potrebuje. Po otvoren\u00ed bloku <code>core\/icon<\/code> uvid\u00ed\u0161 vo v\u00fdbere sekciu <strong>MyPlugin<\/strong> s ikonami Heart, Star a Bookmark.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1712\" height=\"602\" src=\"https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress.webp\" alt=\"V\u00fdber ikon vo WordPresse so sekciou vlastn\u00fdch ikon\" class=\"wp-image-231\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress.webp 1712w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress-300x105.webp 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress-1024x360.webp 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress-768x270.webp 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress-1536x540.webp 1536w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/custom-icons-added-tab-in-wordpress-400x141.webp 400w\" sizes=\"auto, (max-width: 1712px) 100vw, 1712px\" \/><figcaption class=\"wp-element-caption\">Registrovan\u00e1 kolekcia sa zobraz\u00ed priamo vo v\u00fdbere bloku <code>core\/icon<\/code>. \u2014 <em>Forr\u00e1s: WPVibes<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Zaregistruj cel\u00fd prie\u010dinok ikon naraz<\/h2>\n\n\n\n<p>Pri re\u00e1lnej kni\u017enici sa neoplat\u00ed p\u00edsa\u0165 samostatn\u00e9 volanie <code>wp_register_icon()<\/code> pre desiatky ikon. Namiesto funkcie <code>myplugin_register_file_icons()<\/code> pou\u017ei tento variant: pri ka\u017edej po\u017eiadavke prejde prie\u010dinok a automaticky zaregistruje v\u0161etky SVG s\u00fabory.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>add_action( 'init', 'myplugin_register_all_file_icons', 20 );\n\nfunction myplugin_register_all_file_icons() {\n    $icons_dir = MYPLUGIN_ICONS_PATH . 'icons\/';\n    $svg_files = glob( $icons_dir . '*.svg' );\n\n    if ( empty( $svg_files ) ) {\n        return;\n    }\n\n    foreach ( $svg_files as $file_path ) {\n        $slug  = basename( $file_path, '.svg' );\n        $label = ucwords( str_replace( '-', ' ', $slug ) );\n\n        wp_register_icon(\n            'myplugin\/' . $slug,\n            array(\n                'label'     =&gt; $label,\n                'file_path' =&gt; $file_path,\n            )\n        );\n    }\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">add_action<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'init'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin_register_all_file_icons'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#79B8FF\">20<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">function<\/span><span style=\"color:#B392F0\"> myplugin_register_all_file_icons<\/span><span style=\"color:#E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    $icons_dir <\/span><span style=\"color:#F97583\">=<\/span><span style=\"color:#79B8FF\"> MYPLUGIN_ICONS_PATH<\/span><span style=\"color:#F97583\"> .<\/span><span style=\"color:#9ECBFF\"> 'icons\/'<\/span><span style=\"color:#E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    $svg_files <\/span><span style=\"color:#F97583\">=<\/span><span style=\"color:#79B8FF\"> glob<\/span><span style=\"color:#E1E4E8\">( $icons_dir <\/span><span style=\"color:#F97583\">.<\/span><span style=\"color:#9ECBFF\"> '*.svg'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">    if<\/span><span style=\"color:#E1E4E8\"> ( <\/span><span style=\"color:#79B8FF\">empty<\/span><span style=\"color:#E1E4E8\">( $svg_files ) ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">        return<\/span><span style=\"color:#E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">    foreach<\/span><span style=\"color:#E1E4E8\"> ( $svg_files <\/span><span style=\"color:#F97583\">as<\/span><span style=\"color:#E1E4E8\"> $file_path ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        $slug  <\/span><span style=\"color:#F97583\">=<\/span><span style=\"color:#79B8FF\"> basename<\/span><span style=\"color:#E1E4E8\">( $file_path, <\/span><span style=\"color:#9ECBFF\">'.svg'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        $label <\/span><span style=\"color:#F97583\">=<\/span><span style=\"color:#79B8FF\"> ucwords<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#79B8FF\">str_replace<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'-'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">' '<\/span><span style=\"color:#E1E4E8\">, $slug ) );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">        wp_register_icon<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'myplugin\/'<\/span><span style=\"color:#F97583\"> .<\/span><span style=\"color:#E1E4E8\"> $slug,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">            array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">                'label'<\/span><span style=\"color:#F97583\">     =><\/span><span style=\"color:#E1E4E8\"> $label,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">                'file_path'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#E1E4E8\"> $file_path,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">            )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>glob( $icons_dir . '*.svg' )<\/code> vr\u00e1ti v\u0161etky s\u00fabory <code>.svg<\/code> v prie\u010dinku.<\/li>\n\n\n<li><code>basename( $file_path, '.svg' )<\/code> odstr\u00e1ni cestu aj pr\u00edponu; napr\u00edklad z <code>advanced-button.svg<\/code> vytvor\u00ed <code>advanced-button<\/code>.<\/li>\n\n\n<li><code>ucwords( str_replace( '-', ' ', $slug ) )<\/code> zmen\u00ed slug na \u010ditate\u013en\u00fd popisok \u201eAdvanced Button\u201c.<\/li>\n\n\n<li>Cyklus prid\u00e1 ka\u017ed\u00fa ikonu do kolekcie <code>myplugin\/<\/code>.<\/li>\n\n<\/ul>\n\n\n\n<p>Nov\u00fd SVG s\u00fabor sta\u010d\u00ed vlo\u017ei\u0165 do prie\u010dinka <code>icons\/<\/code> a obnovi\u0165 editor. Ikona sa objav\u00ed vo v\u00fdbere bez zmeny PHP k\u00f3du. Rovnak\u00fd vzor obsl\u00fa\u017ei tri aj tristo ikon; ikonu Heart m\u00f4\u017ee\u0161 na\u010falej registrova\u0165 inline a ostatn\u00e9 necha\u0165 na\u010d\u00edta\u0165 z prie\u010dinka.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1207\" height=\"341\" src=\"https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/multiple-custom-icons-added-wordpress.webp\" alt=\"Viacero vlastn\u00fdch SVG ikon vo v\u00fdbere WordPressu\" class=\"wp-image-232\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/multiple-custom-icons-added-wordpress.webp 1207w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/multiple-custom-icons-added-wordpress-300x85.webp 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/multiple-custom-icons-added-wordpress-1024x289.webp 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/multiple-custom-icons-added-wordpress-768x217.webp 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/16\/2026\/08\/multiple-custom-icons-added-wordpress-400x113.webp 400w\" sizes=\"auto, (max-width: 1207px) 100vw, 1207px\" \/><figcaption class=\"wp-element-caption\">Hromadn\u00e1 registr\u00e1cia na\u010d\u00edta ka\u017ed\u00fa SVG ikonu z ur\u010den\u00e9ho prie\u010dinka. \u2014 <em>Forr\u00e1s: WPVibes<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. Pou\u017ei registrovan\u00e9 ikony na troch miestach<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">V bloku <code>core\/icon<\/code> a cez REST API<\/h3>\n\n\n\n<p>V\u00fdber bloku <code>core\/icon<\/code> automaticky na\u010d\u00edta v\u0161etky registrovan\u00e9 kolekcie. Vlo\u017e blok, vyber ikonu z kolekcie MyPlugin a WordPress ju vykresl\u00ed na fronte bez \u010fal\u0161ieho k\u00f3du. Extern\u00e9 n\u00e1stroje, ktor\u00e9 \u010d\u00edtaj\u00fa d\u00e1ta WordPressu, n\u00e1jdu ikony na REST endpointe <code>\/wp-json\/wp\/v2\/icons<\/code> a kolekcie na <code>\/wp-json\/wp\/v2\/icon-collections<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">V PHP cez <code>wp_get_icon()<\/code><\/h3>\n\n\n\n<p>Funkcia <code>wp_get_icon()<\/code> vracia SVG ako re\u0165azec, tak\u017ee jednoduch\u00fd v\u00fdstup vyzer\u00e1 takto.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>echo wp_get_icon( 'myplugin\/heart' );\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#79B8FF\">echo<\/span><span style=\"color:#B392F0\"> wp_get_icon<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'myplugin\/heart'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>V \u0161abl\u00f3ne odovzdaj druh\u00e9 pole argumentov, ak chce\u0161 nastavi\u0165 rozmery, CSS triedu a pr\u00edstupn\u00fd n\u00e1zov.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>echo wp_get_icon(\n    'myplugin\/star',\n    array(\n        'size'  =&gt; 32,\n        'class' =&gt; 'featured-icon',\n        'label' =&gt; __( 'Featured', 'myplugin-icons' ),\n    )\n);\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#79B8FF\">echo<\/span><span style=\"color:#B392F0\"> wp_get_icon<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">    'myplugin\/star'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">    array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'size'<\/span><span style=\"color:#F97583\">  =><\/span><span style=\"color:#79B8FF\"> 32<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'class'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#9ECBFF\"> 'featured-icon'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'label'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#B392F0\"> __<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'Featured'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin-icons'<\/span><span style=\"color:#E1E4E8\"> ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">);<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>size<\/code> nastav\u00ed atrib\u00faty <code>width<\/code> a <code>height<\/code> SVG v pixeloch.<\/li>\n\n\n<li><code>class<\/code> prid\u00e1 CSS triedu na element SVG.<\/li>\n\n\n<li><code>label<\/code> nastav\u00ed <code>aria-label<\/code> pre \u010d\u00edta\u010dky obrazovky.<\/li>\n\n<\/ul>\n\n\n\n<p>Ak chce\u0161 ikonu vklada\u0165 do \u010dl\u00e1nkov, str\u00e1nok alebo widgetov, pridaj shortcode <code>[myplugin_icon]<\/code>. Atrib\u00fat <code>name<\/code> ur\u010duje slug ikony, <code>text<\/code> prid\u00e1 text ved\u013ea nej, <code>size<\/code> nastav\u00ed ve\u013ekos\u0165 a <code>class<\/code> dopln\u00ed triedu SVG.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>add_shortcode( 'myplugin_icon', 'myplugin_icon_shortcode' );\n\nfunction myplugin_icon_shortcode( $atts ) {\n    $atts = shortcode_atts(\n        array(\n            'name'  =&gt; 'heart',\n            'text'  =&gt; '',\n            'size'  =&gt; 24,\n            'class' =&gt; '',\n        ),\n        $atts\n    );\n\n    $icon = wp_get_icon(\n        'myplugin\/' . sanitize_key( $atts['name'] ),\n        array(\n            'size'  =&gt; absint( $atts['size'] ),\n            'class' =&gt; sanitize_html_class( $atts['class'] ),\n        )\n    );\n\n    if ( ! $icon ) {\n        return '';\n    }\n\n    return sprintf(\n        '&lt;span&gt;%s %s&lt;\/span&gt;',\n        $icon,\n        esc_html( $atts['text'] )\n    );\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">add_shortcode<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'myplugin_icon'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin_icon_shortcode'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">function<\/span><span style=\"color:#B392F0\"> myplugin_icon_shortcode<\/span><span style=\"color:#E1E4E8\">( $atts ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    $atts <\/span><span style=\"color:#F97583\">=<\/span><span style=\"color:#B392F0\"> shortcode_atts<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">        array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'name'<\/span><span style=\"color:#F97583\">  =><\/span><span style=\"color:#9ECBFF\"> 'heart'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'text'<\/span><span style=\"color:#F97583\">  =><\/span><span style=\"color:#9ECBFF\"> ''<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'size'<\/span><span style=\"color:#F97583\">  =><\/span><span style=\"color:#79B8FF\"> 24<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'class'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#9ECBFF\"> ''<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        $atts<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    $icon <\/span><span style=\"color:#F97583\">=<\/span><span style=\"color:#B392F0\"> wp_get_icon<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        'myplugin\/'<\/span><span style=\"color:#F97583\"> .<\/span><span style=\"color:#B392F0\"> sanitize_key<\/span><span style=\"color:#E1E4E8\">( $atts[<\/span><span style=\"color:#9ECBFF\">'name'<\/span><span style=\"color:#E1E4E8\">] ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">        array<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'size'<\/span><span style=\"color:#F97583\">  =><\/span><span style=\"color:#B392F0\"> absint<\/span><span style=\"color:#E1E4E8\">( $atts[<\/span><span style=\"color:#9ECBFF\">'size'<\/span><span style=\"color:#E1E4E8\">] ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">            'class'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#B392F0\"> sanitize_html_class<\/span><span style=\"color:#E1E4E8\">( $atts[<\/span><span style=\"color:#9ECBFF\">'class'<\/span><span style=\"color:#E1E4E8\">] ),<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">    if<\/span><span style=\"color:#E1E4E8\"> ( <\/span><span style=\"color:#F97583\">!<\/span><span style=\"color:#E1E4E8\"> $icon ) {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">        return<\/span><span style=\"color:#9ECBFF\"> ''<\/span><span style=\"color:#E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    }<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">    return<\/span><span style=\"color:#79B8FF\"> sprintf<\/span><span style=\"color:#E1E4E8\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">        '&#x3C;span>%s %s&#x3C;\/span>'<\/span><span style=\"color:#E1E4E8\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">        $icon,<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">        esc_html<\/span><span style=\"color:#E1E4E8\">( $atts[<\/span><span style=\"color:#9ECBFF\">'text'<\/span><span style=\"color:#E1E4E8\">] )<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>[myplugin_icon name=&quot;heart&quot; text=&quot;Hello World&quot;]\n\n[myplugin_icon name=&quot;star&quot; text=&quot;Featured post&quot; size=&quot;32&quot;]\n\n[myplugin_icon name=&quot;bookmark&quot; text=&quot;Save for later&quot; size=&quot;20&quot;]\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span>[myplugin_icon name=\"heart\" text=\"Hello World\"]<\/span><\/span>\n<span class=\"line\"><span><\/span><\/span>\n<span class=\"line\"><span>[myplugin_icon name=\"star\" text=\"Featured post\" size=\"32\"]<\/span><\/span>\n<span class=\"line\"><span><\/span><\/span>\n<span class=\"line\"><span>[myplugin_icon name=\"bookmark\" text=\"Save for later\" size=\"20\"]<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Ikona sa vykresl\u00ed ved\u013ea textu vo ve\u013ekosti z atrib\u00fatu <code>size<\/code>. Ke\u010f SVG pou\u017e\u00edva <code>currentColor<\/code>, automaticky prevezme farbu okolit\u00e9ho textu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ako ikona vlastn\u00e9ho bloku<\/h3>\n\n\n\n<p>Pri registr\u00e1cii bloku m\u00f4\u017ee vlastn\u00e1 ikona nahradi\u0165 predvolen\u00fd Dashicon. Zme\u0148 hodnotu k\u013e\u00fa\u010da <code>icon<\/code> z n\u00e1zvu Dashiconu na cel\u00e9 meno zaregistrovanej ikony.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>'icon' =&gt; 'warning', \/\/ Pou\u017e\u00edva Dashicon\n\n'icon' =&gt; 'myplugin\/star', \/\/ Pou\u017e\u00edva zaregistrovan\u00fa vlastn\u00fa ikonu\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#9ECBFF\">'icon'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#9ECBFF\"> 'warning'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#6A737D\">\/\/ Pou\u017e\u00edva Dashicon<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#9ECBFF\">'icon'<\/span><span style=\"color:#F97583\"> =><\/span><span style=\"color:#9ECBFF\"> 'myplugin\/star'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#6A737D\">\/\/ Pou\u017e\u00edva zaregistrovan\u00fa vlastn\u00fa ikonu<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Vklada\u010d blokov potom zobraz\u00ed vlastn\u00e9 SVG namiesto v\u0161eobecn\u00e9ho Dashiconu. Funguje to pri blokoch registrovan\u00fdch v JavaScripte aj pri blokoch, ktor\u00e9 registruje\u0161 iba cez PHP pomocou <code>register_block_type()<\/code>. Rovnak\u00e1 registr\u00e1cia tak obsl\u00fa\u017ei editor, PHP a REST API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Prisp\u00f4sob vzh\u013ead ikon cez CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Nechaj ikonu zdedi\u0165 farbu<\/h3>\n\n\n\n<p>Pri n\u00e1vrhu SVG pou\u017e\u00edvaj <code>stroke=&quot;currentColor&quot;<\/code> alebo <code>fill=&quot;currentColor&quot;<\/code>, nie pevn\u00e9 farby. Ikona v \u010dervenom texte bude \u010derven\u00e1, v tmavej t\u00e9me tmav\u00e1 a v odkaze prevezme farbu odkazu; spr\u00e1va sa podobne ako text.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;!-- Nevhodn\u00e9: ikona zostane v\u017edy \u010derven\u00e1 --&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; stroke=&quot;#dc2626&quot; stroke-width=&quot;2&quot;&gt;\n    &lt;path d=&quot;...&quot;\/&gt;\n&lt;\/svg&gt;\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#6A737D\">&#x3C;!-- Nevhodn\u00e9: ikona zostane v\u017edy \u010derven\u00e1 --><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">&#x3C;<\/span><span style=\"color:#85E89D\">svg<\/span><span style=\"color:#B392F0\"> viewBox<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"0 0 24 24\"<\/span><span style=\"color:#B392F0\"> stroke<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"#dc2626\"<\/span><span style=\"color:#B392F0\"> stroke-width<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"2\"<\/span><span style=\"color:#E1E4E8\">><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">    &#x3C;<\/span><span style=\"color:#85E89D\">path<\/span><span style=\"color:#B392F0\"> d<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"...\"<\/span><span style=\"color:#E1E4E8\">\/><\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">&#x3C;\/<\/span><span style=\"color:#85E89D\">svg<\/span><span style=\"color:#E1E4E8\">><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>SVG s pevnou farbou sa m\u00f4\u017ee s t\u00e9mou bi\u0165. SVG bez pevn\u00e9ho <code>fill<\/code> a <code>stroke<\/code> sa prisp\u00f4sob\u00ed \u013eubovo\u013enej t\u00e9me.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Vyn\u00fa\u0165 konkr\u00e9tnu farbu, ak ju stav vy\u017eaduje<\/h3>\n\n\n\n<p>Zna\u010dka alebo indik\u00e1tor stavu m\u00f4\u017ee potrebova\u0165 farbu nez\u00e1visl\u00fa od okolia. Triedu, ktor\u00fa si odovzdal cez argument <code>class<\/code>, uprav v CSS takto.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.featured-icon {\n    color: #f59e0b; \/* Jant\u00e1rov\u00e1 bez oh\u013eadu na okolit\u00fd text *\/\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">.featured-icon<\/span><span style=\"color:#E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">    color<\/span><span style=\"color:#E1E4E8\">: <\/span><span style=\"color:#79B8FF\">#f59e0b<\/span><span style=\"color:#E1E4E8\">; <\/span><span style=\"color:#6A737D\">\/* Jant\u00e1rov\u00e1 bez oh\u013eadu na okolit\u00fd text *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Ke\u010f SVG pou\u017e\u00edva <code>currentColor<\/code>, vlastnos\u0165 <code>color<\/code> na SVG sa prenesie do jeho v\u00fdplne alebo obrysu. Ikona preto zostane jant\u00e1rov\u00e1 aj v tmavom texte.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Nastav ve\u013ekos\u0165 a stav pri prejden\u00ed my\u0161ou<\/h3>\n\n\n\n<p>Pri v\u00fdstupe zo shortcode alebo <code>wp_get_icon()<\/code> rie\u0161i presn\u00e9 rozmery argument <code>size<\/code>. Ak chce\u0161 ve\u013ekos\u0165 riadi\u0165 CSS alebo potrebuje\u0161 stav hover, zacie\u013e SVG vo vlastnom obale.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>.myplugin-icon-inline svg {\n    transition: transform 0.15s ease-in-out;\n}\n\n.myplugin-icon-inline:hover svg {\n    transform: scale(1.1);\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">.myplugin-icon-inline<\/span><span style=\"color:#85E89D\"> svg<\/span><span style=\"color:#E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">    transition<\/span><span style=\"color:#E1E4E8\">: transform <\/span><span style=\"color:#79B8FF\">0.15<\/span><span style=\"color:#F97583\">s<\/span><span style=\"color:#79B8FF\"> ease-in-out<\/span><span style=\"color:#E1E4E8\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">.myplugin-icon-inline:hover<\/span><span style=\"color:#85E89D\"> svg<\/span><span style=\"color:#E1E4E8\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#79B8FF\">    transform<\/span><span style=\"color:#E1E4E8\">: <\/span><span style=\"color:#79B8FF\">scale<\/span><span style=\"color:#E1E4E8\">(<\/span><span style=\"color:#79B8FF\">1.1<\/span><span style=\"color:#E1E4E8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>size<\/code> v <code>wp_get_icon()<\/code> pou\u017ei pri jednorazovom v\u00fdstupe, kde z\u00e1le\u017e\u00ed na presnom po\u010dte pixelov a CSS by neprinieslo v\u00fdhodu.<\/li>\n\n\n<li>CSS triedy cez argument <code>class<\/code> alebo cez obal pou\u017ei, ke\u010f sa ikona opakuje na mnoh\u00fdch miestach, mus\u00ed vyzera\u0165 jednotne alebo reaguje na hover, focus, active \u010di kontext odkazu a nadpisu.<\/li>\n\n\n<li>Pri shortcode drobn\u00e9 \u00fapravy rie\u0161 atrib\u00fatom <code>size<\/code>; jednotn\u00fd vzh\u013ead na celom webe nastav cez CSS, napr\u00edklad na <code>.myplugin-icon-inline svg<\/code>.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">6. Odstr\u00e1\u0148 ikonu alebo kolekciu<\/h2>\n\n\n\n<p>WordPress 7.1 obsahuje aj dvojicu funkci\u00ed na zru\u0161enie registr\u00e1cie. Po\u010das v\u00fdvoja alebo pri aktualiz\u00e1cii pluginu, ktor\u00e1 jednu ikonu prestane pou\u017e\u00edva\u0165, odstr\u00e1ni\u0161 konkr\u00e9tnu ikonu takto.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>wp_unregister_icon( 'myplugin\/bookmark' );\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">wp_unregister_icon<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'myplugin\/bookmark'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Ikona zmizne z v\u00fdberu pri nasleduj\u00facej po\u017eiadavke. Existuj\u00faci blok <code>core\/icon<\/code>, ktor\u00fd ju u\u017e obsahuje v obsahu \u010dl\u00e1nku, sa v\u0161ak vykresl\u00ed pr\u00e1zdny, preto\u017ee WordPress obsah \u010dl\u00e1nku neprep\u00ed\u0161e.<\/p>\n\n\n\n<p>Po deaktiv\u00e1cii pluginu odstr\u00e1\u0148 cel\u00fa kolekciu. Jedno volanie zru\u0161\u00ed aj v\u0161etky ikony, ktor\u00e9 do nej patria, tak\u017ee ich nemus\u00ed\u0161 odregistrova\u0165 v cykle.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#24292e\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>register_deactivation_hook( __FILE__, 'myplugin_unregister_icons' );\n\nfunction myplugin_unregister_icons() {\n    wp_unregister_icon_collection( 'myplugin' );\n}\n<\/textarea><\/pre><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color:#24292e;color:#e1e4e8\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color:#B392F0\">register_deactivation_hook<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#79B8FF\">__FILE__<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#9ECBFF\">'myplugin_unregister_icons'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#F97583\">function<\/span><span style=\"color:#B392F0\"> myplugin_unregister_icons<\/span><span style=\"color:#E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    wp_unregister_icon_collection<\/span><span style=\"color:#E1E4E8\">( <\/span><span style=\"color:#9ECBFF\">'myplugin'<\/span><span style=\"color:#E1E4E8\"> );<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Bezpe\u010dne priprav SVG s\u00fabory<\/h2>\n\n\n\n<p>WordPress pri registr\u00e1cii SVG obsah neupravuje. Vr\u00e1ti presne re\u0165azec, ktor\u00fd vlo\u017e\u00ed\u0161 do <code>content<\/code>, alebo obsah s\u00faboru, na ktor\u00fd uk\u00e1\u017ee <code>file_path<\/code>, preto SVG pred vydan\u00edm pluginu vy\u010disti s\u00e1m.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>Odstr\u00e1\u0148 skripty, extern\u00e9 referencie a v\u0161etko, \u010do ikona nepotrebuje.<\/li>\n\n\n<li>Odstr\u00e1\u0148 pevn\u00e9 farby <code>fill<\/code> a <code>stroke<\/code>. Namiesto nich pou\u017ei <code>currentColor<\/code>, ak m\u00e1 ikona dedi\u0165 farbu.<\/li>\n\n\n<li>Z kore\u0148ov\u00e9ho elementu <code>&lt;svg&gt;<\/code> odstr\u00e1\u0148 atrib\u00faty <code>width<\/code> a <code>height<\/code>, ale ponechaj <code>viewBox<\/code>.<\/li>\n\n\n<li>Odstr\u00e1\u0148 bloky <code>&lt;style&gt;<\/code> a zachovaj iba \u0161truktur\u00e1lne atrib\u00faty SVG.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ikony z t\u00e9my a kol\u00edzie mien<\/h2>\n\n\n\n<p>Rovnak\u00e9 volanie <code>wp_register_icon()<\/code> m\u00f4\u017ee\u0161 pou\u017ei\u0165 aj vo <code>functions.php<\/code> t\u00e9my. Pre cestu k s\u00faboru vtedy pou\u017ei <code>get_stylesheet_directory()<\/code>, no po\u010d\u00edtaj s t\u00fdm, \u017ee po zmene t\u00e9my jej ikony zmizn\u00fa.<\/p>\n\n\n\n<p>Dve kolekcie m\u00f4\u017eu obsahova\u0165 ikonu s rovnak\u00fdm slugom. <code>myplugin\/heart<\/code> a napr\u00edklad <code>otherplugin\/heart<\/code> bud\u00fa fungova\u0165 ved\u013ea seba, preto\u017ee jedine\u010dnos\u0165 zabezpe\u010duje cel\u00e9 meno vr\u00e1tane prefixu kolekcie.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u010co spravi\u0165 \u010falej<\/h2>\n\n\n\n<p>Zaregistruj kolekciu na <code>init<\/code> s predvolenou prioritou a ikony pridaj a\u017e nesk\u00f4r, napr\u00edklad s prioritou <code>20<\/code>. Pre mal\u00e9 mno\u017estvo ikon zvo\u013e <code>content<\/code>, pre kni\u017enicu na disku <code>file_path<\/code> a pri v\u00e4\u010d\u0161om po\u010dte s\u00faborov pou\u017ei <code>glob()<\/code>. Takto jedna registr\u00e1cia napoj\u00ed ikony na blokov\u00fd editor, PHP \u0161abl\u00f3ny aj REST vrstvu bez build kroku.<\/p>\n\n\n\n<p>Kompletn\u00fd uk\u00e1\u017ekov\u00fd plugin so vzorov\u00fdmi SVG, README a hromadnou registr\u00e1ciou n\u00e1jde\u0161 v repozit\u00e1ri GitHub.<\/p>\n\n\n<a href=\"https:\/\/github.com\/webtechhardik\/wpviibes-custom-icons\" class=\"download-card\" download>\n                <span class=\"download-icon\"><i class=\"fa-duotone fa-file-arrow-down\"><\/i><\/span>\n                <span class=\"download-info\">\n                    <span class=\"download-title\">Otvori\u0165 kompletn\u00fd uk\u00e1\u017ekov\u00fd plugin na GitHube<\/span>\n                    <span class=\"download-meta\"><span class=\"download-filename\">.<\/span><span class=\"download-size\">.<\/span><\/span>\n                <\/span>\n                <span class=\"download-action\"><i class=\"fa-duotone fa-arrow-down-to-line\"><\/i><\/span>\n            <\/a>\n\n<div class=\"references-section\">\n                <h2>Referencie \/ Zdroje<\/h2>\n                <ul class=\"references-list\"><li><a href=\"https:\/\/wpvibes.com\/blog\/wordpress-custom-icons\/\" target=\"_blank\" rel=\"noopener noreferrer\">Custom SVG Icons: An Exciting WordPress 7.1 Feature<\/a><\/li><li><a href=\"https:\/\/wpvibes.com\/blog\/php-only-blocks-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">PHP-Only Blocks in WordPress 7.0: The Developer&#039;s Complete Guide<\/a><\/li><li><a href=\"https:\/\/github.com\/webtechhardik\/wpviibes-custom-icons\" target=\"_blank\" rel=\"noopener noreferrer\">wpviibes-custom-icons<\/a><\/li><\/ul>\n            <\/div>","protected":false},"excerpt":{"rendered":"<p>Vlastn\u00e9 SVG ikony vo WordPresse 7.1 zaregistruje\u0161 cez PHP bez JavaScriptu a build kroku. Pou\u017ei ich v bloku `core\/icon`, \u0161abl\u00f3nach, REST API aj ako ikony vlastn\u00fdch blokov.<\/p>\n","protected":false},"author":38,"featured_media":230,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[133,79,111,70,140],"class_list":["post-233","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-blokovy-editor-2","tag-php","tag-rest-api","tag-svg","tag-wordpress-7-1"],"_links":{"self":[{"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/posts\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":0,"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helloblog.io\/sk\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}