Move reusable functions for using SVG in CSS to utils

packages/iconify/src/render/bg.ts

@@ -1,6 +1,7 @@
 import type { FullIconifyIcon } from '@iconify/utils/lib/icon';
 import { iconToSVG } from '@iconify/utils/lib/svg/build';
 import { iconToHTML } from '@iconify/utils/lib/svg/html';
+import { svgToURL } from '@iconify/utils/lib/svg/url';
 import {
 	elementDataProperty,
 	IconifyElement,
@@ -74,17 +75,7 @@ export function renderBackground(
 
 	// Update style
 	const isMonotone = renderData.body.indexOf('currentColor') !== -1;
-	const url =
+	const url = svgToURL(html);
-		'url("data:image/svg+xml,' +
-		html
-			.replace(/"/g, "'")
-			.replace(/%/g, '%25')
-			.replace(/#/g, '%23')
-			.replace(/{/g, '%7B')
-			.replace(/}/g, '%7D')
-			.replace(/</g, '%3C')
-			.replace(/>/g, '%3E') +
-		'")';
 	const newStyles: Record<string, string> = {
 		'--svg': url,
 		'width': renderAttribs.width,

packages/utils/package.json

@@ -202,6 +202,10 @@
 		"./lib/svg/trim": {
 			"require": "./lib/svg/trim.cjs",
 			"import": "./lib/svg/trim.mjs"
+		},
+		"./lib/svg/url": {
+			"require": "./lib/svg/url.cjs",
+			"import": "./lib/svg/url.mjs"
 		}
 	},
 	"files": [

packages/utils/src/index.ts

@@ -42,6 +42,8 @@ export { replaceIDs } from './svg/id';
 export { calculateSize } from './svg/size';
 export { encodeSvgForCss } from './svg/encode-svg-for-css';
 export { trimSVG } from './svg/trim';
+export { iconToHTML } from './svg/html';
+export { svgToURL } from './svg/url';
 
 // Colors
 export { colorKeywords } from './colors/keywords';

packages/utils/src/svg/encode-svg-for-css.ts

@@ -1,3 +1,5 @@
+import { encodeSVGforURL } from './url';
+
 /**
  * Encode the `SVG` to be used on `CSS`: https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0.
  *
@@ -17,12 +19,5 @@ export function encodeSvgForCss(svg: string): string {
 			'<svg xmlns="http://www.w3.org/2000/svg" '
 		);
 	}
-	return useSvg
+	return encodeSVGforURL(useSvg);
-		.replace(/"/g, "'")
-		.replace(/%/g, '%25')
-		.replace(/#/g, '%23')
-		.replace(/{/g, '%7B')
-		.replace(/}/g, '%7D')
-		.replace(/</g, '%3C')
-		.replace(/>/g, '%3E');
 }

packages/utils/src/svg/url.ts

@@ -0,0 +1,29 @@
+/**
+ * Encode SVG for use in url()
+ *
+ * Short alternative to encodeURIComponent() that encodes only stuff used in SVG, generating
+ * smaller code.
+ *
+ * If icon is not optimised, run trimSVG() before this function to get rid of new lines.
+ * This function is intended to be used with Iconify icon sets, which are already optimised
+ * and do not contain new lines.
+ */
+export function encodeSVGforURL(svg: string): string {
+	return (
+		svg
+			.replace(/"/g, "'")
+			.replace(/%/g, '%25')
+			.replace(/#/g, '%23')
+			// .replace(/{/g, '%7B') // not needed in string inside double quotes
+			// .replace(/}/g, '%7D') // not needed in string inside double quotes
+			.replace(/</g, '%3C')
+			.replace(/>/g, '%3E')
+	);
+}
+
+/**
+ * Generate url() from SVG
+ */
+export function svgToURL(svg: string): string {
+	return 'url("data:image/svg+xml,' + encodeSVGforURL(svg) + '")';
+}

packages/utils/tests/encode-url-test.ts

@@ -0,0 +1,22 @@
+import { svgToURL } from '../lib/svg/url';
+
+describe('Testing generating url()', () => {
+	// To make sure it works in browser, log variable `url` and test in actual CSS
+	test('Simple icon', () => {
+		const html =
+			'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0h16v16z" fill="#f80" /></svg>';
+		const url = svgToURL(html);
+		expect(url).toBe(
+			"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16z' fill='%23f80' /%3E%3C/svg%3E\")"
+		);
+	});
+
+	test('Icon with style', () => {
+		const html =
+			'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>path { fill: #f80; }</style><path d="M0 0h16v16z" /></svg>';
+		const url = svgToURL(html);
+		expect(url).toBe(
+			"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cstyle%3Epath { fill: %23f80; }%3C/style%3E%3Cpath d='M0 0h16v16z' /%3E%3C/svg%3E\")"
+		);
+	});
+});