Description

This SVG block allows you to display SVG images as inline HTML markup. You can choose an icon from the icon library with more than 3000 icons or you can upload or input your custom SVG images directly in the block’s setting.

Features

Accessibility ready with ‘img’ role, automatically generates title and description from settings.
Automatically sanitize SVG markup to make it safe and lightweight.
Include almost all settings to customize the SVG image.
Include a collection of common non-rectangular dividers.
An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.

Video tutorials

How to create an icon with custom styles using the icon library:

How to create a non-rectangular background section:

How to create icon buttons:

If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.

Please check out my other plugins if you’re interested:

Content Blocks Builder – A tool to create blocks, patterns or variations easily for your site directly on the Block Editor.
Block Enhancements – A plugin to add more useful features to blocks like icons, box-shadow, transform, hover style, etc.
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon to it.
Meta Field Block – A block to display a meta field or an ACF field as a block. It can also be used in the Query Loop block.
Counting Number Block – A block to display a number that has the number-counting effect.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data.
Better Youtube Embed Block – Embed Youtube videos without slowing down your site.

The plugin is developed using @wordpress/create-block.

Screenshots

Create an arrow background section
Add an icon and add styling to it
Create a curve background section
Use the responsive height feature
Use the SVG block as the image block
Block's settings
Block's placeholder

Blocks

This plugin provides 1 block.

SVG Block Display an SVG image as a block, which can be used for displaying icons, dividers...

Installation

Upload the plugin files to the /wp-content/plugins/svg-block directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress

FAQ

What problem does this plugin solve?

It helps to input inline SVG images as blocks easily and safely.

When should we use this plugin?

When you need to quickly input some icons. It bundles with more than 3000 icons from some popular icons library such as “WordPress”, “Dashicons”, “Ionicons”, and “Bootstrap icons”.
Or you need to use an SVG image as a divider, or separator. It also bundles with some common non-rectangular dividers like tilts, curves, triangles…
You can also use it as an image block but for SVG format only like images from undraw.co.

Why needs this plugin?

It’s super easy to use. It’s accessibility-ready. It comes with lots of additional features like responsive width and height, responsive spacing (padding and margin), responsive justify alignment, flip, revert, responsive border, border-radius, box-shadow builder…

Who needs this plugin?

Anyone can use this plugin.

Reviews

dj.cowan January 16, 2023 1 reply

Intuitive. Uncomplicated and simple to use — yet offers a vast array of options. A great addition to anyone's Wordpress 'no-code' toolbox. #developers-to-watch

jlop77 November 7, 2022 1 reply

I have tried many blocks, including those that come in block packages such as kadence, spectra, etc. And this one does what I want, better than the others.

hozefasmile October 14, 2022 1 reply

All required basic settings are available. It's better than "the icon block" in terms of big collection of icons already available in the library, insertion of custom SVG directly in the settings panel, and most important thing to handle any SVG as a section separator for making non-rectangular sections. And it's also ADA compliance. So a perfect choice when we need to add svg icons on a site.

diegosomar September 19, 2022 1 reply

Great plugin, tks!

Read all 3 reviews

Contributors & Developers

“SVG Block” is open source software. The following people have contributed to this plugin.

Phi Phan

Translate “SVG Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.1.11

Release Date – 11 March 2023

DEV – Update icon library
DEV – Add more clear help texts for the title and the description
DEV – Refactor for WP 6.2

1.1.10

Release Date – 09 February 2023

DEV – Add better support for the ‘Use as button’ feature

1.1.9

Release Date – 03 February 2023

DEV – Add SVGO GUI tool to the help text
DEV – Update SDK

1.1.8

Release Date – 27 October 2022

DEV – Allow clear color for the ColorGradientControl

1.1.7

Release Date – 04 October 2022

FIX – placeholder’s style is not loading in the site editor

1.1.6

Release Date – 03 October 2022

FIX – Focus on the search box on the first load

1.1.5

Release Date – 29 September 2022

REFACTOR – Redesign the placeholder for the block
DEV – Add divider icons to the icon library
REFACTOR – Using a data store for the icon library
FIX – Remove empty style variables and add deprecated for them

1.1.4

Release Date – 18 September 2022

FIX – Compatibility issue with the Gutenberg plugin
DEV – Refactor for localization

1.1.3

Release Date – 31 August 2022

DEV – Add stack context

1.1.2

Release Date – 30 August 2022

DEV – Change the default value for box-shadow
FIX – Reset icon lists by clicking on the reset search button

1.1.1

Release Date – 27 July 2022

FIX – The block makes the page in ‘dirty’ state

1.1.0

Release Date – 26 July 2022

DEV – Allow the ability to turn the block into a button with text & icon
DEV – Add ‘auto’ value to the options of width and height
DEV – Double click on the icon on the modal to insert the icon

1.0.13

Release Date – 01 July 2022

DEV – Add box-sizing as border-box by default

1.0.12

Release Date – 30 Jun 2022

FIX – Convert inline style to style object

1.0.11

Release Date – 19 Jun 2022

DEV – Update SDK
DEV – Refactor icon library modal
DEV – Allow uploading SVG files

1.0.10

Release Date – 12 May 2022

REFACTOR Update sdk

1.0.9

Release Date – 30 April 2022

FIX – Missing color slug

1.0.8

Release Date – 30 April 2022

DEV – Upgrade color format

1.0.7

Release Date – 28 April 2022

DEV – Add title to block registration in JS

1.0.6

Release Date – 21 April 2022

DEV – Optimize code for performance

1.0.5

Release Date – 19 April 2022

REFACTOR – Move the PanelColorGradientSettings out of PanelBody

1.0.4

Release Date – 15 April 2022

DEV – Icon library modal: focus the search box on open, press enter to insert icon

1.0.3

Release Date – 12 April 2022

FIX – Remove old cached icons due to storage limitation issue.

1.0.2

Release Date – 10 April 2022

DEV – Update icons pack

1.0.1

Release Date – 07 April 2022

FIX – Fix typo issue

1.0.0

Release Date – 05 April 2022