Direct SVG rendering (#12157)

Introduce 'make svg' which calls a node script that compiles svg files
to `public/img/svg`. These files are vendored to not create a dependency
on Node for the backend build.

On the frontend side, configure webpack using `raw-loader` so SVGs can
be imported as string.

Also moved our existing SVGs to web_src/svg for consistency.

Fixes: https://github.com/go-gitea/gitea/issues/11618

1 files changed, 63 insertions, 0 deletions

diff --git a/build/generate-svg.js b/build/generate-svg.js
new file mode 100755
index 0000000000..f2c2d3ed8a
--- /dev/null
+++ b/build/generate-svg.js
@@ -0,0 +1,63 @@
+#!/usr/bin/env node
+'use strict';
+
+const fastGlob = require('fast-glob');
+const Svgo = require('svgo');
+const {resolve, parse} = require('path');
+const {readFile, writeFile, mkdir} = require('fs').promises;
+
+const glob = (pattern) => fastGlob.sync(pattern, {cwd: resolve(__dirname), absolute: true});
+const outputDir = resolve(__dirname, '../public/img/svg');
+
+function exit(err) {
+  if (err) console.error(err);
+  process.exit(err ? 1 : 0);
+}
+
+async function processFile(file, {prefix = ''} = {}) {
+  const name = `${prefix}${parse(file).name}`;
+
+  const svgo = new Svgo({
+    plugins: [
+      {removeXMLNS: true},
+      {removeDimensions: true},
+      {
+        addClassesToSVGElement: {
+          classNames: [
+            'svg',
+            name,
+          ],
+        },
+      },
+      {
+        addAttributesToSVGElement: {
+          attributes: [
+            {'width': '16'},
+            {'height': '16'},
+            {'aria-hidden': 'true'},
+          ],
+        },
+      },
+    ],
+  });
+
+  const {data} = await svgo.optimize(await readFile(file, 'utf8'));
+  await writeFile(resolve(outputDir, `${name}.svg`), data);
+}
+
+async function main() {
+  try {
+    await mkdir(outputDir);
+  } catch {}
+
+  for (const file of glob('../node_modules/@primer/octicons/build/svg/*.svg')) {
+    await processFile(file, {prefix: 'octicon-'});
+  }
+
+  for (const file of glob('../web_src/svg/*.svg')) {
+    await processFile(file);
+  }
+}
+
+main().then(exit).catch(exit);
+