{"id":282279,"date":"2026-02-18T22:02:27","date_gmt":"2026-02-18T22:02:27","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/dashicons-svg-block\/"},"modified":"2026-05-21T16:45:53","modified_gmt":"2026-05-21T16:45:53","slug":"svg-block-for-dashicon-rotistudio","status":"publish","type":"plugin","link":"https:\/\/de-ch.wordpress.org\/plugins\/svg-block-for-dashicon-rotistudio\/","author":10748236,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.3.1","stable_tag":"1.3.1","tested":"7.0","requires":"5.9","requires_php":"7.4","requires_plugins":null,"header_name":"SVG Block for Dashicons","header_author":"RotiStudio - Tamas Rottenbacher","header_description":"Adds a Gutenberg block to insert WordPress 334 Dashicons as inline SVG. Fast and clean.","assets_banners_color":"a2b5aa","last_updated":"2026-05-21 16:45:53","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/rotistudio.hu\/kapcsolat\/","header_plugin_uri":"https:\/\/rotistudio.hu\/bovitmenyek\/dashicon-svg-block\/","header_author_uri":"https:\/\/rotistudio.hu","rating":0,"author_block_rating":0,"active_installs":0,"downloads":449,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.2.0":{"tag":"1.2.0","author":"rtomo","date":"2026-02-19 02:13:21"},"1.3.0":{"tag":"1.3.0","author":"rtomo","date":"2026-02-21 00:26:22"},"1.3.1":{"tag":"1.3.1","author":"rtomo","date":"2026-05-21 16:45:53"}},"upgrade_notice":{"1.3.1":"<ul>\n<li>WordPress 7.0 compatibility check<\/li>\n<li>PHP 8.5 compatibility check<\/li>\n<\/ul>","1.3.0":"<ul>\n<li>Fix 100% border-radius.<\/li>\n<li>Fix the original SVG paths for the 4 admin-site icons.<\/li>\n<li>Increased accessibility.<\/li>\n<li>Add fit-content width and height style value.<\/li>\n<li>Add gradient background color support.<\/li>\n<li>Add link support.<\/li>\n<\/ul>","1.2.0":"<ul>\n<li>Change plugin name, slug and textdomain.<\/li>\n<li>WordPress Coding Standards (WPCS) and ESLint fixes.<\/li>\n<li>Add block preview.<\/li>\n<\/ul>","1.1.0":"<ul>\n<li>Full internationalization (i18n) support with Hungarian translation included.<\/li>\n<li>Minor code changes.<\/li>\n<\/ul>","1.0.0":"<ul>\n<li>Initial release.<\/li>\n<\/ul>"},"ratings":[],"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":3464654,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":3464654,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3464698,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":3464698,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":3464698,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250},"banner.svg":{"filename":"banner.svg","revision":3464698,"resolution":false,"location":"assets","locale":false}},"assets_blueprints":{},"all_blocks":{"rsdsb\/dashicon":{"name":"rsdsb\/dashicon","title":"SVG block for Dashicon"}},"tagged_versions":["1.2.0","1.3.0","1.3.1"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3464654,"resolution":"1","location":"assets","locale":"","width":1440,"height":755},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3466064,"resolution":"2","location":"assets","locale":"","width":1440,"height":755},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3464654,"resolution":"3","location":"assets","locale":"","width":1440,"height":755}},"screenshots":{"1":"Rendered inline SVG icon on the frontend.","2":"Dashicons SVG block selector in the Gutenberg editor.","3":"Customization options: color, size, background, spacing, and border."}},"plugin_section":[],"plugin_tags":[1220,15956,148076,498,2904],"plugin_category":[50],"plugin_contributors":[258933,256146],"plugin_business_model":[],"class_list":["post-282279","plugin","type-plugin","status-publish","hentry","plugin_tags-block","plugin_tags-dashicons","plugin_tags-gutenberg","plugin_tags-icons","plugin_tags-svg","plugin_category-media","plugin_contributors-rotistudio","plugin_contributors-rtomo","plugin_committers-rotistudio","plugin_committers-rtomo","plugin_support_reps-rotistudio"],"banners":{"banner":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/banner-772x250.jpg?rev=3464698","banner_2x":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/banner-1544x500.jpg?rev=3464698","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/icon.svg?rev=3464698","icon":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/icon.svg?rev=3464698","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/screenshot-1.png?rev=3464654","caption":"Rendered inline SVG icon on the frontend."},{"src":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/screenshot-2.png?rev=3466064","caption":"Dashicons SVG block selector in the Gutenberg editor."},{"src":"https:\/\/ps.w.org\/svg-block-for-dashicon-rotistudio\/assets\/screenshot-3.png?rev=3464654","caption":"Customization options: color, size, background, spacing, and border."}],"raw_content":"<!--section=description-->\n<p>Hungarian: <a href=\"https:\/\/rotistudio.hu\/bovitmenyek\/dashicon-svg-block\/\">Magyar nyelv\u0171 b\u0151v\u00edtm\u00e9ny le\u00edr\u00e1s<\/a><\/p>\n\n<p>This plugin adds a Gutenberg block that lets you pick a Dashicon and render it on the frontend as an inline SVG. The icons are lightweight, scalable, and fully customizable, making them ideal for modern WordPress block-based sites.<\/p>\n\n<p>The plugin does not rely on the traditional icon rendering approach (CSS-based icon fonts with pseudo-elements and large icons.css files). Instead, it uses a far more optimized yet fully compatible method. There is no separate CSS icon font file, and not a single extra asset is loaded on the frontend. Only the pure SVG icon markup is embedded and rendered by the browser. There are no image files and no CSS files involved, while icons remain perfectly sharp at any size.<\/p>\n\n<p><strong>Why is this plugin beneficial?<\/strong>\n- Easily use Dashicons on the frontend\n- Choose from 334 icons\n- Core Web Vitals friendly\n- No icon font or CSS file loading\n- No images or image files\n- No overengineered or unnecessary features\n- No accessibility-hindering CSS pseudo-elements\n- Icons scale to any size and stay sharp\n- SVG icons appear as clean inline code in the content\n- Secure and validated<\/p>\n\n<p><strong>Icons the way Gutenberg expects<\/strong>\nThe Dashicons set is finally available as a native block element. No HTML hacks, no font dependency \u2014 just clean inline SVG markup directly from the editor.<\/p>\n\n<p><strong>Faster loading, more stable layout<\/strong>\nInstead of downloading and rendering icon fonts, icons appear instantly in the HTML. No FOIT, no CSS pseudo-elements, no CLS risk \u2014 better Core Web Vitals and predictable rendering.<\/p>\n\n<p><strong>Safe SVG usage<\/strong>\nNo SVG uploads, no sanitizer, no risky pipeline. The plugin exclusively uses the official SVG sources of WordPress Dashicons \u2014 deterministic, verified markup.<\/p>\n\n<p><strong>JS-free, cache-friendly<\/strong>\nNo icon library JavaScript, no sprite loader, no runtime processing. SVG is static HTML \u2014 ideal for SSR, static caching, and block themes.<\/p>\n\n<p><strong>Editor experience for users<\/strong>\nThe Dashicons picker block uses a fast, familiar UI. Simple and consistent to use. Content creators choose icons \u2014 not edit code.<\/p>\n\n<p><strong>In your own language<\/strong>\nThe plugin can be easily and quickly translated on the official translate.wordpress.org platform, making it even easier to use in your own language.<\/p>\n\n<p>Do you have other plugins? Yes, check my plugins website: <a href=\"https:\/\/rotistudio.com\/\">rotistudio.com<\/a>\nWhere can we learn more about your work? Check my personal website there: <a href=\"https:\/\/rottenbacher.hu\/\">rottenbacher.hu<\/a><\/p>\n\n<!--section=installation-->\n<ol>\n<li>Upload the plugin folder to the <code>\/wp-content\/plugins\/svg-block-for-dashicon-rotistudio<\/code> directory.<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20can%20i%20use%3F\"><h3>How can I use?<\/h3><\/dt>\n<dd><p>First install and activate it, then in the editor (Gutenberg) if you start typing \/svg in a paragraph it will output it. Or you will find it in the editor when adding blocks if you search for SVG there.<\/p><\/dd>\n<dt id=\"how%20many%20icons%20are%20included%20in%20the%20plugin%3F\"><h3>How many icons are included in the plugin?<\/h3><\/dt>\n<dd><p>The plugin includes 334 Dashicons in SVG code format. (No files, just paths.)<\/p><\/dd>\n<dt id=\"how%20compatible%20is%20inline%20svg%20icon%20usage%3F\"><h3>How compatible is inline SVG icon usage?<\/h3><\/dt>\n<dd><p>Icons are rendered using SVG path markup, which has long been supported by all modern browsers.<\/p><\/dd>\n<dt id=\"does%20it%20work%20with%20existing%20themes%3F\"><h3>Does it work with existing themes?<\/h3><\/dt>\n<dd><p>Yes. Styles are applied inline, so it works with all block themes and most classic themes as well.<\/p><\/dd>\n<dt id=\"is%20it%20lightweight%20and%20fast%3F\"><h3>Is it lightweight and fast?<\/h3><\/dt>\n<dd><p>Yes. The plugin code is minimal, fast, and performance-optimized. Only the selected SVG icon is rendered on the frontend and in the editor.<\/p><\/dd>\n<dt id=\"can%20i%20customize%20the%20icons%3F\"><h3>Can I customize the icons?<\/h3><\/dt>\n<dd><p>Yes. You can customize icon size, color, background color, border, border radius, padding, and margin.<\/p><\/dd>\n<dt id=\"why%20do%20i%20see%20a%20color%20contrast%20warning%20in%20the%20block%20editor%3F\"><h3>Why do I see a color contrast warning in the block editor?<\/h3><\/dt>\n<dd><p>The WordPress block editor may show a contrast warning when comparing the icon\u2019s text color to the page background. This warning can be safely ignored because it checks an incorrect color combination.<\/p>\n\n<p><strong>What the editor checks:<\/strong> Text color vs. page background color<br \/>\n<strong>What matters on the frontend:<\/strong> Text color vs. icon background color (applied to the SVG element)<\/p>\n\n<p>On the frontend, all colors (text, background, padding, margin) are correctly applied directly to the SVG element, ensuring proper contrast ratios where they actually matter.<\/p><\/dd>\n<dt id=\"is%20the%20plugin%20translated%20into%20other%20languages%3F\"><h3>Is the plugin translated into other languages?<\/h3><\/dt>\n<dd><p>Yes. The plugin is fully internationalized and ready for translation. Hungarian translation is included by default. Translation files are automatically loaded by WordPress 4.6+, making the plugin WordPress.org Plugin Check compliant.<\/p><\/dd>\n<dt id=\"compatible%20with%20classic%20editor%3F\"><h3>Compatible with Classic Editor?<\/h3><\/dt>\n<dd><p>Unfortunately no, this is specifically designed for the Gutenberg editor.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>1.3.1<\/h4>\n\n<ul>\n<li>WordPress 7.0 compatibility check<\/li>\n<li>PHP 8.5 compatibility check<\/li>\n<\/ul>\n\n<h4>1.3.0<\/h4>\n\n<ul>\n<li>Fix 100% border-radius.<\/li>\n<li>Fix the original SVG paths for the 4 admin-site icons.<\/li>\n<li>Increased accessibility.<\/li>\n<li>Add fit-content width and height style value.<\/li>\n<li>Add gradient background color support.<\/li>\n<li>Add link support.<\/li>\n<\/ul>\n\n<h4>1.2.0<\/h4>\n\n<ul>\n<li>Change plugin name, slug and textdomain.<\/li>\n<li>WordPress Coding Standards (WPCS) and ESLint fixes.<\/li>\n<li>Add block preview.<\/li>\n<\/ul>\n\n<h4>1.1.0<\/h4>\n\n<ul>\n<li>Full internationalization (i18n) support with Hungarian translation included.<\/li>\n<li>WordPress.org Plugin Check compliant (automatic translation loading for WordPress 4.6+).<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Adds a native Gutenberg block for inserting 334 WordPress Dashicons as inline SVG \u2014 fast, lightweight, and fully customizable.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/282279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=282279"}],"author":[{"embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/rtomo"}],"wp:attachment":[{"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=282279"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=282279"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=282279"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=282279"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=282279"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/de-ch.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=282279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}