fix: uploaded svg icon not showing

src/block/carousel/style.js

@@ -107,6 +107,15 @@ const Styles = props => {
 				key="arrowIconColor"
 				hover="all"
 			/>
+			<BlockCss
+				{ ...propsToPass }
+				selector=".stk-block-carousel__button svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse)"
+				hoverSelector=".stk-block-carousel__button svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse):hover"
+				styleRule="fill"
+				attrName="arrowIconColor"
+				key="arrowIconColor"
+				hover="all"
+			/>
 			<BlockCss
 				{ ...propsToPass }
 				styleRule="--button-width"

src/block/icon-list-item/style.scss

@@ -16,6 +16,12 @@
 		border-width: 1px;
 		border-color: rgba(0, 0, 0, 0.4);
 	}
+
+	// Apply the color to the SVG path on the defintion
+	svg.ugb-custom-icon :is(g,path,rect,polygon,ellipse) {
+		fill: var(--stk-icon-list-marker-color) !important;
+		color: var(--stk-icon-list-marker-color) !important;
+	}
 }
 
 .stk-block-icon-list-item__content {

src/block/map/deprecated.js

@@ -1,12 +1,24 @@
+import { getIconOptions } from './util'
+
 import { Save } from './save'
 import { attributes } from './schema'
 
 import { withVersion } from '~stackable/higher-order'
+import { semverCompare } from '~stackable/util'
 import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor,
 } from '~stackable/block-components'
 
+import { addFilter } from '@wordpress/hooks'
+
+addFilter( 'stackable.map.util.applySVGAttributes', 'stackable/3.13.0', ( output, attribute, props ) => {
+	if ( semverCompare( props.version, '<', '3.13.0' ) ) {
+		return getIconOptions( attribute, true )
+	}
+	return output
+} )
+
 const deprecated = [
 	{
 		// Support the new shadow color.

src/block/map/save.js

@@ -29,6 +29,7 @@ import { i18n, version as VERSION } from 'stackable'
 import { __ } from '@wordpress/i18n'
 import { compose } from '@wordpress/compose'
 import { RawHTML } from '@wordpress/element'
+import { applyFilters } from '@wordpress/hooks'
 
 export const Save = props => {
 	const {
@@ -90,7 +91,14 @@ export const Save = props => {
 					<div
 						data-map-options={ JSON.stringify( mapOptions ) }
 						data-marker-options={ JSON.stringify( markerOptions ) }
-						data-icon-options={ JSON.stringify( getIconOptions( attributes ) ) }
+						data-icon-options={ JSON.stringify(
+							applyFilters(
+								'stackable.map.util.applySVGAttributes',
+								getIconOptions( attributes, false ),
+								attributes,
+								props
+							)
+						) }
 						className="stk-block-map__canvas"
 					/>
 				)

src/block/map/util.js

@@ -38,7 +38,7 @@ export const getMapStyles = ( { mapStyle, customMapStyle } ) => {
 	return styleJSON
 }
 
-export const getIconOptions = attributes => {
+export const getIconOptions = ( attributes, isDeprecated ) => {
 	const {
 		icon,
 		iconColor1,
@@ -55,9 +55,19 @@ export const getIconOptions = attributes => {
 		// If we can't use the generated SVG element for any reason we
 		// display the default icon.
 		return null
-	 }
+	}
+
+	if ( isDeprecated ) {
+		// Deprecate this since sets the fill to the default color black, even when no color is selected.
+		svgEl.firstElementChild.setAttribute( 'fill', 'currentColor' )
+	} else if ( iconColor1 ) {
+		// Apply the fill directly to the SVG shapes
+		const svgShapes = svgEl.querySelectorAll( 'g,path,rect,polygon,ellipse' )
+		svgShapes.forEach( svgShape => {
+			svgShape.setAttribute( 'style', `fill: ${ iconColor1 }` )
+		} )
+	}
 
-	svgEl.firstElementChild.setAttribute( 'fill', 'currentColor' )
 	const svgIconSize = iconSize ? parseInt( iconSize, 10 ) : DEFAULT_ICON_SIZE
 	svgEl.setAttribute( 'height', svgIconSize )
 	svgEl.setAttribute( 'width', svgIconSize )

src/components/icon-search-popover/index.js

@@ -71,6 +71,10 @@ export const cleanSvgString = svgString => {
 		newSvg = newSvg.replace( /\s*<g\s*>([\s\S]*?)<\/g>\s*/gm, '$1' )
 	}
 
+	// Remove width and height attribute so that we can control the size (default to 100%)
+	newSvg = newSvg.replace( /<svg([^>]*)width=(["'])[^"']*["']([^>]*)/g, '<svg$1$3' )
+		.replace( /<svg([^>]*)height=(["'])[^"']*["']([^>]*)/g, '<svg$1$3' )
+
 	return newSvg
 }