chore: add functions to generate css as content, add extra rules option for css functions

packages/utils/src/css/common.ts

@@ -2,10 +2,14 @@ import type { IconifyIcon } from '@iconify/types';
 import { iconToHTML } from '../svg/html';
 import { calculateSize } from '../svg/size';
 import { svgToURL } from '../svg/url';
-import type { IconCSSCommonCodeOptions, IconCSSItemOptions } from './types';
+import type {
+	IconCSSCommonCodeOptions,
+	IconCSSItemOptions,
+	IconContentItemOptions,
+} from './types';
 
 /**
- * Generates common CSS rules for multiple icons
+ * Generates common CSS rules for multiple icons, rendered as background/mask
  */
 export function getCommonCSSRules(
 	options: IconCSSCommonCodeOptions
@@ -45,7 +49,7 @@ export function getCommonCSSRules(
 }
 
 /**
- * Generate CSS rules for one icon
+ * Generate CSS rules for one icon, rendered as background/mask
  *
  * This function excludes common rules
  */
@@ -91,3 +95,29 @@ export function generateItemCSSRules(
 
 	return result;
 }
+
+/**
+ * Generate content for one icon, rendered as content of pseudo-selector
+ */
+export function generateItemContent(
+	icon: Required<IconifyIcon>,
+	options: IconContentItemOptions
+): string {
+	// Get dimensions
+	const height = options.height;
+	const width =
+		options.width ?? calculateSize(height, icon.width / icon.height);
+
+	// Get SVG
+	const svg = iconToHTML(
+		icon.body.replace(/currentColor/g, options.color || 'black'),
+		{
+			viewBox: `${icon.left} ${icon.top} ${icon.width} ${icon.height}`,
+			width: width.toString(),
+			height: height.toString(),
+		}
+	);
+
+	// Generate URL
+	return svgToURL(svg);
+}

packages/utils/src/css/icon.ts

@@ -1,11 +1,15 @@
 import type { IconifyIcon } from '@iconify/types';
 import { defaultIconProps } from '../icon/defaults';
-import { generateItemCSSRules, getCommonCSSRules } from './common';
+import {
+	generateItemCSSRules,
+	generateItemContent,
+	getCommonCSSRules,
+} from './common';
 import { formatCSS } from './format';
-import type { IconCSSIconOptions } from './types';
+import type { IconCSSIconOptions, IconContentIconOptions } from './types';
 
 /**
- * Get CSS for icon
+ * Get CSS for icon, rendered as background or mask
  */
 export function getIconCSS(
 	icon: IconifyIcon,
@@ -38,10 +42,12 @@ export function getIconCSS(
 	}
 
 	const rules = {
+		...options.rules,
 		...getCommonCSSRules(newOptions),
 		...generateItemCSSRules({ ...defaultIconProps, ...icon }, newOptions),
 	};
 
+	// Get selector and format CSS
 	const selector = options.iconSelector || '.icon';
 	return formatCSS(
 		[
@@ -53,3 +59,32 @@ export function getIconCSS(
 		newOptions.format
 	);
 }
+
+/**
+ * Get CSS for icon, rendered as content
+ */
+export function getIconContentCSS(
+	icon: IconifyIcon,
+	options: IconContentIconOptions
+): string {
+	// Get content
+	const content = generateItemContent(
+		{ ...defaultIconProps, ...icon },
+		options
+	);
+
+	// Get selector and format CSS
+	const selector = options.iconSelector || '.icon::after';
+	return formatCSS(
+		[
+			{
+				selector,
+				rules: {
+					...options.rules,
+					content,
+				},
+			},
+		],
+		options.format
+	);
+}

packages/utils/src/css/icons.ts

@@ -1,17 +1,23 @@
 import type { IconifyJSON } from '@iconify/types';
 import { getIconData } from '../icon-set/get-icon';
 import { defaultIconProps } from '../icon/defaults';
-import { generateItemCSSRules, getCommonCSSRules } from './common';
+import {
+	generateItemCSSRules,
+	generateItemContent,
+	getCommonCSSRules,
+} from './common';
 import { formatCSS } from './format';
 import type {
 	CSSUnformattedItem,
 	IconCSSIconSetOptions,
 	IconCSSSelectorOptions,
+	IconContentIconSetOptions,
 } from './types';
 
 // Default selectors
 const commonSelector = '.icon--{prefix}';
 const iconSelector = '.icon--{prefix}--{name}';
+const contentSelector = '.icon--{prefix}--{name}::after';
 const defaultSelectors: IconCSSSelectorOptions = {
 	commonSelector,
 	iconSelector,
@@ -86,7 +92,10 @@ export function getIconsCSSData(
 	);
 
 	// Get common CSS
-	const commonRules = getCommonCSSRules(newOptions);
+	const commonRules = {
+		...options.rules,
+		...getCommonCSSRules(newOptions),
+	};
 	const hasCommonRules = commonSelector && commonSelector !== iconSelector;
 	const commonSelectors: Set<string> = new Set();
 	if (hasCommonRules) {
@@ -106,7 +115,10 @@ export function getIconsCSSData(
 		}
 
 		const rules = generateItemCSSRules(
-			{ ...defaultIconProps, ...iconData },
+			{
+				...defaultIconProps,
+				...iconData,
+			},
 			newOptions
 		);
 
@@ -155,7 +167,7 @@ export function getIconsCSSData(
 }
 
 /**
- * Get CSS for icon
+ * Get CSS for icons as background/mask
  */
 export function getIconsCSS(
 	iconSet: IconifyJSON,
@@ -184,3 +196,48 @@ export function getIconsCSS(
 		(errors.length ? '\n' + errors.join('\n') + '\n' : '')
 	);
 }
+
+/**
+ * Get CSS for icons as content
+ */
+export function getIconsContentCSS(
+	iconSet: IconifyJSON,
+	names: string[],
+	options: IconContentIconSetOptions
+): string {
+	const errors: string[] = [];
+	const css: CSSUnformattedItem[] = [];
+	const iconSelectorWithPrefix = (
+		options.iconSelector ?? contentSelector
+	).replace(/{prefix}/g, iconSet.prefix);
+
+	// Parse all icons
+	for (let i = 0; i < names.length; i++) {
+		const name = names[i];
+		const iconData = getIconData(iconSet, name);
+		if (!iconData) {
+			errors.push('/* Could not find icon: ' + name + ' */');
+			continue;
+		}
+
+		const content = generateItemContent(
+			{ ...defaultIconProps, ...iconData },
+			options
+		);
+		const selector = iconSelectorWithPrefix.replace(/{name}/g, name);
+
+		css.push({
+			selector,
+			rules: {
+				...options.rules,
+				content,
+			},
+		});
+	}
+
+	// Format
+	return (
+		formatCSS(css, options.format) +
+		(errors.length ? '\n' + errors.join('\n') + '\n' : '')
+	);
+}

packages/utils/src/css/types.ts

@@ -1,3 +1,9 @@
+/*
+ *
+ * Options for rendering icons as mask or background
+ *
+ */
+
 /**
  * Icon mode
  */
@@ -43,6 +49,9 @@ export interface IconCSSSharedOptions {
 
 	// Set color for monotone icons
 	color?: string;
+
+	// Custom rules
+	rules?: Record<string, string>;
 }
 
 /**
@@ -73,6 +82,48 @@ export interface IconCSSItemOptions
 	//
 }
 
+/*
+ *
+ * Options for rendering icons as content
+ *
+ */
+
+/**
+ * Selector for icon
+ */
+export interface IconContentIconSelectorOptions {
+	// Selector used for icon
+	iconSelector?: string;
+}
+
+/**
+ * Options common for both multiple icons and single icon
+ */
+export interface IconContentSharedOptions {
+	// Icon height
+	height: number;
+
+	// Icon width. If not set, it will be calculated using icon's width/height ratio
+	width?: number;
+
+	// Set color for monotone icons
+	color?: string;
+
+	// Custom rules
+	rules?: Record<string, string>;
+}
+
+/**
+ * Options for generating data for one icon
+ */
+export type IconContentItemOptions = IconContentSharedOptions;
+
+/*
+ *
+ * Options for formatting CSS
+ *
+ */
+
 /**
  * Formatting modes. Same as in SASS
  */
@@ -94,8 +145,14 @@ export interface IconCSSFormatOptions {
 	format?: CSSFormatMode;
 }
 
+/*
+ *
+ * Combined options for functions that render and format code
+ *
+ */
+
 /**
- * Options for generating data for one icon
+ * Options for generating data for one icon as background/mask
  */
 export interface IconCSSIconOptions
 	extends IconCSSSharedOptions,
@@ -106,7 +163,17 @@ export interface IconCSSIconOptions
 }
 
 /**
- * Options for generating multiple icons
+ * Options for generating data for one icon as content
+ */
+export interface IconContentIconOptions
+	extends IconContentSharedOptions,
+		IconContentIconSelectorOptions,
+		IconCSSFormatOptions {
+	//
+}
+
+/**
+ * Options for generating multiple icons as background/mask
  */
 export interface IconCSSIconSetOptions
 	extends IconCSSSharedOptions,
@@ -115,3 +182,13 @@ export interface IconCSSIconSetOptions
 		IconCSSFormatOptions {
 	//
 }
+
+/**
+ * Options for generating multiple icons as content
+ */
+export interface IconContentIconSetOptions
+	extends IconContentSharedOptions,
+		IconContentIconSelectorOptions,
+		IconCSSFormatOptions {
+	//
+}

packages/utils/src/index.ts

@@ -71,8 +71,8 @@ export { colorKeywords } from './colors/keywords';
 export { stringToColor, compareColors, colorToString } from './colors/index';
 
 // CSS generator
-export { getIconCSS } from './css/icon';
+export { getIconCSS, getIconContentCSS } from './css/icon';
-export { getIconsCSS } from './css/icons';
+export { getIconsCSS, getIconsContentCSS } from './css/icons';
 
 // SVG Icon loader
 export type {

packages/utils/tests/icon-to-css-test.ts

@@ -1,5 +1,5 @@
 import { svgToURL } from '../lib/svg/url';
-import { getIconCSS } from '../lib/css/icon';
+import { getIconCSS, getIconContentCSS } from '../lib/css/icon';
 import type { IconifyIcon } from '@iconify/types';
 
 describe('Testing CSS for icon', () => {
@@ -45,8 +45,12 @@ describe('Testing CSS for icon', () => {
 				varName: 'svg',
 				forceSquare: true,
 				format: 'expanded',
+				rules: {
+					visibility: 'visible',
+				},
 			})
 		).toBe(`.test-icon:after {
+  visibility: visible;
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -142,6 +146,56 @@ describe('Testing CSS for icon', () => {
   -webkit-mask-image: ${expectedURL};
   mask-image: ${expectedURL};
 }
+`);
+	});
+
+	test('Content', () => {
+		const icon: IconifyIcon = {
+			body: '<path d="M0 0h16v16z" fill="#f80" />',
+			width: 24,
+			height: 16,
+		};
+		const expectedURL = svgToURL(
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16" width="48" height="32">${icon.body}</svg>`
+		);
+
+		expect(
+			getIconContentCSS(icon, {
+				height: 32,
+				format: 'expanded',
+			})
+		).toBe(`.icon::after {
+  content: ${expectedURL};
+}
+`);
+	});
+
+	test('Content with options', () => {
+		const icon: IconifyIcon = {
+			body: '<path d="M0 0h16v16z" fill="currentColor" stroke="currentColor" stroke-width="1" />',
+		};
+		const expectedURL = svgToURL(
+			`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="24">${icon.body.replace(
+				/currentColor/g,
+				'purple'
+			)}</svg>`
+		);
+
+		expect(
+			getIconContentCSS(icon, {
+				width: 32,
+				height: 24,
+				format: 'expanded',
+				color: 'purple',
+				iconSelector: '.test-icon::before',
+				rules: {
+					visibility: 'visible',
+				},
+			})
+		).toBe(`.test-icon::before {
+  visibility: visible;
+  content: ${expectedURL};
+}
 `);
 	});
 });

packages/utils/tests/icons-to-css-test.ts

@@ -1,5 +1,5 @@
 import { svgToURL } from '../lib/svg/url';
-import { getIconsCSS } from '../lib/css/icons';
+import { getIconsCSS, getIconsContentCSS } from '../lib/css/icons';
 import type { IconifyJSON } from '@iconify/types';
 
 describe('Testing CSS for multiple icons', () => {
@@ -33,10 +33,14 @@ describe('Testing CSS for multiple icons', () => {
 
 		// Detect mode: mask
 		expect(
-			getIconsCSS(iconSet, ['activity', '123', 'airplane'], {
+			getIconsCSS(iconSet, ['activity', '123', 'airplane', 'missing'], {
 				format: 'expanded',
+				rules: {
+					visibility: 'visible',
+				},
 			})
 		).toBe(`.icon--test-prefix {
+  visibility: visible;
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -60,6 +64,8 @@ describe('Testing CSS for multiple icons', () => {
 .icon--test-prefix--airplane {
   --svg: ${expectedURL('airplane')};
 }
+
+/* Could not find icon: missing */
 `);
 
 		// Force mode: background
@@ -219,8 +225,12 @@ describe('Testing CSS for multiple icons', () => {
 			getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
 				format: 'expanded',
 				varName: null,
+				rules: {
+					visibility: 'visible',
+				},
 			})
 		).toBe(`.icon--bi {
+  visibility: visible;
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -293,8 +303,12 @@ describe('Testing CSS for multiple icons', () => {
 			getIconsCSS(iconSet, ['activity', 'airplane-engines'], {
 				format: 'expanded',
 				iconSelector: '.test--{name}',
+				rules: {
+					visibility: 'visible',
+				},
 			})
 		).toBe(`.test--activity, .test--airplane-engines {
+  visibility: visible;
   display: inline-block;
   width: 1em;
   height: 1em;
@@ -381,6 +395,65 @@ describe('Testing CSS for multiple icons', () => {
   mask-size: 100% 100%;
   --svg: ${expectedURL('activity')};
 }
+`);
+	});
+
+	test('Content', () => {
+		const iconSet: IconifyJSON = {
+			prefix: 'test-prefix',
+			icons: {
+				'123': {
+					body: '<path fill="currentColor" d="M2.873 11.297V4.142H1.699L0 5.379v1.137l1.64-1.18h.06v5.961h1.174Zm3.213-5.09v-.063c0-.618.44-1.169 1.196-1.169c.676 0 1.174.44 1.174 1.106c0 .624-.42 1.101-.807 1.526L4.99 10.553v.744h4.78v-.99H6.643v-.069L8.41 8.252c.65-.724 1.237-1.332 1.237-2.27C9.646 4.849 8.723 4 7.308 4c-1.573 0-2.36 1.064-2.36 2.15v.057h1.138Zm6.559 1.883h.786c.823 0 1.374.481 1.379 1.179c.01.707-.55 1.216-1.421 1.21c-.77-.005-1.326-.419-1.379-.953h-1.095c.042 1.053.938 1.918 2.464 1.918c1.478 0 2.642-.839 2.62-2.144c-.02-1.143-.922-1.651-1.551-1.714v-.063c.535-.09 1.347-.66 1.326-1.678c-.026-1.053-.933-1.855-2.359-1.845c-1.5.005-2.317.88-2.348 1.898h1.116c.032-.498.498-.944 1.206-.944c.703 0 1.206.435 1.206 1.07c.005.64-.504 1.106-1.2 1.106h-.75v.96Z"/>',
+				},
+				'activity': {
+					body: '<path fill="currentColor" fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964L4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"/>',
+				},
+				'airplane': {
+					body: '<path fill="currentColor" d="M6.428 1.151C6.708.591 7.213 0 8 0s1.292.592 1.572 1.151C9.861 1.73 10 2.431 10 3v3.691l5.17 2.585a1.5 1.5 0 0 1 .83 1.342V12a.5.5 0 0 1-.582.493l-5.507-.918l-.375 2.253l1.318 1.318A.5.5 0 0 1 10.5 16h-5a.5.5 0 0 1-.354-.854l1.319-1.318l-.376-2.253l-5.507.918A.5.5 0 0 1 0 12v-1.382a1.5 1.5 0 0 1 .83-1.342L6 6.691V3c0-.568.14-1.271.428-1.849Zm.894.448C7.111 2.02 7 2.569 7 3v4a.5.5 0 0 1-.276.447l-5.448 2.724a.5.5 0 0 0-.276.447v.792l5.418-.903a.5.5 0 0 1 .575.41l.5 3a.5.5 0 0 1-.14.437L6.708 15h2.586l-.647-.646a.5.5 0 0 1-.14-.436l.5-3a.5.5 0 0 1 .576-.411L15 11.41v-.792a.5.5 0 0 0-.276-.447L9.276 7.447A.5.5 0 0 1 9 7V3c0-.432-.11-.979-.322-1.401C8.458 1.159 8.213 1 8 1c-.213 0-.458.158-.678.599Z"/>',
+				},
+				'airplane-engines': {
+					body: '<path fill="currentColor" d="M8 0c-.787 0-1.292.592-1.572 1.151A4.347 4.347 0 0 0 6 3v3.691l-2 1V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.191l-1.17.585A1.5 1.5 0 0 0 0 10.618V12a.5.5 0 0 0 .582.493l1.631-.272l.313.937a.5.5 0 0 0 .948 0l.405-1.214l2.21-.369l.375 2.253l-1.318 1.318A.5.5 0 0 0 5.5 16h5a.5.5 0 0 0 .354-.854l-1.318-1.318l.375-2.253l2.21.369l.405 1.214a.5.5 0 0 0 .948 0l.313-.937l1.63.272A.5.5 0 0 0 16 12v-1.382a1.5 1.5 0 0 0-.83-1.342L14 8.691V7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v.191l-2-1V3c0-.568-.14-1.271-.428-1.849C9.292.591 8.787 0 8 0ZM7 3c0-.432.11-.979.322-1.401C7.542 1.159 7.787 1 8 1c.213 0 .458.158.678.599C8.889 2.02 9 2.569 9 3v4a.5.5 0 0 0 .276.447l5.448 2.724a.5.5 0 0 1 .276.447v.792l-5.418-.903a.5.5 0 0 0-.575.41l-.5 3a.5.5 0 0 0 .14.437l.646.646H6.707l.647-.646a.5.5 0 0 0 .14-.436l-.5-3a.5.5 0 0 0-.576-.411L1 11.41v-.792a.5.5 0 0 1 .276-.447l5.448-2.724A.5.5 0 0 0 7 7V3Z"/>',
+				},
+				'empty': {
+					body: '<g />',
+				},
+			},
+		};
+		const expectedURL = (name: string, color = 'black') =>
+			svgToURL(
+				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">${iconSet.icons[
+					name
+				].body.replace(/currentColor/g, color)}</svg>`
+			);
+
+		expect(
+			getIconsContentCSS(
+				iconSet,
+				['activity', '123', 'airplane', 'whatever'],
+				{
+					height: 16,
+					format: 'expanded',
+					rules: {
+						display: 'inline-block',
+					},
+				}
+			)
+		).toBe(`.icon--test-prefix--activity::after {
+  display: inline-block;
+  content: ${expectedURL('activity')};
+}
+
+.icon--test-prefix--123::after {
+  display: inline-block;
+  content: ${expectedURL('123')};
+}
+
+.icon--test-prefix--airplane::after {
+  display: inline-block;
+  content: ${expectedURL('airplane')};
+}
+
+/* Could not find icon: whatever */
 `);
 	});
 });