chore: add include_icons jinja global

frappe/hooks.py

@@ -33,8 +33,8 @@ app_include_css = [
 	"report.bundle.css",
 ]
 app_include_icons = [
-	"frappe/icons/timeless/icons.svg",
-	"frappe/icons/espresso/icons.svg",
+	"/assets/frappe/icons/timeless/icons.svg",
+	"/assets/frappe/icons/espresso/icons.svg",
 ]
 
 doctype_js = {
@@ -45,8 +45,8 @@ doctype_js = {
 web_include_js = ["website_script.js"]
 web_include_css = []
 web_include_icons = [
-	"frappe/icons/timeless/icons.svg",
-	"frappe/icons/espresso/icons.svg",
+	"/assets/frappe/icons/timeless/icons.svg",
+	"/assets/frappe/icons/espresso/icons.svg",
 ]
 
 email_css = ["email.bundle.css"]

frappe/templates/base.html

@@ -87,21 +87,17 @@
 		) }}
 	{%- endblock -%}
 
+	<div id="all-symbols" style="display:none"></div>
+	{%- for path in web_include_icons -%}
+	{{ include_icons(path) }}
+	{%- endfor -%}
+
 	{% block base_scripts %}
 	<!-- js should be loaded in body! -->
-	<div id="all-symbols" style="display:none"></div>
 	<script>
 		frappe.boot = {{ boot }}
 		// for backward compatibility of some libs
 		frappe.sys_defaults = frappe.boot.sysdefaults;
-		{%- for path in web_include_icons -%}
-		fetch(`/assets/{{ path }}?v=${window._version_number}`, {credentials: "same-origin"})
-			.then((r) => r.text())
-			.then((svg) => {
-				let svg_container = document.getElementById("all-symbols");
-				svg_container.insertAdjacentHTML("beforeend", svg);
-			});
-		{%- endfor -%}
 	</script>
 	{{ include_script('frappe-web.bundle.js') }}
 	{% endblock %}

frappe/utils/jinja_globals.py

@@ -110,6 +110,25 @@ def include_script(path, preload=True):
 	return f'<script type="text/javascript" src="{path}"></script>'
 
 
+def include_icons(path, preload=True):
+	"""Get path of bundled svg icons files.
+
+	If preload is specified the path will be added to preload headers so browsers can prefetch
+	assets."""
+	path = bundled_asset(path)
+
+	if preload:
+		import frappe
+
+		frappe.local.preload_assets["icons"].append(path)
+
+	return (
+		'<script type="text/javascript">fetch(`'
+		+ path
+		+ '?v=${window._version_number}`, {credentials: "same-origin"}).then((r) => r.text()).then((svg) => {let c = document.getElementById("all-symbols"); c.insertAdjacentHTML("beforeend", svg);});</script>'
+	)
+
+
 def include_style(path, rtl=None, preload=True):
 	"""Get path of bundled style files.
 

frappe/website/utils.py

@@ -573,7 +573,7 @@ def add_preload_for_bundled_assets(response):
 
 	version = get_build_version()
 	links.extend(
-		f"</assets/{svg}?v={version}>; rel=preload; as=fetch; crossorigin"
+		f"<{svg}?v={version}>; rel=preload; as=fetch; crossorigin"
 		for svg in frappe.local.preload_assets["icons"]
 	)
 

frappe/www/app.html

@@ -21,7 +21,7 @@
 			href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
 		<link rel="icon"
 			href="{{ favicon or "/assets/frappe/images/frappe-favicon.svg" }}" type="image/x-icon">
-		{% for include in include_css -%}
+		{% for include in app_include_css -%}
 		{{ include_style(include) }}
 		{%- endfor -%}
 
@@ -56,17 +56,13 @@
 			frappe.csrf_token = "{{ csrf_token }}";
 
 
-			{%- for path in include_icons -%}
-			fetch(`/assets/{{ path }}?v=${window._version_number}`, { credentials: "same-origin" })
-				.then((r) => r.text())
-				.then((svg) => {
-					let svg_container = document.getElementById("all-symbols");
-					svg_container.insertAdjacentHTML("beforeend", svg);
-				});
-			{%- endfor -%}
 		</script>
 
-	{% for include in include_js %}
+		{%- for path in app_include_icons -%}
+		{{ include_icons(path) }}
+		{%- endfor -%}
+
+	{% for include in app_include_js %}
 	{{ include_script(include) }}
 	{% endfor %}
 

frappe/www/app.py

@@ -46,21 +46,20 @@ def get_context(context):
 	boot_json = json.dumps(boot_json)
 
 	hooks = frappe.get_hooks()
-	include_js = hooks.get("app_include_js", []) + frappe.conf.get("app_include_js", [])
-	include_css = hooks.get("app_include_css", []) + frappe.conf.get("app_include_css", [])
-	include_icons = hooks.get("app_include_icons", [])
-	frappe.local.preload_assets["icons"].extend(include_icons)
+	app_include_js = hooks.get("app_include_js", []) + frappe.conf.get("app_include_js", [])
+	app_include_css = hooks.get("app_include_css", []) + frappe.conf.get("app_include_css", [])
+	app_include_icons = hooks.get("app_include_icons", [])
 
 	if frappe.get_system_settings("enable_telemetry") and os.getenv("FRAPPE_SENTRY_DSN"):
-		include_js.append("sentry.bundle.js")
+		app_include_js.append("sentry.bundle.js")
 
 	context.update(
 		{
 			"no_cache": 1,
 			"build_version": frappe.utils.get_build_version(),
-			"include_js": include_js,
-			"include_css": include_css,
-			"include_icons": include_icons,
+			"app_include_js": app_include_js,
+			"app_include_css": app_include_css,
+			"app_include_icons": app_include_icons,
 			"layout_direction": "rtl" if is_rtl() else "ltr",
 			"lang": frappe.local.lang,
 			"sounds": hooks["sounds"],