SVG Block for Dashicons by RotiStudio

开发者	rtomo
更新时间	2026年2月21日 03:51
捐献地址:	去捐款
PHP版本:	7.4 及以上
WordPress版本:	6.9
版权:	GPLv2 or later
版权网址:	版权信息

下载

1.2.0 1.3.0

详情介绍:

Hungarian: Magyar nyelvű bővítmény leírás 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. 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. Why is this plugin beneficial?

Easily use Dashicons on the frontend
Choose from 334 icons
Core Web Vitals friendly
No icon font or CSS file loading
No images or image files
No overengineered or unnecessary features
No accessibility-hindering CSS pseudo-elements
Icons scale to any size and stay sharp
SVG icons appear as clean inline code in the content
Secure and validated Icons the way Gutenberg expects The Dashicons set is finally available as a native block element. No HTML hacks, no font dependency — just clean inline SVG markup directly from the editor.

Faster loading, more stable layout Instead of downloading and rendering icon fonts, icons appear instantly in the HTML. No FOIT, no CSS pseudo-elements, no CLS risk — better Core Web Vitals and predictable rendering. Safe SVG usage No SVG uploads, no sanitizer, no risky pipeline. The plugin exclusively uses the official SVG sources of WordPress Dashicons — deterministic, verified markup. JS-free, cache-friendly No icon library JavaScript, no sprite loader, no runtime processing. SVG is static HTML — ideal for SSR, static caching, and block themes. Editor experience for users The Dashicons picker block uses a fast, familiar UI. Simple and consistent to use. Content creators choose icons — not edit code. In your own language The plugin can be easily and quickly translated on the official translate.wordpress.org platform, making it even easier to use in your own language. Do you have other plugins? Yes, check my plugins website: rotistudio.hu Where can we learn more about your work? Check my personal website there: rottenbacher.hu

安装:

Upload the plugin folder to the /wp-content/plugins/svg-block-for-dashicon-rotistudio directory.
Activate the plugin through the 'Plugins' menu in WordPress.

屏幕截图:

升级注意事项:

1.3.0

Fix 100% border-radius.
Fix the original SVG paths for the 4 admin-site icons.
Increased accessibility.
Add fit-content width and height style value.
Add gradient background color support.
Add link support.

1.2.0

Change plugin name, slug and textdomain.
WordPress Coding Standards (WPCS) and ESLint fixes.
Add block preview.

1.1.0

Full internationalization (i18n) support with Hungarian translation included.
Minor code changes.

1.0.0

Initial release.

常见问题:

How can I use?

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.

How many icons are included in the plugin?

The plugin includes 334 Dashicons in SVG code format. (No files, just paths.)

How compatible is inline SVG icon usage?

Icons are rendered using SVG path markup, which has long been supported by all modern browsers.

Does it work with existing themes?

Yes. Styles are applied inline, so it works with all block themes and most classic themes as well.

Is it lightweight and fast?

Yes. The plugin code is minimal, fast, and performance-optimized. Only the selected SVG icon is rendered on the frontend and in the editor.

Can I customize the icons?

Yes. You can customize icon size, color, background color, border, border radius, padding, and margin.

Why do I see a color contrast warning in the block editor?

The WordPress block editor may show a contrast warning when comparing the icon’s text color to the page background. This warning can be safely ignored because it checks an incorrect color combination. What the editor checks: Text color vs. page background color\ What matters on the frontend: Text color vs. icon background color (applied to the SVG element) 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.

Is the plugin translated into other languages?

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.

Compatible with Classic Editor?

Unfortunately no, this is specifically designed for the Gutenberg editor.

更新日志: