feat(iconify-icon): function to append custom style to all nodes

iconify-icon/icon/src/functions.ts

@@ -43,6 +43,7 @@ import type {
 	IconifyBrowserCacheType,
 	IconifyBrowserCacheFunctions,
 } from '@iconify/core/lib/browser-storage/functions';
+import { appendCustomStyle } from './render/style';
 
 /**
  * Interface for exported functions
@@ -52,7 +53,11 @@ export interface IconifyExportedFunctions
 		IconifyBuilderFunctions,
 		IconifyBrowserCacheFunctions,
 		IconifyAPIFunctions {
+	// API internal functions
 	_api: IconifyAPIInternalFunctions;
+
+	// Append custom style to all components
+	appendCustomStyle: (value: string) => void;
 }
 
 /**
@@ -164,6 +169,7 @@ export function exportFunctions(): IconifyExportedFunctions {
 		loadIcons,
 		loadIcon,
 		addAPIProvider,
+		appendCustomStyle,
 		_api,
 	};
 }

iconify-icon/icon/src/index.ts

@@ -50,6 +50,7 @@ import type {
 	IconifyIconHTMLElementClass,
 } from './component';
 import { exportFunctions } from './functions';
+import { appendCustomStyle } from './render/style';
 
 /**
  * Export used types
@@ -135,5 +136,6 @@ export {
 	loadIcons,
 	loadIcon,
 	addAPIProvider,
+	appendCustomStyle,
 	_api,
 };

iconify-icon/icon/src/render/style.ts

@@ -3,6 +3,20 @@
  */
 const nodeAttr = 'data-style';
 
+/**
+ * Custom style to add to each node
+ */
+let customStyle = '';
+
+/**
+ * Set custom style to add to all components
+ *
+ * Affects only components rendered after function call
+ */
+export function appendCustomStyle(style: string) {
+	customStyle = style;
+}
+
 /**
  * Add/update style node
  */
@@ -24,5 +38,6 @@ export function updateStyle(parent: Element | ShadowRoot, inline: boolean) {
 	styleNode.textContent =
 		':host{display:inline-block;vertical-align:' +
 		(inline ? '-0.125em' : '0') +
-		'}span,svg{display:block}';
+		'}span,svg{display:block}' +
+		customStyle;
 }