- \n
- File<\/a><\/li>\n\n\n\n
- SVG<\/a><\/li>\n\n\n\n
- Icon<\/a><\/li>\n\n\n\n
- Lottie<\/a><\/li>\n\n\n\n
- Placeholder<\/a><\/li>\n<\/ul>\n\n\n\n
![\"ska-blocks](\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-18.png\")
<\/div>\n<\/div>\n\n\n\nMode – File<\/h3>\n\n\n\n
Choose an image file from WordPress Media Library, custom URL, upload it or use the Featured image<\/a> (also works inside the core Query block).<\/p>\n\n\n\n
Mode – SVG<\/h3>\n\n\n\n
Render any SVG image by insert raw SVG content. <\/p>\n\n\n\n
Add Tailwind classes to the SVG by using normal block controls, Tailwind classes that are included in raw SVG content do not get detected.<\/p>\n\n\n\n
By default the Sanitize<\/strong> option is enabled, which does some basic sanitization so you don’t accidentally XSS yourself when pasting a large unchecked SVG, but it may cause issues with some SVGs so turn it off when you have checked that the contents are not malicious.<\/p>\n\n\n\n
Uncheck the Wrap<\/strong> option when you don’t want the
<svg><\/code> element to be wrapped in an additional element. The Tailwind classes (and other block classes and attributes) you have configured will then be injected directly into the SVG markup that is provided.<\/p>\n\n\n\nMode – Icon<\/h3>\n\n\n\n
By switching the Image block to “Icon” mode you can select a SVG icon from available icon packs.<\/p>\n\n\n\n
Once you have selected an icon you can also switch back to SVG mode to edit your chosen icon. By default the
width<\/code> andheight<\/code> attributes are removed from bundled SVG icons to make them fluid, how ever if that’s not desirable the values can be recovered in the SVG mode from thedata-svg-width<\/code> anddata-svg-height<\/code> attributes. There are instances where you need the dimensions, and instances where you don’t, depends on the use case and SVG itself. The Icon mode also always wraps the<svg><\/code> element, if that is not desirable you can switch back to SVG mode as well, which has an option to toggle that functionality.<\/p>\n\n\n\nska-icons plugin<\/h4>\n\n\n\n
By default ska-blocks<\/strong> doesn’t include any icons to keep the plugin size leaner. Download the ska-icons<\/strong> plugin<\/a> to add Heroicons<\/a> icons, Feather icons<\/a> and Font Awesome<\/a> icons.<\/p>\n\n\n\n\nska-icons.zip<\/span>\n\n\n\n
- SVG<\/a><\/li>\n\n\n\n