Skip to main content
All CollectionsCustomization
[PRO] How to Use Custom Vector Icons
[PRO] How to Use Custom Vector Icons
James avatar
Written by James
Updated over 6 months ago

While the plugin has an option to add vector icons, you might need to use a different one. Here are 2 solutions:

  • Use the ‘Image Markers’ instead and upload your icon as an image;

  • Create an addon plugin to add a custom vector icon to the list of available icons;

Using the Image Markers

You can use the Image Markers options to upload your custom icon as an image. If your icon has the SVG format, WordPress won’t allow you to upload it, but there are several plugins that help you workaround this limitations, for example, Safe SVG plugin.

This will allow you to simply use your SVG as an image marker. The downside of this approach is that you won’t be able to add different colours for your image, it will act as a static image.

[Pro] Use custom vector icons

Add custom vector

If you want to add a custom vector shape to the list of available icon markers, you’ll need to add a custom addon plugin that will add your icon to the list. This is not trivial because you won’t be adding the SVG marker, but rather the SVG path of the icon. This works better if your icon only has one path. You should extract the path of your icon and add it to the custom plugin, following this structure:

<?php
/**
* Plugin Name: Interactive Geo Maps - Custom Icon
* Description: Adds custom icons to Interactive Geo Maps plugin
* Version: 1.0
* Requires PHP: 7.0
* Author: Carlos Moreira
* Author URI: https://cmoreira.net/
*/

add_filter( 'igm_available_icons', 'igm_custom_marker_icon' );
function igm_custom_marker_icon( $list ) {

$list['custom_marker'] = [
'title' => 'Custom Marker',
'path' => 'm10,0.40566c-3.97385,0 -7.19575,3.2219 -7.19575,7.19575s5.99646,11.99292 7.19575,11.99292s7.19575,-8.01907 7.19575,-11.99292s-3.2219,-7.19575 -7.19575,-7.19575zm0,11.99292c-2.64564,0 -4.79717,-2.15273 -4.79717,-4.79717s2.15153,-4.79717 4.79717,-4.79717s4.79717,2.15273 4.79717,4.79717s-2.15153,4.79717 -4.79717,4.79717z',
];

return $list;
}

You can then install this as a normal plugin.

Did this answer your question?