Merge branch 'feat/image-to-css' into chore/all-my-stuffs

Author: sharevb

components.d.ts

@@ -274,10 +274,13 @@ declare module '@vue/runtime-core' {
     NProgress: typeof import('naive-ui')['NProgress']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']

package.json

@@ -212,7 +212,7 @@
     "spdx-satisfies": "^5.0.1",
     "sql-formatter": "^13.0.0",
     "sshpk": "^1.18.0",
-    "svg-to-url": "^4.0.0",
+    "svgo": "^3.3.2",
     "svg2png-wasm": "^1.4.1",
     "tesseract.js": "^5.1.1",
     "tidy-url": "^1.18.3",

pnpm-lock.yaml

@@ -1,4 +1,30 @@
-import { stringToUrl } from 'svg-to-url';
+import { type Config, type PluginConfig, optimize } from 'svgo';
+
+function svgo(config: Config) {
+  return (data: string) => {
+    const { plugins = [], ...rest } = config || {};
+    return optimize(data, {
+      ...rest,
+      plugins: [
+        ...(plugins.length > 0 ? plugins : ['preset-default']),
+        'removeXMLNS',
+      ] as PluginConfig[],
+    }).data.replace(/^<svg/g, '<svg xmlns="http://www.w3.org/2000/svg"');
+  };
+}
+
+export function encodeStr(svgStr: string) {
+  const encoded = encodeURIComponent(svgStr)
+    .replace(/%20/g, ' ')
+    .replace(/%3D/g, '=')
+    .replace(/%3B/g, ';')
+    .replace(/%3A/g, ':')
+    .replace(/%2F/g, '/')
+    .replace(/%2C/g, ',')
+    .replace(/%22/g, '\'');
+
+  return `data:image/svg+xml,${encoded}`;
+}
 
 export type CSSType = 'Background' | 'Border' | 'ListItemBullet' | 'Url';
 
@@ -21,9 +47,8 @@ async function fileToDataUrl(file: File) {
   });
 }
 
-function svgToDataUrl(image: string) {
-  const getUrlFromSvgString = stringToUrl({});
-  return getUrlFromSvgString(image);
+function svgToDataUrl(svg: string) {
+  return encodeStr(svgo({})(svg));
 }
 
 export async function imageToCSS(