{"id":242,"date":"2026-08-14T14:01:54","date_gmt":"2026-08-14T12:01:54","guid":{"rendered":"https:\/\/helloblog.io\/pl\/wlasne-ikony-svg-wordpress-7-1\/"},"modified":"2026-08-14T14:01:54","modified_gmt":"2026-08-14T12:01:54","slug":"wlasne-ikony-svg-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/helloblog.io\/pl\/wlasne-ikony-svg-wordpress-7-1\/","title":{"rendered":"W\u0142asne ikony SVG w WordPressie 7.1 \u2013 kompletny przewodnik"},"content":{"rendered":"\n<p>W\u0142asne ikony SVG w edytorze blokowym dot\u0105d zwykle wymaga\u0142y JavaScriptu, procesu budowania albo kruchego obej\u015bcia problemu. WordPress 7.1 wprowadza publiczne API, kt\u00f3re pozwala zarejestrowa\u0107 ikon\u0119 w PHP, wy\u015bwietli\u0107 j\u0105 w bloku <code>core\/icon<\/code>, wyrenderowa\u0107 w szablonie i udost\u0119pni\u0107 przez REST API \u2013 bez kroku build.<\/p>\n\n\n\n<p>W tym przewodniku zbudujesz ma\u0142\u0105 wtyczk\u0119 z kolekcj\u0105 ikon, dodasz SVG zapisane w kodzie oraz w plikach, zautomatyzujesz rejestracj\u0119 ca\u0142ego katalogu i u\u017cyjesz ikon w tre\u015bci, szablonach oraz blokach. WordPress 7.1 ma ukaza\u0107 si\u0119 19 sierpnia 2026 roku; przyk\u0142ady odpowiadaj\u0105 kodowi planowanemu na dzie\u0144 wydania.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Co zbudujesz i czego potrzebujesz<\/h2>\n\n\n\n<p>Przyk\u0142adowa wtyczka <code>myplugin-custom-icons<\/code> utworzy kolekcj\u0119 <code>myplugin<\/code>. Zarejestrujesz trzy ikony gotowe do u\u017cycia: serce jako SVG zapisany bezpo\u015brednio w PHP, a gwiazdk\u0119 i zak\u0142adk\u0119 z plik\u00f3w <code>.svg<\/code>.<\/p>\n\n\n\n<p>Poznasz te\u017c wzorzec masowej rejestracji, kt\u00f3ry odczytuje ka\u017cdy plik SVG z katalogu, shortcode wstawiaj\u0105cy dowoln\u0105 zarejestrowan\u0105 ikon\u0119 do tre\u015bci oraz u\u017cycie w\u0142asnej ikony jako ikony bloku. Ten sam mechanizm dzia\u0142a r\u00f3wnie\u017c z blokami rejestrowanymi wy\u0142\u0105cznie w PHP.<\/p>\n\n\n\n<p>Przed rozpocz\u0119ciem przygotuj nast\u0119puj\u0105ce elementy:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>WordPress 7.1 lub nowszy; do prac deweloperskich wystarczy WordPress 7.1 RC.<\/li>\n\n\n<li>Kilka plik\u00f3w ikon SVG albo pliki z przyk\u0142ad\u00f3w poni\u017cej.<\/li>\n\n\n<li>Lokalne \u015brodowisko deweloperskie, na przyk\u0142ad LocalWP, WordPress Studio lub wp-env.<\/li>\n\n\n<li>Podstawow\u0105 znajomo\u015b\u0107 PHP.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Poznaj API ikon<\/h2>\n\n\n\n<p>API w\u0142asnych ikon opiera si\u0119 na trzech funkcjach i kolekcjach. Kolekcja to nazwany zbi\u00f3r ikon, a ka\u017cda ikona musi do niego nale\u017ce\u0107.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>wp_register_icon_collection( $name, $args )<\/code> rejestruje nazwan\u0105 grup\u0119 ikon.<\/li>\n\n\n<li><code>wp_register_icon( $name, $args )<\/code> rejestruje pojedyncz\u0105 ikon\u0119.<\/li>\n\n\n<li><code>wp_get_icon( $name, $args )<\/code> renderuje SVG w PHP i zwraca je jako string.<\/li>\n\n<\/ul>\n\n\n\n<p>Nazwa kolekcji tworzy prefiks nazw ikon. Dzi\u0119ki temu <code>core\/plus<\/code> i <code>myplugin\/plus<\/code> nie koliduj\u0105 ze sob\u0105, podobnie jak ikony pochodz\u0105ce z r\u00f3\u017cnych wtyczek. Pe\u0142na nazwa, razem z prefiksem kolekcji, jest unikalnym identyfikatorem.<\/p>\n\n\n\n<p>Przy rejestracji podaj SVG na jeden z dw\u00f3ch sposob\u00f3w. Argument <code>content<\/code> przyjmuje kod SVG jako string osadzony w PHP, natomiast <code>file_path<\/code> wymaga bezwzgl\u0119dnej \u015bcie\u017cki do pliku <code>.svg<\/code> na dysku. Dla pojedynczej ikony wygodny jest <code>content<\/code>; przy wi\u0119kszym katalogu lepiej sprawdza si\u0119 <code>file_path<\/code>. Nie podawaj obu argument\u00f3w dla tej samej ikony.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Utw\u00f3rz wtyczk\u0119 i najpierw zarejestruj kolekcj\u0119<\/h2>\n\n\n\n<p>Kolekcj\u0119 trzeba zarejestrowa\u0107, zanim dodasz do niej pierwsz\u0105 ikon\u0119. Gdy odwr\u00f3cisz t\u0119 kolejno\u015b\u0107, ikona nie pojawi si\u0119 w selektorze i WordPress nie zg\u0142osi b\u0142\u0119du.<\/p>\n\n\n\n<p>W katalogu <code>wp-content\/plugins\/<\/code> utw\u00f3rz tak\u0105 struktur\u0119:<\/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-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 style=\"color:#B392F0\">myplugin-custom-icons\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">\u251c\u2500\u2500<\/span><span style=\"color:#9ECBFF\"> myplugin-custom-icons.php<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">\u2514\u2500\u2500<\/span><span style=\"color:#9ECBFF\"> icons\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    \u251c\u2500\u2500<\/span><span style=\"color:#9ECBFF\"> star.svg<\/span><\/span>\n<span class=\"line\"><span style=\"color:#B392F0\">    \u2514\u2500\u2500<\/span><span style=\"color:#9ECBFF\"> bookmark.svg<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Nast\u0119pnie utw\u00f3rz plik g\u0142\u00f3wny wtyczki. Nazwa kolekcji <code>myplugin<\/code> stanie si\u0119 prefiksem nazw <code>myplugin\/heart<\/code>, <code>myplugin\/star<\/code> i kolejnych ikon, a warto\u015b\u0107 <code>label<\/code> zobaczysz jako nag\u0142\u00f3wek sekcji w selektorze.<\/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: Rejestruje w\u0142asne ikony SVG dla WordPressa 7.1+.\n * Version:     1.0.0\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: Rejestruje w\u0142asne ikony SVG dla WordPressa 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\"> * 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>Aktywuj wtyczk\u0119 w \u201eWtyczki \u2192 Zainstalowane wtyczki\u201d. Sama kolekcja nie renderuje niczego, wi\u0119c przed dodaniem ikon nie zobaczysz \u017cadnej zmiany.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Zarejestruj ikony na dwa sposoby<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Ikona SVG wpisana bezpo\u015brednio w PHP<\/h3>\n\n\n\n<p>Serce mo\u017cesz przechowywa\u0107 bezpo\u015brednio w pliku PHP. To rozs\u0105dna opcja, gdy masz jedn\u0105 lub dwie ikony i nie chcesz tworzy\u0107 dodatkowych plik\u00f3w.<\/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>Hook <code>init<\/code> uruchamia t\u0119 funkcj\u0119 z priorytetem <code>20<\/code>, czyli p\u00f3\u017aniej ni\u017c rejestracj\u0119 kolekcji z domy\u015blnym priorytetem <code>10<\/code>. Nazwa <code>myplugin\/heart<\/code> ma format <code>kolekcja\/slug-ikony<\/code>, a <code>label<\/code> opisuje ikon\u0119 w selektorze. Atrybut <code>stroke=&quot;currentColor&quot;<\/code> ka\u017ce SVG przej\u0105\u0107 kolor otaczaj\u0105cego tekstu, zamiast wymusza\u0107 kolor w samym pliku.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Ikony z plik\u00f3w SVG<\/h3>\n\n\n\n<p>Gdy ikony le\u017c\u0105 na dysku, przeka\u017c do API <code>file_path<\/code>. Zapisz poni\u017csze pliki w katalogu <code>icons\/<\/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;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>Mechanizm rejestracji pozostaje taki sam, zmienia si\u0119 tylko <code>content<\/code> na <code>file_path<\/code>. WordPress odczyta plik wtedy, gdy b\u0119dzie potrzebowa\u0142 ikony. Po otwarciu bloku <code>core\/icon<\/code> w edytorze zobaczysz sekcj\u0119 \u201eMyPlugin\u201d z ikonami Heart, Star i Bookmark.<\/p>\n\n\n\n<p>Je\u017celi ikony nie ma w selektorze, najcz\u0119\u015bciej zosta\u0142a dodana przed utworzeniem kolekcji. Zostaw rejestracj\u0119 kolekcji przy domy\u015blnym priorytecie, a rejestracj\u0119 ikon ustaw p\u00f3\u017aniej, na przyk\u0142ad na <code>20<\/code>.<\/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\/8\/2026\/08\/custom-icons-added-tab-in-wordpress.webp\" alt=\"Sekcja w\u0142asnych ikon w selektorze bloku WordPressa\" class=\"wp-image-240\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/custom-icons-added-tab-in-wordpress.webp 1712w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/custom-icons-added-tab-in-wordpress-300x105.webp 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/custom-icons-added-tab-in-wordpress-1024x360.webp 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/custom-icons-added-tab-in-wordpress-768x270.webp 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/custom-icons-added-tab-in-wordpress-1536x540.webp 1536w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/custom-icons-added-tab-in-wordpress-400x141.webp 400w\" sizes=\"auto, (max-width: 1712px) 100vw, 1712px\" \/><figcaption class=\"wp-element-caption\">W\u0142asne ikony pojawiaj\u0105 si\u0119 jako osobna sekcja selektora. \u2014 <em>Forr\u00e1s: WPVibes<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. Rejestruj ca\u0142y katalog ikon automatycznie<\/h2>\n\n\n\n<p>R\u0119czne wywo\u0142anie <code>wp_register_icon()<\/code> dla kilkudziesi\u0119ciu ikon szybko staje si\u0119 uci\u0105\u017cliwe. Zamiast funkcji <code>myplugin_register_file_icons()<\/code> u\u017cyj p\u0119tli, kt\u00f3ra na ka\u017cdym \u017c\u0105daniu znajdzie wszystkie pliki SVG w katalogu.<\/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<p><code>glob( $icons_dir . '*.svg' )<\/code> zwraca wszystkie pliki <code>.svg<\/code> z katalogu. Nast\u0119pnie <code>basename( $file_path, '.svg' )<\/code> pobiera nazw\u0119 bez rozszerzenia, wi\u0119c <code>advanced-button.svg<\/code> zmieni si\u0119 w <code>advanced-button<\/code>.<\/p>\n\n\n\n<p>Wyra\u017cenie <code>ucwords( str_replace( '-', ' ', $slug ) )<\/code> tworzy czyteln\u0105 etykiet\u0119 dla selektora: z <code>advanced-button<\/code> powstaje \u201eAdvanced Button\u201d. P\u0119tla rejestruje ka\u017cd\u0105 ikon\u0119 w kolekcji <code>myplugin\/<\/code>. Dodaj nowy SVG do katalogu, od\u015bwie\u017c edytor i wybierz go bez zmiany kodu.<\/p>\n\n\n\n<p>Ten wzorzec obs\u0142uguje ca\u0142\u0105 bibliotek\u0119 ikon: serce nadal mo\u017ce pochodzi\u0107 z kodu wpisanego bezpo\u015brednio w PHP, a gwiazdka, zak\u0142adka i kolejne pliki trafiaj\u0105 do rejestru automatycznie. Sze\u015b\u0107 kluczowych linii wystarczy zar\u00f3wno dla trzech, jak i trzystu ikon.<\/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\/8\/2026\/08\/multiple-custom-icons-added-wordpress.webp\" alt=\"Wiele w\u0142asnych ikon SVG w selektorze WordPressa\" class=\"wp-image-241\" srcset=\"https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/multiple-custom-icons-added-wordpress.webp 1207w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/multiple-custom-icons-added-wordpress-300x85.webp 300w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/multiple-custom-icons-added-wordpress-1024x289.webp 1024w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/multiple-custom-icons-added-wordpress-768x217.webp 768w, https:\/\/helloblog.io\/app\/uploads\/sites\/8\/2026\/08\/multiple-custom-icons-added-wordpress-400x113.webp 400w\" sizes=\"auto, (max-width: 1207px) 100vw, 1207px\" \/><figcaption class=\"wp-element-caption\">Masowa rejestracja udost\u0119pnia wszystkie pliki z katalogu. \u2014 <em>Forr\u00e1s: WPVibes<\/em><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">4. U\u017cyj zarejestrowanych ikon w trzech miejscach<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">W bloku core\/icon i przez REST API<\/h3>\n\n\n\n<p>Selektor bloku <code>core\/icon<\/code> automatycznie pokazuje ka\u017cd\u0105 zarejestrowan\u0105 kolekcj\u0119. Wstaw ikon\u0119 z sekcji \u201eMyPlugin\u201d, a blok wyrenderuje j\u0105 na froncie bez dodatkowego kodu.<\/p>\n\n\n\n<p>Ikony s\u0105 tak\u017ce dost\u0119pne dla narz\u0119dzi zewn\u0119trznych, kt\u00f3re odczytuj\u0105 dane WordPressa, pod endpointem REST <code>\/wp-json\/wp\/v2\/icons<\/code>. Kolekcje zwraca towarzysz\u0105cy endpoint <code>\/wp-json\/wp\/v2\/icon-collections<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">W szablonach PHP przez wp_get_icon()<\/h3>\n\n\n\n<p>Funkcja <code>wp_get_icon()<\/code> zwraca SVG jako string, dlatego w najprostszym przypadku mo\u017cesz od razu u\u017cy\u0107 <code>echo<\/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>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>Drugi argument pozwala ustawi\u0107 rozmiar, klas\u0119 CSS oraz opis dost\u0119pno\u015bci.<\/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> ustawia atrybuty <code>width<\/code> i <code>height<\/code> SVG w pikselach.<\/li>\n\n\n<li><code>class<\/code> dodaje klas\u0119 CSS do elementu SVG.<\/li>\n\n\n<li><code>label<\/code> ustawia <code>aria-label<\/code> dla czytnik\u00f3w ekranu.<\/li>\n\n<\/ul>\n\n\n\n<p>Mo\u017cesz tak\u017ce udost\u0119pni\u0107 ikon\u0119 autorom tre\u015bci przez shortcode <code>myplugin_icon<\/code>. Kod sanitizuje nazw\u0119 ikony, klas\u0119 i rozmiar, a przy braku ikony zwraca pusty string.<\/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<p>Shortcode dzia\u0142a w ka\u017cdym wpisie, stronie i wid\u017cecie:<\/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 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 style=\"color:#E1E4E8\">[myplugin_icon name=\"heart\" text=\"Hello World\"]<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">[myplugin_icon name=\"star\" text=\"Featured post\" size=\"32\"]<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">[myplugin_icon name=\"bookmark\" text=\"Save for later\" size=\"20\"]<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Ikona pojawi si\u0119 obok tekstu w rozmiarze z atrybutu <code>size<\/code>. Dzi\u0119ki <code>currentColor<\/code> automatycznie przyjmie kolor tekstu otaczaj\u0105cego shortcode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Jako ikona w\u0142asnego bloku<\/h3>\n\n\n\n<p>W <code>register_block_type()<\/code> mo\u017cesz zast\u0105pi\u0107 domy\u015blny Dashicon nazw\u0105 zarejestrowanej ikony. Zamiast poni\u017cszego wpisu:<\/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', \/\/ U\u017cywa Dashiconu\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\">\/\/ U\u017cywa Dashiconu<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>u\u017cyj pe\u0142nej nazwy ikony z kolekcji:<\/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; 'myplugin\/star', \/\/ U\u017cywa zarejestrowanej ikony w\u0142asnej\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\"> 'myplugin\/star'<\/span><span style=\"color:#E1E4E8\">, <\/span><span style=\"color:#6A737D\">\/\/ U\u017cywa zarejestrowanej ikony w\u0142asnej<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Inserter blok\u00f3w poka\u017ce wtedy w\u0142asny SVG zamiast og\u00f3lnego Dashiconu. Dzia\u0142a to zar\u00f3wno dla blok\u00f3w rejestrowanych w JavaScripcie, jak i blok\u00f3w tworzonych wy\u0142\u0105cznie w PHP. Jedna rejestracja zasila wi\u0119c edytor, PHP i REST API \u2013 podobny model stosuje Abilities API.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">5. Dopasuj ikony przez CSS<\/h2>\n\n\n\n<p>Ikony wygl\u0105daj\u0105 naturalnie, gdy dziedzicz\u0105 kolor tekstu, skaluj\u0105 si\u0119 z otoczeniem i reaguj\u0105 na interakcj\u0119. Argument <code>class<\/code> z <code>wp_get_icon()<\/code> daje bezpo\u015bredni hook CSS, a style mo\u017cesz stosowa\u0107 tak\u017ce do ikon w edytorze, gdzie tego argumentu nie u\u017cywasz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Korzystaj z currentColor<\/h3>\n\n\n\n<p>W SVG u\u017cywaj <code>stroke=&quot;currentColor&quot;<\/code> albo <code>fill=&quot;currentColor&quot;<\/code>, a nie kolor\u00f3w zapisanych na sta\u0142e. SVG zachowuje si\u0119 wtedy jak tekst: wewn\u0105trz czerwonego tekstu b\u0119dzie czerwony, w ciemnym motywie ciemny, a w linku przyjmie kolor linku.<\/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;!-- Kolor zapisany na sta\u0142e: ikona zawsze b\u0119dzie czerwona --&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot;\n     stroke=&quot;#dc2626&quot;\n     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;!-- Kolor zapisany na sta\u0142e: ikona zawsze b\u0119dzie czerwona --><\/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>\n<span class=\"line\"><span style=\"color:#B392F0\">     stroke<\/span><span style=\"color:#E1E4E8\">=<\/span><span style=\"color:#9ECBFF\">\"#dc2626\"<\/span><\/span>\n<span class=\"line\"><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>Brak twardo zakodowanych kolor\u00f3w odr\u00f3\u017cnia ikon\u0119 pasuj\u0105c\u0105 do ka\u017cdego motywu od ikony, kt\u00f3ra gryzie si\u0119 z cz\u0119\u015bci\u0105 motyw\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Wymu\u015b kolor, gdy wymaga tego kontekst<\/h3>\n\n\n\n<p>Znak marki albo wska\u017anik statusu mo\u017ce wymaga\u0107 sta\u0142ego koloru niezale\u017cnie od otoczenia. Ustaw wtedy <code>color<\/code> na SVG przez klas\u0119 przekazan\u0105 w <code>wp_get_icon()<\/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>.featured-icon {\n    color: #f59e0b; \/* Bursztynowy niezale\u017cnie od koloru tekstu *\/\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\">\/* Bursztynowy niezale\u017cnie od koloru tekstu *\/<\/span><\/span>\n<span class=\"line\"><span style=\"color:#E1E4E8\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Poniewa\u017c SVG u\u017cywa <code>currentColor<\/code>, w\u0142a\u015bciwo\u015b\u0107 <code>color<\/code> przeniesie si\u0119 na jego <code>stroke<\/code> lub <code>fill<\/code>. Ikona b\u0119dzie bursztynowa nawet w ciemnym tek\u015bcie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rozmiar i stan hover<\/h3>\n\n\n\n<p>Dla ikon wyrenderowanych przez shortcode lub <code>wp_get_icon()<\/code> dok\u0142adny rozmiar w pikselach ustawisz argumentem <code>size<\/code>. Gdy chcesz sterowa\u0107 skal\u0105 z CSS albo doda\u0107 efekt hover, u\u017cyj regu\u0142 takich jak poni\u017cej.<\/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>U\u017cyj <code>size<\/code> w <code>wp_get_icon()<\/code>, gdy jednorazowo potrzebujesz konkretnego rozmiaru i nie warto tworzy\u0107 stylu CSS.<\/li>\n\n\n<li>U\u017cyj klas CSS \u2013 przekazanych przez <code>class<\/code> albo dodanych do elementu opakowuj\u0105cego \u2013 gdy ikona wyst\u0119puje w wielu miejscach, ma wygl\u0105da\u0107 sp\u00f3jnie lub styl zale\u017cy od stanu <code>hover<\/code>, <code>focus<\/code>, <code>active<\/code> czy kontekstu, na przyk\u0142ad linku albo nag\u0142\u00f3wka.<\/li>\n\n\n<li>W shortcode drobne zmiany w pojedynczym u\u017cyciu obs\u0142u\u017cy <code>size<\/code>, a sp\u00f3jny wygl\u0105d ca\u0142ej witryny zapewni\u0105 regu\u0142y dla <code>.myplugin-icon-inline svg<\/code>.<\/li>\n\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">6. Usu\u0144 ikon\u0119 lub ca\u0142\u0105 kolekcj\u0119<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Usu\u0144 pojedyncz\u0105 ikon\u0119<\/h3>\n\n\n\n<p>Podczas prac deweloperskich albo gdy aktualizacja wtyczki wycofuje ikon\u0119, wyrejestrujesz j\u0105 jednym wywo\u0142aniem:<\/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 zniknie z selektora przy nast\u0119pnym \u017c\u0105daniu. Wpisy, kt\u00f3re ju\u017c zawieraj\u0105 t\u0119 ikon\u0119 w bloku <code>core\/icon<\/code>, wyrenderuj\u0105 pust\u0105 zawarto\u015b\u0107, poniewa\u017c WordPress nie przepisuje tre\u015bci wpis\u00f3w.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Usu\u0144 kolekcj\u0119 przy dezaktywacji<\/h3>\n\n\n\n<p>Po dezaktywacji wtyczki jej ikony nie powinny pozosta\u0107 w selektorze. Wyrejestrowanie kolekcji usuwa wszystkie jej ikony naraz, wi\u0119c nie musisz iterowa\u0107 po ka\u017cdej z nich.<\/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\">7. Przygotuj SVG bezpieczny i przeno\u015bny<\/h2>\n\n\n\n<p>WordPress nie modyfikuje SVG podczas rejestracji. Udost\u0119pnia dok\u0142adnie string przekazany w <code>content<\/code> albo zawarto\u015b\u0107 pliku wskazanego przez <code>file_path<\/code>, dlatego przed wydaniem samodzielnie oczy\u015b\u0107 ikony z niepotrzebnych element\u00f3w.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li>Usu\u0144 twardo ustawione kolory <code>fill<\/code> i <code>stroke<\/code>; jako odwo\u0142anie do koloru stosuj <code>currentColor<\/code>.<\/li>\n\n\n<li>Usu\u0144 <code>width<\/code> i <code>height<\/code> z g\u0142\u00f3wnego elementu <code>&lt;svg&gt;<\/code>, ale zachowaj <code>viewBox<\/code>.<\/li>\n\n\n<li>Usu\u0144 bloki <code>&lt;style&gt;<\/code>, skrypty, zewn\u0119trzne referencje i wszystko, co nie jest potrzebne.<\/li>\n\n\n<li>Zachowaj <code>viewBox<\/code> oraz atrybuty opisuj\u0105ce struktur\u0119 grafiki.<\/li>\n\n<\/ul>\n\n\n\n<p>Je\u017celi wolisz rejestrowa\u0107 ikony z motywu, ten sam <code>wp_register_icon()<\/code> wywo\u0142aj w <code>functions.php<\/code>, a \u015bcie\u017ck\u0119 do pliku zbuduj przez <code>get_stylesheet_directory()<\/code>. Pami\u0119taj jednak, \u017ce po zmianie motywu te ikony znikn\u0105.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Najwa\u017cniejsze zasady<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n\n<li>Najpierw utw\u00f3rz kolekcj\u0119, dopiero potem dodawaj do niej ikony.<\/li>\n\n\n<li>Stosuj <code>content<\/code> dla SVG wpisanego bezpo\u015brednio w PHP, a <code>file_path<\/code> dla plik\u00f3w na dysku; oba warianty mog\u0105 wsp\u00f3\u0142istnie\u0107 w jednej kolekcji.<\/li>\n\n\n<li>Zamiast pojedynczych wywo\u0142a\u0144 dla ka\u017cdej ikony u\u017cyj <code>glob()<\/code> na katalogu SVG, aby skalowa\u0107 bibliotek\u0119 bez zmieniania kodu.<\/li>\n\n\n<li><code>wp_get_icon( $name, $args )<\/code> zwraca string SVG i przyjmuje mi\u0119dzy innymi <code>size<\/code>, <code>class<\/code>, <code>label<\/code> ustawiaj\u0105cy <code>aria-label<\/code> oraz <code>title<\/code>.<\/li>\n\n\n<li>Projektuj SVG z <code>currentColor<\/code>, aby ikona dopasowywa\u0142a si\u0119 do otoczenia.<\/li>\n\n\n<li>Jedna rejestracja udost\u0119pnia ikon\u0119 edytorowi, PHP i REST API.<\/li>\n\n<\/ol>\n\n\n\n<p>Pobierz kompletn\u0105 przyk\u0142adow\u0105 wtyczk\u0119 z ikonami SVG, plikiem README i pe\u0142nym wzorcem masowej rejestracji, a nast\u0119pnie przetestuj j\u0105 na WordPressie 7.1. Po wdro\u017ceniu zachowaj nazwy kolekcji specyficzne dla wtyczki \u2013 w\u0142a\u015bnie one chroni\u0105 bibliotek\u0119 ikon przed konfliktami z core WordPressa i innymi rozszerzeniami.<\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/webtechhardik\/wpviibes-custom-icons\">Kompletna przyk\u0142adowa wtyczka na GitHubie<\/a><\/p>\n\n\n<div class=\"references-section\">\n                <h2>Odniesienia \/ \u0179r\u00f3d\u0142a<\/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>W\u0142asne SVG w edytorze WordPressa nie musz\u0105 ju\u017c oznacza\u0107 JavaScriptu ani procesu build. Zobacz, jak raz zarejestrowa\u0107 kolekcj\u0119 ikon i u\u017cy\u0107 jej w blokach, PHP oraz REST API.<\/p>\n","protected":false},"author":26,"featured_media":239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[133,29,32,70,141],"class_list":["post-242","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-edytor-blokow","tag-php","tag-rest-api","tag-svg","tag-wordpress-7-1"],"_links":{"self":[{"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/posts\/242","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/comments?post=242"}],"version-history":[{"count":0,"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/posts\/242\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/media\/239"}],"wp:attachment":[{"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/media?parent=242"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/categories?post=242"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/helloblog.io\/pl\/wp-json\/wp\/v2\/tags?post=242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}