diff --git a/package.json b/package.json
index 943a9597..e2721e0e 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
},
"devDependencies": {
"@cypress/snapshot": "2.1.7",
+ "@fortawesome/fontawesome-free": "^6.5.1",
"@sveltejs/adapter-static": "3.0.1",
"@sveltejs/kit": "2.5.9",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
diff --git a/src/app.html b/src/app.html
index 695765a7..827bd6bc 100644
--- a/src/app.html
+++ b/src/app.html
@@ -15,12 +15,6 @@
-
%sveltekit.head%
diff --git a/src/app.postcss b/src/app.postcss
index 8450d336..528b5111 100644
--- a/src/app.postcss
+++ b/src/app.postcss
@@ -1,3 +1,5 @@
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+
@tailwind base;
@tailwind components;
@tailwind utilities;
diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte
index 3cd45914..9c0bd1c4 100644
--- a/src/lib/components/Actions.svelte
+++ b/src/lib/components/Actions.svelte
@@ -8,6 +8,9 @@
import { logEvent } from '$lib/util/stats';
import dayjs from 'dayjs';
import { toBase64 } from 'js-base64';
+ import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json';
+
+ const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`;
const { krokiRendererUrl, rendererUrl } = env;
type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
@@ -28,7 +31,10 @@
const svgString = svg.outerHTML
.replaceAll('
', '
')
.replaceAll(/]*)>/g, (m, g: string) => `![]()
`);
- return toBase64(svgString);
+
+ return toBase64(`
+
+${svgString}`);
};
const exportImage = async (event: Event, exporter: Exporter) => {
@@ -72,15 +78,6 @@
const getSvgElement = () => {
const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement;
svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
- const fontAwesomeCdnUrl = [...document.head.querySelectorAll('link')]
- .map((link) => link.href)
- .find((url) => url.includes('font-awesome'));
- if (fontAwesomeCdnUrl == null) {
- return svgElement;
- }
- const styleElement = document.createElement('style');
- styleElement.textContent = `@import url("${fontAwesomeCdnUrl}");'`;
- svgElement.prepend(styleElement);
return svgElement;
};
diff --git a/yarn.lock b/yarn.lock
index ba49f30a..3641da6f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -300,6 +300,11 @@
"@floating-ui/dom" "^1.2.1"
vue-demi "^0.13.11"
+"@fortawesome/fontawesome-free@^6.5.1":
+ version "6.5.1"
+ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.5.1.tgz#55cc8410abf1003b726324661ce5b0d1c10de258"
+ integrity sha512-CNy5vSwN3fsUStPRLX7fUYojyuzoEMSXPl7zSLJ8TgtRfjv24LOnOWKT2zYwaHZCJGkdyRnTmstR0P+Ah503Gw==
+
"@headlessui-float/vue@^0.11.3":
version "0.11.4"
resolved "https://registry.yarnpkg.com/@headlessui-float/vue/-/vue-0.11.4.tgz#3689dab096f01d97d74e79c0a22445aa9f03ab78"