fix (svg icons): uploaded svg icon not showing (#3179)

* fix: add prio for fill * fix: add prio for fill of arrow in carousel * fix: add prio by using fill in path in map block * fix: remove custom width and height to allow stackable to adjust it * fix: add !important to fill and color to have prio over inline * fix: only remove width/height in SVG; support for double and single qoutes * fix: add support for common svg shapes * fix: add support for common svg shapes in carousel * fix: add support for common svg shapes in map * fix: remove manual setting of fill (default to black if no color is selected); only apply SVG shapes fill if color exist * fix: add prio for fill * fix: add prio for fill of arrow in carousel * fix: add prio by using fill in path in map block * fix: remove custom width and height to allow stackable to adjust it * fix: add !important to fill and color to have prio over inline * fix: only remove width/height in SVG; support for double and single qoutes * fix: add support for common svg shapes * fix: add support for common svg shapes in carousel * fix: add support for common svg shapes in map * fix: remove manual setting of fill (default to black if no color is selected); only apply SVG shapes fill if color exist * fix: deprecation * fix: remove deprecated code * fix: handle deprecation in depracated.js
gambitph · Jun 24, 2024 · 89baa41 · 89baa41
1 parent 11b33ae
commit 89baa41
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 3 deletions.
diff --git a/src/block/carousel/style.js b/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"

diff --git a/src/block/icon-list-item/style.scss b/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 {

diff --git a/src/block/map/deprecated.js b/src/block/map/deprecated.js
@@ -1,12 +1,32 @@
+import { getIconOptions } from './util'
+
 import { Save } from './save'
 import { attributes } from './schema'
 
 import { withVersion } from '~stackable/higher-order'
+import { semverCompare, createElementFromHTMLString } from '~stackable/util'
 import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity,
 	deprecateBlockShadowColor, deprecateContainerShadowColor,
 } from '~stackable/block-components'
 
+import { addFilter } from '@wordpress/hooks'
+
+const getIconOptions_3_13_0 = attributes => {
+	const newAttributes = { ...attributes }
+	const svgEl = createElementFromHTMLString( attributes.icon )
+	svgEl.firstElementChild.setAttribute( 'fill', 'currentColor' )
+	newAttributes.icon = svgEl.outerHTML
+	return getIconOptions( newAttributes )
+}
+
+addFilter( 'stackable.map.icon-options', 'stackable/3.13.0', ( output, attribute, props ) => {
+	if ( semverCompare( props.version, '<', '3.13.0' ) ) {
+		return getIconOptions_3_13_0( attribute )
+	}
+	return output
+} )
+
 const deprecated = [
 	{
 		// Support the new shadow color.

diff --git a/src/block/map/save.js b/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.icon-options',
+								getIconOptions( attributes ),
+								attributes,
+								props
+							)
+						) }
 						className="stk-block-map__canvas"
 					/>
 				)

diff --git a/src/block/map/util.js b/src/block/map/util.js
@@ -55,9 +55,17 @@ export const getIconOptions = attributes => {
 		// If we can't use the generated SVG element for any reason we
 		// display the default icon.
 		return null
-	 }
+	}
+
+	// Check if svgEl has a fill attribute
+	if ( iconColor1 && svgEl.firstElementChild.getAttribute( 'fill' ) !== 'currentColor' ) {
+		// 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 )

diff --git a/src/components/icon-search-popover/index.js b/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
 }