icon strategy.

Author: b4rtaz

designer/sass/designer-theme.scss

@@ -362,8 +362,7 @@
 	$emptyInputFillColor: #fff,
 	$emptyOutputFillColor: #000,
 	$emptyOutputStrokeWidth: 0,
-	$emptyOutputStrokeColor: #000,
-	$emptyIconFillColor: #b3b3b3
+	$emptyOutputStrokeColor: #000
 ) {
 	.sqd-theme-#{$theme} .sqd-step-launch-pad#{if($stepType != '', '.sqd-type-' + $stepType, '')} {
 		& > g > {
@@ -378,9 +377,6 @@
 				$outputStrokeColor: $emptyOutputStrokeColor
 			);
 		}
-		& > g > .sqd-launch-pad-empty-icon {
-			fill: $emptyIconFillColor;
-		}
 	}
 }
 

designer/src/core/icons.ts

@@ -31,7 +31,6 @@ export class Icons {
 	public static stop = 'M10.75 37.25V10.7H37.3v26.55Z';
 	public static folder =
 		'M7.05 40q-1.2 0-2.1-.925-.9-.925-.9-2.075V11q0-1.15.9-2.075Q5.85 8 7.05 8h14l3 3h17q1.15 0 2.075.925.925.925.925 2.075v23q0 1.15-.925 2.075Q42.2 40 41.05 40Z';
-	public static trigger = 'm12.93 46.3 8.93-16.75-17.87-2.23 26.8-25.68h4.47l-8.93 16.75 17.87 2.23L17.4 46.3h-4.47z';
 
 	public static appendPath(parent: SVGElement, pathClassName: string, d: string, size: number): SVGGElement {
 		const g = Dom.svg('g');

designer/src/workspace/launch-pad-step/launch-pad-step-component-view-configuration.ts

@@ -7,5 +7,4 @@ export interface LaunchPadStepComponentViewConfiguration {
 	emptyInputSize: number;
 	emptyOutputSize: number;
 	emptyIconSize: number;
-	emptyIconD: string;
 }

designer/src/workspace/launch-pad-step/launch-pad-step-component-view.ts

@@ -10,7 +10,7 @@ import {
 import { ComponentDom, InputView, JoinView, OutputView } from '../common-views';
 import { LaunchPadStepComponentViewConfiguration } from './launch-pad-step-component-view-configuration';
 import { ClickCommand, ClickDetails, Placeholder, StepComponentView } from '../component';
-import { Dom, getAbsolutePosition, Icons, Vector } from '../../core';
+import { Dom, getAbsolutePosition, Vector } from '../../core';
 import { StepComponent } from '../step-component';
 
 const COMPONENT_CLASS_NAME = 'launch-pad';
@@ -118,8 +118,19 @@ function createView(
 			outputView = OutputView.create(g, width / 2, height, cfg.emptyOutputSize);
 		}
 
-		const icon = Icons.appendPath(g, 'sqd-launch-pad-empty-icon', cfg.emptyIconD, cfg.emptyIconSize);
-		Dom.translate(icon, (width - cfg.emptyIconSize) / 2, (height - cfg.emptyIconSize) / 2);
+		if (cfg.emptyIconSize > 0) {
+			const iconUrl = viewContext.getStepIconUrl();
+			if (iconUrl) {
+				const icon = Dom.svg('image', {
+					href: iconUrl,
+					x: (width - cfg.emptyIconSize) / 2,
+					y: (height - cfg.emptyIconSize) / 2,
+					width: cfg.emptyIconSize,
+					height: cfg.emptyIconSize
+				});
+				g.appendChild(icon);
+			}
+		}
 
 		joinX = width / 2;
 	}

designer/src/workspace/launch-pad-step/launch-pad-step-extension.ts

@@ -3,7 +3,6 @@ import { StepExtension } from '../../designer-extension';
 import { LaunchPadStepExtensionConfiguration } from './launch-pad-step-extension-configuration';
 import { createLaunchPadStepComponentViewFactory } from './launch-pad-step-component-view';
 import { LaunchPadStepComponentViewConfiguration } from './launch-pad-step-component-view-configuration';
-import { Icons } from '../../core';
 
 const defaultViewConfiguration: LaunchPadStepComponentViewConfiguration = {
 	isRegionEnabled: true,
@@ -13,8 +12,7 @@ const defaultViewConfiguration: LaunchPadStepComponentViewConfiguration = {
 	emptyPaddingY: 20,
 	emptyInputSize: 14,
 	emptyOutputSize: 10,
-	emptyIconSize: 24,
-	emptyIconD: Icons.trigger
+	emptyIconSize: 24
 };
 
 export class LaunchPadStepExtension implements StepExtension<SequentialStep> {

examples/assets/triggers.js

@@ -56,6 +56,9 @@ const configuration = {
 
 	steps: {
 		iconUrlProvider: (_, type) => {
+			if (type === 'launchPad') {
+				return './assets/icon-trigger.svg';
+			}
 			return `./assets/icon-${type}.svg`;
 		},
 		isDuplicable(step) {